Take it further

Site config (config.json)

A small JSON file at the root of your team site that controls Bootstrap, fonts, SEO defaults, and a few other site-wide knobs. Bynli creates one for you automatically — you just edit the parts you want.

Where it lives. Open /dash/sites and look for config.json at the top of your file list. Edit it like any other site file. Save, and your live site picks it up on the next page load.

The sections

Every field is optional. If you delete a section or leave it empty, Bynli falls back to sensible defaults. The starter file looks like this:

{
  "versions":  [],
  "ui":        { "load": [] },
  "auth":      { "client_id": "", "redirect_uri": "", "scopes": [] },
  "seo":       { "title": "", "description": "", "og_image": "" },
  "branding":  { "show_powered_by": true },
  "analytics": { "enabled": true }
}

ui — load Bootstrap and fonts

The most useful section. Put the names of any Bynli UI packs you want loaded on every page of your site, and they appear without you writing a single <script> or <link> tag.

"ui": {
  "load": ["bootstrap", "icons", "font:inter"]
}

What you can load

Name	What you get
`bootstrap`	Bootstrap 5 (CSS + JS bundle)
`icons`	Font Awesome 7 (Free) — use `<i class="fa-solid fa-house"></i>`
`auth`	"Sign in with Bynli" — the auth kit (see the auth section below for setup)
`ui`	Shortcut for Bootstrap + Icons + DM Sans + Instrument Serif (the Bynli look)
`fonts`	DM Sans + Instrument Serif only
`font:<name>`	One Google font from the catalog below

Font catalog

Twenty-five hand-picked fonts. Pick one for headlines, another for body, mix and match:

Style	Names
Sans	`font:dm-sans`, `font:inter`, `font:roboto`, `font:open-sans`, `font:poppins`, `font:lato`, `font:montserrat`, `font:work-sans`, `font:nunito`, `font:raleway`, `font:source-sans`
Serif	`font:instrument-serif`, `font:playfair`, `font:merriweather`, `font:lora`, `font:crimson`, `font:cormorant`, `font:libre-baskerville`
Display	`font:bebas`, `font:archivo`, `font:space-grotesk`
Monospace	`font:jetbrains-mono`, `font:space-mono`, `font:fira-code`
Script	`font:caveat`, `font:dancing-script`

Loading a font makes it available — you still tell your CSS to use it:

body { font-family: "Inter", system-ui, sans-serif; }
h1, h2 { font-family: "Instrument Serif", Georgia, serif; }

auth — Sign in with Bynli

Let your visitors sign in to your site using their Bynli account, the same way they'd sign in with Google or Apple elsewhere. Add auth to ui.load, then fill in this block:

"ui":   { "load": ["auth"] },
"auth": {
  "client_id":    "site_xxxxxxxxxxxx",
  "redirect_uri": "https://yoursite.com/auth",
  "scopes":       ["openid", "profile", "email"]
}

Where the client_id comes from. A Bynli admin on your team registers your site as an OAuth client at /dash/sites/oauth. You give it a name, list the URL Bynli should redirect users back to after sign-in (the redirect_uri), and pick scopes. You get a client_id back; paste it here.

The redirect_uri page

Put any page on your site at the path you set as the redirect_uri. The kit handles everything when the user lands there with a ?code and ?state in the URL — exchanges the code for tokens, stores them, then navigates them back to where they clicked Sign in. A minimal "signing you in…" placeholder is enough:

<!DOCTYPE html>
<html>
<head><title>Signing you in…</title></head>
<body>
    <p>Signing you in…</p>
</body>
</html>

Declarative attributes

Once auth is loaded, sprinkle these data-* attributes into your HTML — no JavaScript required:

Attribute	What it does
`data-bynli-signin`	On a button: clicking starts the sign-in flow
`data-bynli-signout`	On a button: clears the local session
`data-bynli-when="signed-in"`	On any element: visible only when the user is signed in
`data-bynli-when="signed-out"`	On any element: visible only when the user is signed out
`data-bynli-user="name"`	Text replaced with the signed-in user's display name
`data-bynli-user="email"`	Text replaced with the signed-in user's email
`data-bynli-user="picture"`	On `<img>`: `src` set to the user's photo

A typical setup:

<div data-bynli-when="signed-out">
  <button data-bynli-signin>Sign in with Bynli</button>
</div>

<div data-bynli-when="signed-in">
  Welcome <span data-bynli-user="name"></span>.
  <button data-bynli-signout>Sign out</button>
</div>

For your visitors

Anyone who signs into your site can see and revoke the authorization at /dash/me/apps on Bynli. Revoking signs them out of your site within a few minutes.

seo — page defaults

Filled into your pages' <head> when present. Leave blank to fall back to your team name + description.

"seo": {
  "title":       "My Team — Community Hub",
  "description": "Events, dues, and updates for our community.",
  "og_image":    "/images/og-card.png"
}

branding

Controls the small "Powered by Bynli" badge in the bottom-right of your site. By default it's on. Removing the badge is an entitlement that comes with the custom-domain add-on — set this to false and the badge disappears if your team has the add-on.

"branding": { "show_powered_by": false }

analytics

A one-pixel page-view ping Bynli uses to populate the analytics panel in your dashboard. On by default. Set to false if you'd rather not phone home — your dashboard analytics will go quiet.

"analytics": { "enabled": false }

versions — design review mode

If you're presenting multiple design directions to a client, list them here and Bynli turns on a switcher bar across the top of your site plus a gallery overlay at ?review. Leave the array empty (or omit the key) for a normal one-version site.

"versions": [
  { "path": "/",   "label": "Direction A" },
  { "path": "/v2", "label": "Direction B" }
]

Embedded forms inherit your styling

If you've loaded bootstrap via ui.load, any Bynli form you embed picks it up automatically — no extra attribute needed. The form renders with the Bynli-default styling preset (today: Bootstrap classes like form-control, form-select, btn btn-primary):

<div data-bynli="form" data-form-id="frm_xxx"></div>

On sites that don't load Bootstrap, the same embed renders bare HTML so unstyled sites aren't affected.

Override the auto-detection if you need to:

Attribute	Effect
`data-form-style="default"`	Force Bootstrap styling even without auto-detect
`data-form-style="bare"`	Force bare HTML even if Bootstrap is loaded

Common edits

"I want a Bootstrap site with Inter"

{
  "ui": { "load": ["bootstrap", "font:inter"] }
}

"I want the Bynli look — DM Sans + Instrument Serif"

{
  "ui": { "load": ["fonts"] }
}

"I want everything — Bootstrap, icons, and the Bynli fonts"

{
  "ui": { "load": ["ui"] }
}

"I want a member portal with Sign in with Bynli"

{
  "ui": { "load": ["ui", "auth"] },
  "auth": {
    "client_id":    "site_xxxxxxxxxxxx",
    "redirect_uri": "https://yoursite.com/auth",
    "scopes":       ["openid", "profile", "email"]
  }
}