This guide is for your website developer. Add the widget code to the site and check that it loads where visitors expect it. Organizers can use the handoff steps below.

Note: Website widgets V2 are scheduled to launch on 1 November 2026. These steps apply once V2 is available in your event.

For the organizer

Build your widget under Widgets in the admin panel. See Build and share a website widget (V2).
Select Share with developer and give the link to your website developer.
Tell them which website page should contain the widget and where it should appear.
Ask them to check desktop, phone and any page navigation that happens without a reload.
Review the installed result before sharing the website with attendees.

The developer link carries the selected widget settings. If you change them, share a new link or copy new code for the website update.

For the website developer

You need access to add HTML and JavaScript to the intended page. A plain text or rich-text block that removes scripts will not install the widget.

Open the shared link and check Preview.
Under Embed code, select Copy embed code.
Paste the widget's complete <div> where it should appear. Keep its nested props script.
Place the loader script after the widget element. Load it once per page.
Save the page, reload it and confirm the correct event content appears.
Check a narrow phone layout and open a detail dialog. The widget fills its containing element's width.

Schedule widget developer page showing Embed code, the schedule Preview, and Setup instructions with the SPA-mode example

Embed structure

Prefer the generated code. This minimal schedule example shows the structure. Replace both placeholder values with the event slug and script URL from that code before using it.

<div id="brella-widget">
  <script type="text/props">
    {
      "eventSlug": "EVENT_SLUG_FROM_GENERATED_CODE",
      "widgetType": "schedule"
    }
  </script>
</div>
<script async src="WIDGET_SCRIPT_URL_FROM_GENERATED_CODE"></script>

Keep the props as one JSON object: use double quotes, lowercase true/false, no comments and no trailing commas. The loader also accepts a nested application/json props script.

Use Options on the shared developer page for the options supported by the selected widget. Avoid copying options from a different widget type.

Several widgets on one page

Keep each generated widget container and its own props script. Place all of them before one copy of the loader. Keep the generated id="brella-widget": the loader finds all matching containers.

For example, you can place a Schedule widget above a Speakers widget. Each has its own widgetType and settings; the page loads the widget script once.

For ticket shops, keep the original configuration available when buyers return from payment. The return flow identifies the shop from its props, so changing them during that flow can prevent the order dialog from opening.

Sites that change pages without reloading

On a single-page application, the widget element may appear after the loader has run. Choose one of these approaches with the site developer.

Enable automatic rendering after navigation. Add this before the loader:

<script>
  window.brellaWidgetOptions = { spaMode: true, renderDelay: 0 };
</script>

SPA mode listens for history and hash navigation. If the framework inserts the widget later, set renderDelay to the number of milliseconds needed for that page's content to appear. Verify navigation into and away from the page.

Render after the page is ready. Call this after inserting the widget container and its JSON props, once the loader is available:

if (typeof window.brellaWidgetRender === "function") {
  window.brellaWidgetRender();
}

For late insertion that is unrelated to navigation, use the manual call. Include that call in the site's page lifecycle; the guard alone does not retry when the loader arrives later.

Check the result

The widget shows the intended event, without a setup or props error.
The layout fits the website column and a phone screen.
Detail dialogs open, scroll and close correctly.
Returning to the page through site navigation restores the widget.
The page loads only one widget script.

The shared Ticketing preview cannot place orders. Check the installed shop's checkout and return flow before promoting ticket sales.

Troubleshooting

The embed appears as text or disappears after saving
Check that the website field permits HTML and scripts. Ask the site's developer which custom-code area to use.

The widget is empty after navigation
Check that the element exists before rendering. Use SPA mode or call the renderer after the page inserts the element.

The props are not valid JSON
Copy the generated props again. Check quotes, commas and braces before changing individual options.

The reference could not be loaded
The shared page's reference and the embed are separate requests. Keep the generated embed and retry the reference later. If the widget itself fails, inspect the loader and event-data requests with your developer.

Install website widgets V2