Integrations

Embed widget

Drop your Bynli group into any website with one <script> tag. No iframes, no CSS conflicts — the widget renders in Shadow DOM so your site's styles stay put.

Quick start

Paste this anywhere on your page — usually right before </body>:

HTMLyour site

<script
  src="https://bynli.com/widget.v2.js"
  data-key="bapi_tk_your_key_here"
  async></script>

The widget adds a small floating card in the corner of your site showing your group name, a live stat (members, campaign progress, next event), and a primary action button. Clicking it opens a contained side drawer (desktop) or bottom sheet (mobile) with everything else.

Two versions are live. widget.v2.js is the current widget — floating card + drawer, with auto-derived primary action. widget.js is the original — bubble + full-screen overlay, still maintained, still supported. Existing embeds keep working; new embeds should use v2.js.

Get your key

Go to /dash/integrations/api-tokens.
Click Create a token.
Give it a label like "Website embed".
Check embed:widget in the scopes list. This is the only scope the widget needs.
Optionally list the domains allowed to use it (recommended — see below).
Click create. Copy the bapi_tk_… value immediately — it's shown once.

Already have a token? You can add embed:widget to an existing token from the same page — click Edit, check the scope, save. No need to rotate or recreate.

Domain locking

The first time the widget loads on a new domain, that domain is auto-registered to your group and we email your admins. Requests from any other domain are rejected — so a copy of your embed snippet on someone else's site won't work.

If you need to move embeds to a new domain (site migration, etc.), visit your widget settings on the dashboard to update the registered domain.

Customize

Pass options as extra data- attributes on the script tag:

Attribute	Values	Purpose
`data-key`	required	Your API token with the `embed:widget` scope.
`data-mode`	`float` (default) `inline`	How the widget appears. See Inline mode below.
`data-position`	`bottom-right` (default) `bottom-left`	Where the floating card sits. Float mode only.
`data-accent`	Any CSS color (e.g. `#7a4cc3`)	Override your group's accent color for this embed.
`data-target`	Element id (e.g. `my-widget`)	Required for `data-mode="inline"`. The widget mounts inside the element with this id.

Inline mode

Inline mode renders the widget directly into a section of your page — no floating trigger, no overlay. Often converts better when the widget is the page's main content (e.g. a donate landing page or a community sign-up section).

HTMLyour site

<div id="my-widget"></div>

<script
  src="https://bynli.com/widget.v2.js"
  data-key="bapi_tk_your_key_here"
  data-mode="inline"
  data-target="my-widget"
  async></script>

Same hero card and section composition as the drawer — just rendered in document flow. The widget keeps its dark surface treatment; it doesn't inherit your host page's typography or colors.

Deep linking

Link directly to a part of the widget from anywhere on your page using URL hashes:

Hash	Opens to
`#bynli-open`	The widget drawer (default tab)
`#bynli-donate`	Donate hero
`#bynli-events`	Events section
`#bynli-feed`	Latest posts
`#bynli-resources`	Resources
`#bynli-join`	Join / become-a-member

HTMLyour site

<a href="#bynli-donate">Support our work</a>

What's inside

The widget mirrors the section ordering you configured on your public group page at bynli.com/group/<slug>. You don't maintain a separate config for the widget — change the order or visibility of sections on your group page and the widget follows.

The primary action is auto-picked based on your group's setup:

Active relief campaign → Donate to the campaign
Donations enabled → Donate
Paid membership → Become a member
Upcoming events → See events
Otherwise → Visit page

Accessibility

The drawer is a proper modal with keyboard focus management and Escape to close.
The mobile sheet has the standard drag-handle and snap-to-dismiss.
The trigger card respects prefers-reduced-motion — the rotating live state and entry animations are disabled for users who request it.
All interactive elements have visible focus rings.

Troubleshooting

Widget doesn't appear at all

Open your browser's developer console (F12). Look for messages prefixed with [Bynli] or [Bynli v2].

data-key is required — the attribute name is data-key, not data-bynli-key or anything else.
config request failed: HTTP 403 — Token missing embed:widget scope — edit your token at /dash/integrations/api-tokens and check the embed:widget scope.
config request failed: HTTP 403 — Invalid API token — the token doesn't exist or has been revoked. Create a new one.
config request failed: HTTP 403 — Public-tier tokens cannot embed the widget — you generated a public-tier token (bapi_pk_…) by mistake. The widget needs a team-scoped token (bapi_tk_…).
config request failed: HTTP 403 — domain_mismatch — the widget is loading from a domain that isn't registered for your token. Check your token's allowed-domains list.

Donate button leads to the wrong group

If a logged-in visitor clicks Donate and lands on their own group's checkout instead of yours, you're on an older version of the widget — update to widget.v2.js (or the latest widget.js).

Team logo broken / wrong URL

The widget always loads images from bynli.com regardless of where it's embedded. If your logo shows a broken-image icon, the URL stored on your group page is probably wrong. Re-upload the logo from your group settings.

Open it programmatically

The deep-link hashes work programmatically too — just set location.hash:

JavaScriptyour site

document.getElementById('donate-btn')
    .addEventListener('click', () => {
        location.hash = 'bynli-donate';
    });