Widget: How to customize the schedule widget

The widget’s styling is customizable through CSS.

You can customize the way the Brella widget looks on your webpage using CSS:

πŸ‘‰To remove the white space in the agenda widget, from the content session to the filters:
#brella-widget {
  max-width: 820px;
  margin: 0 auto;
#brella-widget .schedule-slot-name {
   font-size: large;
πŸ‘‰To make the filters 'sticky' so when attendees will scroll the agenda, add this:
<script type="text/props">
  "stickyFilter" : "true"

πŸ‘‰if you want the sticky filter, you need to add this to the widget code (comma separated).

"stickyFilter" : "true"

⚑ NOTE: If you have some sticky elements themselves, the filter might get stuck underneath them and become unusable. Please check the edits you make to make sure they work.


Last updated in March 2021. 

Written by Wendy RendΓ³n



If you didn’t find an answer to your questions, please contact the Support Team here.