The speaker widget function which shows all of the speakers who are available in any event can be customized according to the event organizer's requirements by applying a CSS style function.

👉The copied code will look like this (the only difference will be the "join code", which will be your event's URL slug.

👇Result

Now that you have the basic speaker widget working, read on to learn about customizing the look, functionality, and feel of the widget using our optional parameters and CSS!

If you need additional help, please reach out to our technical support team or your customer success manager.

You can make some basic changes to how the Brella speaker widget looks on your webpage using our built-in customization parameters.

👉You can control how many speakers are shown on one page of the “All Speakers” section. Simply add the following parameter to the code:

"paginationPageSize": {number}

👇Result

👉You can exclude “Featured Speakers” from being searched when someone enters a query in the search bar — this is useful if you want to avoid repetition, or if you rename and use the “All Speakers” section as a secondary category. Simply add the following parameter to the code:

"hideFeaturedSpeakersFromAllSpeakers": true

👇Result

If, "hideFeaturedSpeakersFromAllSpeakers": false

You will see the results repeated in both featured speakers and all speakers.

If, "hideFeaturedSpeakersFromAllSpeakers": true

You will see the results only in featured speakers.

👉You can easily change the main labels and button text using the labels parameter. You can change all or just a few of the above options.

"featuredSpeakers": "Custom Featured Speakers Label Text Here",

"allSpeakers": "Custom All Speakers Label Text Here",

"learnMore": "Custom Button Text Here"

👇Result

In some cases, you may need to only show “Featured Speakers”, or perhaps omit that altogether, or perhaps you want to hide the search bar, etc. These customizations are possible through the addition of custom CSS.

Simply add the following CSS classes to your website’s styles, so they load on the page which contains the widget:

.brella-widget-speaker-toolbar { display:none; }

.brella-pagination { display: none; }

.brella-speaker-card-learnmore-link { display: none; }

.brella-widget-highlighted-speakers { display: none; }

.brella-widget-all-speakers { display: none; }

You can mix and match these as needed. However, if you are hiding the “All Speakers” section, we recommend also hiding the search bar — as it would be non-functional (since all of the search results are displayed in the “All Speakers” section.

The following code would hide the search bar, the “Learn more” button, and the “Featured Speakers” section.

👇Results

Use the following CSS classes to change specific aspects of the widget’s look and feel — from card sizes to border-radius to the primary and secondary colors. Add these to your website’s CSS styles.

You can use the following styles to match the widget with darker themes. Edit the color of each CSS property to match your brand and theme. Add these to your website’s CSS styles.

👇Result

The widget’s search function searches the first name, last name, company name, job title, and session title field for each speaker.

By default, the search will display results in both the featured and all speakers sections.

In some cases, your widget may have odd-looking styles and other visual issues. Most often, these are caused by conflicting styles from your CMS or website. In particular, you may encounter this when using CMS’ like WordPress or Squarespace.

The best way to troubleshoot these issues is to use Google Chrome’s dev tools/inspector. Hover over the malfunctioning element (eg: a card, button, etc. in the widget), right-click there, and click on “Inspect” to open the inspector.

Then, navigate to the styles tab and see which styles are causing issues. Chrome’s inspector will also show where each style is coming from (outlined in red below). In addition to our schedule-widget.css, you may see styles applied from your website.

Identify which CSS properties are causing issues and override them by adding appropriate properties and values to the class assigned to the malfunctioning element.

Ideally, all images in Brella should be of the same aspect ratio (either 1:1 or, if your speakers have longer names, which go over to two lines in your widget, 2:3 — whether a speaker name spans a single or double line will depend on any CSS customizations you have made, such as card width).

Should the source speaker profile images be of varying aspect ratios (i.e. some might be 1:1, others 2:3, others 16:9 etc.), the cards will not be a consistent size.

If, however, it is not logistically possible to source consistently sized images, you can use CSS to make them consistent. Just add the following code to your website’s CSS styles.

If your speaker names are long and go over to two lines (this will make the images + card have a 225px height, creating a 2:3 / square aspect ratio), add the following code:

If your speaker names span a single line (this will make the images + card have a 150px height, creating a 1:1 / square aspect ratio), add the following code :