Show your event's schedule on your own website. The widget reads the schedule from Brella, so changes in the admin panel appear on your site without new code.

Before you start

You need to be an organization admin or an event admin.
The schedule must be on. If Content > Schedule shows the start screen instead of tabs, turn the schedule on first.
You need access to edit the HTML of the web page where the widget goes.
The widget shows the schedule as visitors see it without signing in. See What visitors see before you publish it.

Where to find it

Content > Schedule > Widget in the admin panel. The options are on the left, the embed code with Copy and Preview on the right.

Embed the widget

Open Content > Schedule > Widget.
Change the options on the left. The code on the right updates as you change them.
Select Preview to see the widget with your event's sessions. Select outside the preview window to close it.
Select Copy. The message Copied to clipboard! confirms it.
Paste the code into the HTML of your web page where the schedule goes.

Widget tab with the options form on the left and the code with Copy and Preview on the right

Preview window showing the Timeline layout with date buttons and the Filters button

Classic schedule widget in List layout with two session cards and their times

Classic schedule widget in Linear layout with track columns, a time axis and session cards

The code has this shape. joinCode is your event's Join code (or URL slug for an invite-only event) and is filled in for you. The last script line loads the widget from Brella; copy it from the admin panel instead of typing it.

<!-- Inject Brella Widget Here -->
<div id="brella-widget" >
  <script type="text/props">
    {
      "joinCode": "youreventjoincode",
      "widgetType": "schedule-tracks",
      "layout": "timeline"
    }
  </script>
</div>
<script async src="..."></script>
<!-- Inject Brella Widget Here End -->

Options left at their default are not written into the code. Keep "widgetType": "schedule-tracks": without it the script shows an older schedule widget with a different layout.

If you change the event's Join code or URL slug in Details, copy the code again and replace it on your website.

Settings

Setting	What it does	Default
Layout	Timeline: tracks as rows, time from left to right. Linear: tracks as columns, time from top to bottom. List: one column of session cards grouped by start time. Code: `layout` = `timeline`, `linear` or `simplified`.	Timeline
Accent color	Color of buttons, the selected date, filter badges and other accents. With the Default style, session tiles keep their track colors in the Timeline and Linear layouts; cards in the List layout take the accent color. Code: `accentColor`.	Default (Brella green)
Theme	Light theme or Dark theme for backgrounds and text. Code: `darkMode`.	Light theme
Style	Default: track colors, plus the accent color if set. Unicolor: every track in the accent color; needs an Accent color. B&W: black, white and gray only. Code: `colorTheme` = `monochrome` or `grayscale`.	Default
Edges	Rounded or Sharp corners on tiles and buttons. Ignored in the List layout. Code: `sharpEdges`.	Rounded
Height	Full-height: the widget grows with its content. Fixed: the widget fills its container and scrolls inside it. The code gets `style="height: 600px"` on the `div`; change the value to the height you want. Code: `fixedHeight`.	Full-height
Pre-selected date	The event day shown when the page opens. Code: `preSelectedFilters.date`.	the first day with sessions that is today or later; after the event, the first day
Hide date buttons	Removes the day buttons at the top. Use it with Pre-selected date to show one day only. Code: `hideDateButtons`.	Off
Pre-selected tracks	Shows only the chosen tracks when the page opens. Visitors can still change the filter unless the filters button is hidden. Code: `preSelectedFilters.track_ids`.	none
Hide filters button	Removes the Filters button. Code: `hideFiltersButton`.	Off
Session cover images	Show adds the session's cover image to Session Details. Code: `showSessionCoverImage`.	Hide

Options you add to the code by hand

These options are not in the form. Add them inside the script type="text/props" block, each on its own line with a comma after the previous line.

Option	What it does
`"timeFormat": "24h"`	Shows times as `14:30` instead of `2:30 PM`.
`"simplifiedOnMobile": true`	Switches to the List layout on screens 768 px wide or narrower, whatever Layout is set to.
`"trackSize": 220`	Size of each track in the Timeline and Linear layouts, in pixels. Default 180 for Timeline, 400 for Linear.
`"simplifiedLayoutOptions": { "showFullSpeakerInfo": true }`	List layout: shows each speaker's photo, name, job title and company on the card instead of names only.
`"simplifiedLayoutOptions": { "showAllTab": true }`	List layout: adds an All day button that lists every day in one list, with a heading per day. The widget opens on All.

Example:

