You can customize the way the Brella widget looks on your webpage by choosing your preferences on the admin panel.
Customizations available via the Admin Panel
There are many customization options made available to you with a click of a button as well as manual CSS code editing.
Layout
You can select the layout you want to display in the widget. In the same way as the web app view, you are given two layouts as 'Timeline and Linear' to select from.
Timeline View
Linear View
Simplified View
Accent color
There are 14 accent colors given here in the dropdown for you to select a color to suit your event web page. Accent color defines the color of the buttons available on the schedule.
Theme
From here you can select whether you want to show the schedule in dark mode or light mode.
Dark mode
Light mode
Style
There are three styles as 'Default, Unicolor, and B&W (Black and White) to pick from. You can see the examples as follows:
Default
This option will show the schedule by default using the track colors you have assigned on the admin panel.
Unicolor
This option will color all the tracks using the default 'Accent color' or the color you have selected.
Black and white
In this option, there will be no colors used to display the schedule. All the content will be visible only in Black and White.
Edges
You can also select whether you want to have Sharp edges on the schedule tiles or Curved edges.
Curved edges Sharp edges
Height
There are two options given here as well as 'Full height or Fixed'. If selected Full Height, the widget will take the full height on your web page depending on your content and configuration. If selected Fixed, the schedule will fit with scroll bars into a container set by your web developer.
Once the customizations are set as per your preference, you can click on the top right-hand corner 'preview' button to view how the widget will look on your website. Once finalized, click on the 'copy' button to copy the widget CSS code to be added to your website.
The session details and filters will open as 'pop-ups' instead of separate drawers unlike in the web app.
Customizations available via CSS changes for the new widget
Remove the filter option from the schedule view by editing the CSS code
<style>
.brella-schedule-filters-button {
display: none;
}
</style>
👇Result
Manually set the hight of each track
<!-- Inject Brella Widget Here -->
<div id="brella-widget">
<script type="text/props">
{
"joinCode": "nicehashx2024",
"widgetType": "schedule-tracks",
"layout": "timeline",
"trackSize": 220
}
</script>
</div>
<script async src="https://widget.brella.io"></script>
<!-- Inject Brella Widget Here End -->
Change the primary color
<style>
:root {
--brella-color-ticketing-primary-600: #09f;
}
</style>
Customizations available via CSS changes for the old widget
To use the old widget (
widgetType: "schedule")
<html>
<!-- Inject Brella Widget Here -->
<div id="brella-widget" >
<script type="text/props">
{
"joinCode": "nicehashx2024",
"widgetType": "schedule"
}
</script>
</div>
<script async src="https://widget.brella.io"></script>
<!-- Inject Brella Widget Here End -->
</html>
To apply filtering by track
<html>
<!-- Inject Brella Widget Here -->
<div id="brella-widget" >
<script type="text/props">
{
"joinCode": "nicehashx2024",
"widgetType": "schedule",
"developmentMode": true,
"preselectedTracks": ["24811"]
}
</script>
</div>
<script async src="https://widget.brella.io"></script>
<!-- Inject Brella Widget Here End -->
</html>
To apply filtering by day
<html>
<!-- Inject Brella Widget Here -->
<div id="brella-widget" >
<script type="text/props">
{
"joinCode": "nicehashx2024",
"widgetType": "schedule",
"developmentMode": true,
"preselectedDays": ["2024-05-20"],
}
</script>
</div>
<script async src="https://widget.brella.io"></script>
<!-- Inject Brella Widget Here End -->
</html>
To show speaker images and company data
<!-- Inject Brella Widget Here -->
<div id="brella-widget" >
<script type="text/props">
{
"joinCode": "Slash2025",
"widgetType": "schedule-tracks",
"layout": "simplified",
"simplifiedLayoutOptions": {
"showFullSpeakerInfo": true
}
}
</script>
</div>
<script async src="https://widget.brella.io"></script>
<!-- Inject Brella Widget Here End -->
To show all sessions in one list
<!-- Inject Brella Widget Here -->
<div id="brella-widget" >
<script type="text/props">
{
"joinCode": "Slash2025",
"widgetType": "schedule-tracks",
"layout": "simplified",
"simplifiedLayoutOptions": {
"showAllTab": true
}
}
</script>
</div>
<script async src="https://widget.brella.io"></script>
<!-- Inject Brella Widget Here End -->
