Automation

Embed widget

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

Install

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

HTMLyour site

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

That's it. The widget adds a floating launcher button in the corner of your site. When a visitor clicks it, a full-screen overlay opens with your members, events, resources, and feed.

Where to get the key

Create a team key at /dash/integrations/api-tokens and give it the embed scope. Each team key is tied to one organization — the widget will only show that organization's data.

Domain-locking keys. When you create the key, you can list the domains allowed to use it. Requests from other domains are rejected, so even if your key is visible in your site's HTML, a copy on someone else's domain won't work.

Customize

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

Attribute	Purpose
`data-bynli-key`	Your team key. Required.
`data-bynli-tab`	Which tab opens first: `members`, `events`, `resources`, `feed`.
`data-bynli-launcher`	Where the floating button sits: `bottom-right` (default), `bottom-left`, or `hidden`.
`data-bynli-brand`	Override the accent color with any CSS color.

Open it programmatically

Set data-bynli-launcher="hidden" and call the widget from your own button:

JavaScriptyour site

<button onclick="window.Bynli.open('resources')">
  Find resources
</button>

What loads inside

Members — public member directory for the organization.
Events — upcoming events.
Resources — the community directory from the resources API.
Feed — the organization's public posts.

Accessibility

The overlay is a proper modal dialog with keyboard focus management and Escape to close. It's responsive down to small phones — tabs collapse to a bottom bar on narrow screens.