# 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. Bynefit creates one for you automatically — you just edit the parts you want.

> **Where it lives.** Open [/dash/sites](https://bynefit.com/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, Bynefit falls back to sensible defaults. The starter file looks like this:

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

## ui — load Bootstrap and fonts

The most useful section. Put the names of any Bynefit 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 Bynefit" — the auth kit (see the [auth section](#auth) below for setup) |
| `ui` | Shortcut for Bootstrap + Icons + DM Sans + Instrument Serif (the Bynefit 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 Bynefit

Let your visitors sign in to your site using their Bynefit 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 Bynefit admin on your team registers your site as an OAuth client at [/dash/sites/oauth](https://bynefit.com/dash/sites/oauth). You give it a name, list the URL Bynefit 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 `src` you set yourself is kept as the placeholder when there's no photo or nobody is signed in |
| `data-bynli-user="nickname"` | Text replaced with the signed-in user's username |
| `data-bynli-user="bio"` | Text replaced with the signed-in user's bio (empty when they haven't written one) |
| `data-bynli-user="profile"` | On `<a>`: `href` set to the user's public Bynefit profile. Anywhere else, the link as text |

A typical setup:

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

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

### Sign in and sign up without leaving your site

Instead of sending people to Bynefit and back, you can open sign-in in a sheet on your own page. Turn on **Sign-in sheet** for your client at [/dash/sites/oauth](https://bynefit.com/dash/sites/oauth), then drop in the Bynefit button:

```
<bynefit-signin variant="signin" theme="dark" size="md"></bynefit-signin>
<bynefit-signin variant="signup" theme="light"></bynefit-signin>

<button data-bynli-signin="sheet">Sign in</button>
<button data-bynli-signin="signup">Create an account</button>
```

| Option | Values |
| --- | --- |
| `variant` | `signin`, `continue`, `signup` |
| `theme` | `dark`, `light`, `outline` |
| `size` | `sm`, `md`, `lg` |

From JavaScript, `Bynli.auth.button(element, { variant, theme, size })` draws the same button, and `Bynli.auth.openSheet({ prompt: 'create' })` opens the sheet and resolves to `true` once the person is signed in. Add `"signup": false` to your `auth` block to offer sign-in only.

> **Your page never sees a password.** The sheet is a window from `id.bynefit.com` that your site's scripts can't read. It shows your site's name, logo and colour from your Space, the address it is open on, and "Secured by Bynefit". New accounts confirm their email before your site hears about them, and choose what you can see.

If your site sets a Content Security Policy, allow the sheet and the token exchange:

```
frame-src https://id.bynefit.com;
connect-src 'self' https://bynefit.com https://id.bynefit.com;
```

Without `frame-src`, or in a browser that blocks the sheet, people get a "Continue in a new window" button instead.

The "Powered by Bynefit" badge loads its stylesheet from Bynefit. If your policy restricts styles, add `style-src https://bynefit.com` or the badge will not appear.

### For your visitors

Anyone who signs into your site can see and revoke the authorization at [/dash/me/apps](https://bynefit.com/dash/me/apps) on Bynefit. 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 Bynefit" 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 }
```

The badge starts as a small round Bynefit mark. On a visitor's first page in a session it opens briefly to "Powered by Bynefit" and settles back to the mark; hovering, focusing or tapping it shows the full line. If your site has a sticky bar along the bottom edge, lift the badge above it with `offset_bottom` (whole pixels, 0 to 400):

```
"branding": { "offset_bottom": 64 }
```

## analytics

A one-pixel page-view ping Bynefit 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 Bynefit 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 Bynefit form you embed picks it up automatically — no extra attribute needed. The form renders with the Bynefit-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 Bynefit look — DM Sans + Instrument Serif"

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

### "I want everything — Bootstrap, icons, and the Bynefit fonts"

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

### "I want a member portal with Sign in with Bynefit"

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

---

Source: https://bynefit.com/docs/help-site-config