{
  "joinCode": "youreventjoincode",
  "widgetType": "schedule-tracks",
  "layout": "simplified",
  "timeFormat": "24h",
  "simplifiedLayoutOptions": { "showFullSpeakerInfo": true, "showAllTab": true }
}

What visitors see

The content sessions of every enabled track. Networking slots (1:1 meetings) are never shown. Tracks with no sessions on the selected day are hidden while Hide empty tracks is on in Content > Schedule > Settings.
Sessions restricted to specific lists are shown to every visitor. The widget has no sign-in, so list access can't be checked. Don't put confidential sessions in the schedule if the widget is public.
All times in the event's time zone, without a time zone label. Add a sentence next to the widget that names the time zone.
Day buttons at the top, one per day that has sessions: Day 1, Day 2 and so on, with the date on hover. If the days are not consecutive, the buttons show dates. When the buttons don't fit, a drop-down list replaces them. A one-day event shows the date instead, with Today, or Tomorrow, in front when it applies.
A Filters button that opens Filters with Track(s), Tag(s), Location, Session type (Regular, Virtual oriented), Speakers and any session custom field with Filterable on. Apply and Clear filters close the pop-up. A badge on the button counts the active filters.
Selecting a session opens Session Details: track, title, subtitle, Share, date and time, location, Part of: the parent session if any, tags, sponsor, description, session sponsors, Speakers, and the child sessions. More info on a track opens Track Details with the track's sponsor, description and Highlighted speakers.
Share copies the page URL with the session added, and shows Link copied to clipboard!. Opening that link scrolls to the widget and opens the session.
On screens 768 px wide or narrower, the track column of the Timeline layout is narrowed.
The List layout shows Load more (N remaining) when more sessions are available. Its cards are centered.

Session Details pop-up open on a session with speakers and tags

Open a day or a session from a link

?date=2027-12-01 in the page URL opens the widget on that day.
?showSession=<session ID> opens that session and scrolls to the widget. The session ID is the id column of a schedule export. Session links copied with Share use both parameters.

Style the widget with CSS

The widget's styles are injected by the script. Override them in your website's stylesheet.

Hide the Filters button: .brella-schedule-filters-button { display: none; }
Hide the day buttons: .brella-schedule-tracks-day-buttons, .brella-schedule-date-selector { display: none; }
Remove the outer spacing: .brella-widget-root { margin: 0; padding: 0; } (default 16 px each, 0 and 8 px on screens 768 px wide or narrower)
Change the accent when Accent color is Default: :root { --brella-color-primary-600: #0099ff; }. When an Accent color is chosen in the admin panel, the widget writes its own value for this variable; add !important to your rule to force it.
Other variables with their defaults: --brella-widget-background: #FFFFFF, --brella-widget-text-muted-color: #667085, --brella-widget-border-radius: 8px, --brella-widget-border-radius-small: 4px, --brella-widget-modal-width: 600px, --brella-widget-padding-base: 16px, --brella-widget-margin-base: 16px.

Most elements have a class that starts with brella-schedule-, for example brella-schedule-session-card, brella-schedule-session-title and brella-schedule-day. Inspect the element in your browser's developer tools to find the class.

Single-page websites

If your site renders pages with JavaScript and #brella-widget is not in the page when the script loads, add this line before the widget script:

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

See Embed Brella widgets on a single-page website.

Limits

You can put several Brella widgets on one page. Give each widget its own div with the ID brella-widget and its own settings block. A session deep link scrolls to the first matching container, so put the schedule widget first when you use those links.
Changes in the Widget tab are not saved in Brella. Keep a copy of your code.
The widget shows sessions only. Attendees bookmark, rate and join sessions in the app, not in the widget.
Visitors' browsers load the widget script and the schedule from Brella. Your website must not block requests to Brella.

Troubleshooting

Error: Couldn't fetch schedule data, please check the join code
The joinCode in the code does not match the event's Join code or URL slug in Details, or the request to Brella's API failed. Copy the code again from Content > Schedule > Widget, then see Troubleshoot the schedule widget.

The widget looks different from the preview
Your website's styles apply to the widget, or the code is missing "widgetType": "schedule-tracks". Compare the pasted code with the admin panel, then see Troubleshoot the schedule widget.

Hmm.. nothing found
No session matches the selected day and filters. Clear filters and reload resets the filters. Check that the tracks are enabled and the sessions are on content tracks.

An empty canvas is full.
The selected day has no sessions. Choose another day, or set Pre-selected date to a day with sessions.

Schedule widget