Show your event's speakers on your own website. The widget reads the speaker list 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 Speakers feature must be active. If Content > Speakers shows Speakers feature is not active, select Activate. While the feature is off, the widget shows Please turn on the “Speakers” feature in your Admin Panel to use this widget.
You need access to edit the HTML of the web page where the widget goes.

Where to find it

Content > Speakers in the admin panel. Select Embed Widget to open Embed speakers widget.

Embed the widget

Open Content > Speakers and select Embed Widget.
Change the options on the left. The code on the right updates as you type.
Select Preview to see the widget with your event's speakers. 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 speakers go.

Embed speakers widget window with the options form on the left and the code with Copy and Preview on the right

Classic speaker widget with Aino Aalto in Featured Speakers and speaker cards under All speakers

The code has this shape. joinCode is your event's join code 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": "speakers",
      "paginationPageSize": 12,
      "labels": {
        "featuredSpeakers": "Featured Speakers",
        "allSpeakers": "All speakers",
        "learnMore": "Learn more"
      }
    }
  </script>
</div>
<script async src="..."></script>
<!-- Inject Brella Widget Here End -->

Empty fields and Show featured speakers are left out of the code. Hide featured speakers adds "hideFeaturedSpeakersFromAllSpeakers": true.

Settings

Setting	What it does	Default
Show / hide featured speakers in main list	Hide featured speakers removes highlighted speakers from the All speakers section. They stay in the Featured Speakers section. Code: `hideFeaturedSpeakersFromAllSpeakers`	Show featured speakers
Label: Featured Speakers list	Heading of the featured section. Code: `labels.featuredSpeakers`	Featured Speakers
Label: All speakers list	Heading of the main list. Code: `labels.allSpeakers`	All speakers
Label: Learn more	Text of the link on each card. Code: `labels.learnMore`	Learn more
Pagination: Speakers shown per page	Cards per page in All speakers. Code: `paginationPageSize`	12
Speaker social media links	Icon links on a speaker's card and profile. Code: `socialMediaLinks`	none

Speaker social media links

Social media links live only in the widget code, not in the speaker profile. Add them in the Embed speakers widget window:

Under Speaker social media links, select Add new set. A section named Speaker 1 appears.
In Speaker, choose the speaker. The list shows the name and the speaker ID.
Enter the URLs in Facebook, Instagram, Youtube, TikTok, LinkedIn and X. Leave the rest empty.
Repeat Add new set for each speaker. To remove a set, select its delete icon and confirm with Delete.

One Speaker social media links set with the Speaker field and the six URL fields

To add links for many speakers, select Bulk import via CSV. The file needs the columns id, facebook, instagram, youtube, tiktok, linkedin, x. id is the speaker ID from a speaker export or from the Speaker list. The file content is lowercased, so use lowercase URLs or URLs that are not case-sensitive.

The widget adds https:// to a link that has no protocol. Links open in a new tab.

What visitors see

A search box with the text Search by name, title, company, session.... It matches first name, last name, company, job title and the titles of linked sessions, with fuzzy and prefix matching.
Featured Speakers: speakers with Highlighted ticked, sorted by Highlight order. The section is hidden when no speaker is highlighted or no highlighted speaker matches the search.
All speakers: all speakers in the order set by Display order in apps under Content > Speakers, with page controls.
Each card shows the photo, name, title, company, social media icons and the Learn more link. Selecting a card opens Speaker Profile with the bio under Introduction and the speaker's sessions sorted by start time. Each session shows date, time and duration in the event's time zone, location, title, subtitle and tags.

Example: change a label and accent color

In Embed speakers widget, enter Meet the speakers in Label: All speakers list.
Select Preview and check the heading.
Copy the updated code to your website.
Ask your website editor to add this CSS to the page stylesheet:

:root {
  --brella-color-primary-600: #2754c5 !important;
}

The All speakers heading reads Meet the speakers, and the widget accents use blue. Check the page on a narrow screen and open a speaker profile.

Give your website editor the copied widget code, the page address and your brand color. Keep advanced CSS changes in the website stylesheet.

Style the widget with CSS

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

Hide parts of the widget:

Search box: .brella-widget-speaker-toolbar { display: none; }
Page controls: .brella-pagination { display: none; }
Learn more link: .brella-speaker-card-learnmore-link { display: none; }
Featured section: .brella-widget-highlighted-speakers { display: none; }
All speakers section: .brella-widget-all-speakers { display: none; }
Section headings: .brella-widget-grid-title { display: none; }

If you hide All speakers, hide the search box as well. Search results outside the featured section have nowhere to appear.

Change colors and sizes by setting these variables on :root:

:root {
  --brella-color-primary-600: #00af66;
  --brella-widget-speaker-gradient-rgb: 65, 62, 167;
  --brella-widget-min-speaker-card-width: 320px;
  --brella-widget-min-speaker-narrow-card-width: 180px;
  --brella-widget-speaker-modal-width: 750px;
  --brella-widget-border-radius: 8px;
  --brella-widget-border-radius-small: 4px;
  --brella-widget-background: #FFFFFF;
  --brella-widget-secondary-background: #F9FAFB;
  --brella-widget-text-color: #000000;
  --brella-widget-text-muted-color: #667085;
  --brella-widget-border: 1px solid #EAECF0;
  --brella-widget-input-border: 1px solid #D0D5DD;
  --brella-widget-speaker-card-background: #FFFFFF;
  --brella-widget-speaker-tag-background: #EAECF0;
  --brella-widget-modal-background: #FFFFFF;
  --brella-widget-modal-header-background: #F9FAFB;
}

The values shown are the defaults. --brella-color-primary-600 colors the Learn more link and other accents. --brella-widget-speaker-gradient-rgb is the overlay on featured cards, as three RGB numbers.

Card photos are 150 px wide at most and cropped to fit. To change that, override .brella-speaker-card-image img, for example .brella-speaker-card-image img { max-width: none; width: 100%; }.

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>

The widget then renders again after each client-side navigation. Raise renderDelay (milliseconds) if your framework inserts the page content after the route change. You can also call window.brellaWidgetRender() yourself.

Limits

Social media links are stored in the widget code only. Paste the updated code each time you change them.
Changes in Embed speakers widget are not saved in Brella. Keep a copy of your code.

Troubleshooting

Please turn on the “Speakers” feature in your Admin Panel to use this widget
The Speakers feature is off. Open Content > Speakers and select Activate.

Join code is invalid.
The joinCode in the code does not match an event. Copy the code again from Embed speakers widget.

The widget looks different from the preview
Your website's styles apply to the widget. Inspect the element in the browser's developer tools and override the rule in your stylesheet. The widget's styles come from <style> elements the script injects, not from a separate CSS file.

Speaker widget