Skip to main content

How can we help?

Need help? Check out our documentation or contact support

Search

Create a custom Embed It widget

  • Updated

Create a custom Embed It widget by pasting third-party embed code, optionally adding double-brace variables, enabling it for chapter pages, and meeting the bevywidgets.com security requirements for external platforms.

Note: Custom Embed It widgets are a paid feature. Contact your customer success manager for pricing. When the feature is enabled for your community, admins see New widget on the Widgets tab. If New widget is disabled or missing, Embed It custom widgets are not turned on.

What custom widgets are

A custom widget is an Embed It widget your admin team creates by pasting third-party embed code. After save and enable for chapter pages, it appears as a chapter page builder component.

Building blocks:

  • Embed code — HTML/script from the third party; rendered in a sandboxed iframe on bevywidgets.com.
  • Variables (optional) — double-brace placeholders such as {{playlist-id}} with admin defaults and chapter overrides.

Obtain embed code from your content platform

  1. Sign in to the content platform.
  2. Open the content to embed.
  3. Find Share / Embed.
  4. Copy the HTML embed snippet.

Tip: Embed code can be up to 10,000 characters. If Save fails after pasting a very large snippet, shorten the code or ask your customer success manager for help.

Create and enable a custom widget

Path: Admin Dashboard → Page builder → Widgets → New widget.

  1. Open the Admin Dashboard.
  2. Select Page builder.
  3. Select the Widgets tab.
  4. Select New widget.
  5. Enter a Name.
  6. Optional: upload an Icon.
  7. Available on: Disabled or Chapter.
  8. Paste embed code on the Code tab.
  9. Optional: add variables.
  10. Preview, then Save.

Example: YouTube playlist with a variable

Create a Chapter playlist widget, add a Playlist ID variable, Copy {{playlist-id}}, and replace the list= value (not si=). Preview, Save, place on the chapter canvas, and let organizers override under Settings → Page widgets.

Static list=… playlist embed (before variable).

<iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PLUC9Vz9R3tpLkRC8dNf5dOpL-O-OJ944y" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Same embed with list={{playlist-id}}.

<iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list={{playlist-id}}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Important: Put the variable on the value you want organizers to change—usually the list= playlist ID. Do not replace unrelated query parameters (such as si=) with the playlist variable.

Variables

Without variables, every chapter shows the same static embed. With {{token}} placeholders, Bevy substitutes the chapter value when present, otherwise the admin default.

Field Required? Notes
Name Yes Shown to organizers. Bevy turns the name into the token used in the embed code (for example Playlist ID → {{playlist-id}}). Use Copy next to the chip so you paste the exact token.
Default value No Recommended. Used when a chapter has no override. If both the default and the chapter value are blank, the widget still renders, but the placeholder is replaced with an empty string—so the third-party embed often fails or shows blank content.
Short description No Shown to organizers under Page widgets. Use it to describe the expected format (for example “YouTube playlist ID after list=”).

Add a variable to the embed code

  1. Edit the widget; expand Variables; Add variable.
  2. Enter name (and optional default/description); confirm.
  3. Copy the chip token into the embed code over the static value.
  4. Preview, then Save.

Tip: Always use Copy rather than typing braces by hand. Tokens are slugified from the variable name and must match exactly for substitution to work.

Edit or delete a variable

Once you've created a variable, you can also choose to edit or delete it later. 

Edit a variable

  1. Access the variable: In the widget edit modal, scroll down to the Variables section and find the variable you would like to edit.
  2. Edit the variable: Click on the Edit icon
  3. Modify settings: Modify the applicable variable settings and click the Confirm icon
  4. Save the edit: Click Save 

Delete a variable

  1. Access the variable: In the widget edit modal, scroll down to the Variables section and find the variable you would like to edit.
  2. Edit the variable: Click on the Delete icon
  3. Modify settings: Modify the applicable variable settings and click the Confirm icon
  4. Save the edit: Click Save 

Security requirements for external platforms

Widgets render on https://bevywidgets.com. Simple iframe embeds often need no extra server settings. API-driven or frame-ancestors platforms (Discourse, Khoros, and similar) usually do.

Requirement What to configure on the external system
Sandbox origin All custom widget code runs inside an iframe on https://bevywidgets.com. Treat that host as the browser origin that loads or frames your content.
CORS (API / XHR embeds) If your embed script calls your API from the browser, allow origin https://bevywidgets.com (for example Access-Control-Allow-Origin: https://bevywidgets.com), plus the methods and headers your API needs. Include preflight handling when requests are not simple GETs.
Framing allowlist If your platform is displayed in a nested iframe (common for Discourse, Khoros, and similar forums), allow both https://bevywidgets.com and your community’s Bevy domain in Content-Security-Policy: frame-ancestors. Do not set a restrictive X-Frame-Options value that blocks those hosts.
Transport Serve the embed and any APIs it calls over HTTPS.

Note: CORS headers and framing headers are different controls. Do not paste Access-Control-Allow-Origin into a Content-Security-Policy header.

Add custom widgets to chapter pages

With Available on = Chapter, add the widget from the chapter page builder component list. See About chapter page builder layouts, elements, and componentsand organizer Page widgets articles.