# Embed on your site

Show your Bynefit team — forms, events, donations — anywhere you can paste HTML. Two patterns: **inline snippets** drop content where you choose; the floating **widget** adds a corner bubble. Inline is the modern default. Both work on any platform (WordPress, Squarespace, Wix, Webflow, hand-rolled HTML).

## Inline snippets (recommended)

Add the Bynefit loader once per page, then drop a `<div>` wherever you want a Bynefit feature to render. Declare your team on the loader script and every feature on the page inherits it.

**Paste once, near </body> (HTML)**

```
<script src="https://bynefit.com/sites/bynli.js" data-team="your-team"></script>

<!-- A Bynefit form, inline -->
<div data-bynli="form" data-form-id="frm_xxx"></div>

<!-- An upcoming-events grid -->
<div data-bynli="events" data-limit="6"></div>

<!-- A donate card with preset amounts -->
<div data-bynli="donate" data-amounts="10,25,50,100"></div>
```

Replace `your-team` with your team slug (the part before `.site.bynefit.com`). Loader script only needs to appear once — every `data-bynli="…"` div on the page picks the team up from it.

Per-element `data-team` still works if you need to mix multiple teams on one page; it overrides the loader-level value.

### What you can drop in

- `data-bynli="form"` — any form you've built at `/dash/forms`. Set `data-form-id="frm_…"`.
- `data-bynli="events"` — upcoming events list. Optional `data-limit` (default 5), `data-scope="upcoming"` or `"past"`.
- `data-bynli="donate"` — donation picker. Optional `data-amounts="10,25,50"`, `data-default-amount`, `data-style="button"` for a one-click variant.
- `data-bynli="modal"`, `"toast"`, `"confirm"`, `"lightbox"` — UI primitives the same as Bynefit-hosted sites.

## Add the widget

1. Open [Embeds](https://bynefit.com/dash/integrations/embeds) in your dashboard (Space admins only)
2. Add the address of your site under *Allowed sites*. The widget only loads on sites you list
3. Copy the snippet that looks like this:

**Paste before </body> (HTML)**

```
<script src="https://bynefit.com/widget.js" data-key="your-key"></script>
```

1. Paste it before the closing `</body>` tag on any page of your site
2. Save and reload — a floating Bynefit button appears in the corner

The key is safe to publish. It only works on the sites you allow, and you can rotate it from Embeds at any time.

> **It just works on any platform.** Squarespace, WordPress, Wix, Webflow, hand-rolled HTML — anywhere you can paste a script tag, the widget runs.

## Customize the look

From [Embeds](https://bynefit.com/dash/integrations/embeds) you can change:

- **Corner** — bottom-right (default) or bottom-left
- **Style** — floating card or inline
- **Accent color** — match your site's brand
- **Bubble label** — the text on the trigger (e.g. "Join us", "Donate")
- **Sections** — turn off the ones you don't want shown

## What appears in the widget

The same sections you've enabled on your public team page — members, events, campaigns, donations, feed, resources, short links. Sections show up in the same order you configured at [/dash/settings](https://bynefit.com/dash/settings).

## Deep links

Add a hash to any URL on your site to open the widget straight to a specific tab:

- `yoursite.com/#bynli-open` — opens the drawer
- `yoursite.com/#bynli-events` — opens to events
- `yoursite.com/#bynli-feed` — opens to the feed
- `yoursite.com/#bynli-join` — opens the join flow

## Short links

Every team gets a personal short-link domain — `bynefit.com/go/your-team`. Use it on flyers, in email signatures, or anywhere you need a clean URL that you can change later without reprinting anything.

1. Open [/dash/links](https://bynefit.com/dash/links)
2. Create a short link with a memorable slug
3. Point it anywhere — a campaign page, an event, an external site
4. Track clicks in the same screen

## No site of your own? Bynefit will host one.

If you don't have an existing website to drop the widget into, Bynefit can host a full static site for you at `{your-team}.site.bynefit.com` (or your own custom domain on the right plan). You get a file editor in the dashboard, Bynefit Blocks templating, a kit of UI components, and "Sign in with Bynefit" if you want a member portal.

- [Site config (config.json)](https://bynefit.com/docs/help-site-config) — Bootstrap, fonts, and the auth setup
- [Bynefit Blocks](https://bynefit.com/docs/help-bynefit-blocks) — variables and includes for shared headers
- [Site JS](https://bynefit.com/docs/help-site-js) — a complete page example using modals, toasts, and forms

## Building something custom?

Need to fetch data into your own app instead of embedding the widget? See the [Developer docs](https://bynefit.com/docs) — read API, webhooks, and [OAuth / Sign in with Bynefit](https://bynefit.com/docs/oauth) all live there.

---

Source: https://bynefit.com/docs/help-embeds