Learn how to customize the speaker widget styling through CSS.
To be covered
- Get started with the speaker widget.
- Basic customization using optional parameters.
- More customization options using CSS (with examples)
- More information
Get started with the speaker widget
-
First, make sure that you have activated Brella’s "speakers" feature.
- Navigate to your event's Admin Panel and go to the 'People' tab.
- Click on the 'Speakers' section of the tab.
- Toggle the Speakers feature on.
- Add some speaker profiles (test / mock speakers are fine!). This will allow you to actually see the widget update as you customize and style it.
-
Once the "Speakers" feature is active, click on the "Embed widget" button in the speakers view, and copy the code shown in the modal that opens.
👉The copied code will look like this (the only difference will be the "joinCode", which will be your event's URL slug.
<div id="brella-widget">
<script type="text/props">
{
"joinCode": "YOUREVENTJOINCODE",
"widgetType": "speakers",
}
</script>
</div>
<script async src="https://widget.brella.io">
</script>
<!-- Inject Brella Widget Here End -->
-
Add this code to a page on your website and the speaker widget will be visible to visitors. Any updates made to your speakers list in Brella will automatically be reflected in the speakers widget.
👇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.
Basic customization using optional parameters
You can make some basic changes to how the Brella speaker widget looks on your webpage using our built-in customization parameters
Pagination Size
👉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}
<!-- Inject Brella Widget Here -->
<div id="brella-widget">
<script type="text/props">
{
"joinCode": "youreventjoincode",
"widgetType": "speakers",
"paginationPageSize": 12
}
</script>
</div>
<script async src="https://widget.brella.io">
</script>
<!-- Inject Brella Widget Here End -->
👇Result
Hide “Featured Speakers” from All Speakers
👉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
<!-- Inject Brella Widget Here -->
<div id="brella-widget">
<script type="text/props">
{
"joinCode": "youreventjoincode",
"widgetType": "speakers",
"hideFeaturedSpeakersFromAllSpeakers": true,
"paginationPageSize": 12
}
</script>
</div>
<script async src="https://widget.brella.io">
</script>
<!-- Inject Brella Widget Here End -->
👇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.
Change Labels & Button Text
👉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"
<!-- Inject Brella Widget Here -->
<div id="brella-widget">
<script type="text/props">
{
"joinCode": "youreventjoincode",
"widgetType": "speakers",
"hideFeaturedSpeakersFromAllSpeakers": true,
"paginationPageSize": 12,
"labels": {
"featuredSpeakers": "The speakers of the year",
"allSpeakers": "Other speakers",
"learnMore": "See more"
}
}
</script>
</div>
<script async src="https://widget.brella.io">
</script>
<!-- Inject Brella Widget Here End -->
👇Result
More customization options using CSS (with examples)
👉Hiding specific sections / making the widget modular
In some cases, you may need to only show “Featured Speakers”, or perhaps omit that all together. Or, perhaps you want to hide the search bar. 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:
- To hide the search-bar, add:
.brella-widget-speaker-toolbar { display:none; }
- To hide the “Learn more” button, add:
.brella-speaker-card-learnmore-link { display: none; }
- To hide the “Featured Speakers” section, add:
.brella-widget-highlighted-speakers { display: none; }
- To hide the “All Speakers” section, add:
.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, “Learn more” button and the “Featured Speakers” section.
<style>
.brella-widget-speaker-toolbar { display:none; }
.brella-speaker-card-learnmore-link { display: none; }
.brella-widget-highlighted-speakers { display: none; }
</style>
👇Results
👉Additional CSS Classes for Visual Styling
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.
<!-- Primary colors -->
<style>
:root {
--brella-color-primary-600: tomato;
--brella-widget-speaker-gradient-rgb: 75, 30, 15;
}
</style>
<!-- Card Sizes -->
<style>
:root {
--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;
}
</style>
👉Dark Theme / Brand
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.
<!-- Dark mode -->
<style>
:root {
--brella-widget-background: #333;
--brella-widget-secondary-background: #444;
--brella-widget-text-color: white;
--brella-widget-speaker-card-background: #222;
--brella-widget-border: 1px solid #111;
--brella-widget-input-border: 1px solid #111;
--brella-widget-modal-background: #333;
--brella-widget-modal-header-background: #222;
--brella-widget-text-muted-color: #999;
--brella-widget-speaker-tag-background: #222;
}
</style>
👇Result
More information
👉How the search works
The widget’s search function searches the first name, last name, company name, job title and the session title field for each speaker.
By default, the search will display results in both the featured and all speakers sections.
👉Troubleshooting style errors
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.
Last updated in February 2023
Written by Yusra Mohideen
If you didn't find an answer to your questions, please get in touch with the Support Team here.