Fixes for a schedule widget that does not appear, shows an error or looks wrong on your website. Start by comparing the code on your page with the code in Content > Schedule > Widget: most problems come from an edited or outdated code.
Before you start
Open Content > Schedule > Widget and select Preview. Check that your intended sessions and dates appear.
Check that the sessions are on enabled tracks and that you are viewing the right event and day.
Use Copy to get fresh widget code. If you maintain the website, replace the old code with the complete new code and reload the page.
If someone else maintains the site, send them the page URL, the fresh code, a screenshot or exact error, and whether Preview works.
Keep a copy of your current website code before replacing it.
Give these details to your website developer
Include the event's time zone and the device/browser where the problem occurs. Say whether the widget fails on a direct page load, after navigating from another page, or both.
The remaining sections are for your developer. They can compare the page code, inspect the browser's console and network requests, and check the website's content security policy or styles. Errors from the widget start with Error:.
Nothing appears
The page is blank where the widget goes, with no error
The widget
scriptline is missing or was edited. Copy the whole code again from Content > Schedule > Widget and replace it on the page. The code has three parts: thedivwith the IDbrella-widget, thescript type="text/props"block inside it, and thescript async src="..."line after it.The element
brella-widgetis not in the page when the script runs. This is the case on single-page websites and on themes that load page content with JavaScript (for example Squarespace with Ajax loading, Webflow, Turbolinks). Add this line before the widgetscriptline:
<script>window.brellaWidgetOptions = { spaMode: true, renderDelay: 0 }</script>
The widget then renders again after each page change. Raise renderDelay (milliseconds) if your theme inserts the content after the navigation. You can also call window.brellaWidgetRender() from your own code once the content is in the page. See Embed Brella widgets on a single-page website. The older loader snippets that created the script element by hand are not needed.
Your site's Content Security Policy blocks the widget. Add
widget.brella.iotoscript-src, and*.brella.iotoconnect-srcandimg-src. The widget loads the schedule from Brella's API and sponsor logos, speaker photos and cover images from Brella's image hosts, all underbrella.io.
Error: Couldn't fetch schedule data, please check the join code
The request for the schedule failed. Two causes:
The
joinCodein the code does not match the event. The value is the event's Join code, or URL slug for invite-only events, from Details. If you changed it after embedding, copy the code again.The request to Brella's API was blocked or timed out. Check the network tab for a failed request to
/public/events/<join code>/schedule. A Content Security Policy, an ad blocker or a corporate proxy are the usual causes. Brella's public API accepts requests from any website, so no domain registration is needed on Brella's side.
The widget shows the wrong thing
Hmm.. nothing found
No session matches the selected day and filters. Select Clear filters and reload. If the widget stays empty: the sessions are on tracks that are disabled in Content > Schedule > Tracks, or the schedule has only networking slots. The widget shows content sessions of enabled tracks only.
An empty canvas is full.
The selected day has no sessions. By default the widget opens on the first day with sessions that is today or later, and on the first day with sessions once the event is over. A Pre-selected date in Content > Schedule > Widget, or a ?date= parameter in the page URL, overrides this; set it to a day with sessions.
Sessions restricted to lists are visible to everyone
This is how the widget works. It has no sign-in, so list access can't be checked. Keep confidential sessions out of the schedule, or don't embed the widget publicly. See Restrict a session to specific registrant lists.
Times are off by some hours
The widget shows times in the event's time zone, set in Details, without a time zone label. Add a sentence next to the widget that names the time zone.
The layout is different from the preview
The code is missing "widgetType": "schedule-tracks". Without it the script shows an older schedule widget. Copy the code again from the admin panel.
The widget looks wrong
Fonts, colors or spacing differ from the preview
Your page's CSS applies to the widget. Find the rule in the developer tools, then scope it so it does not reach the widget:
/* a rule like this */
.my-page div { background: red }
/* scoped more tightly */
.my-page .my-red-element > div { background: red }
If you can't change the rule, place the widget in a page of its own and embed that page in an iframe:
Create an empty page on your site that contains only the code from Content > Schedule > Widget.
Where the schedule goes, add an
iframethat points to that page, for example<iframe src="https://www.example.com/schedule.html" width="100%" height="600" style="border: 0; display: block;"></iframe>.
Set Height to Fixed in the admin panel so the widget scrolls inside the frame, or make the frame tall enough for the schedule.
The widget has a white frame and spacing around it
The container .brella-widget-root has a 16 px margin, 16 px padding, a white background and rounded corners. On screens 768 px wide or narrower the margin is 0 and the padding 8 px. Override them:
.brella-widget-root { margin: 0; padding: 0; background: transparent; border-radius: 0; }
The schedule is narrow
In the List layout the cards are at most 600 px wide and centered; that is by design. Choose Timeline or Linear for a full-width schedule.
The accent color from my CSS has no effect
An Accent color chosen in the admin panel is written into the widget's own styles and wins. Set Accent color back to Default, or add !important to your rule for --brella-color-primary-600.
The Timeline layout is hard to use on phones
Add "simplifiedOnMobile": true to the code. On screens 768 px wide or narrower the widget then switches to the List layout.