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">
{
  "joinCode": "EVENT JOINCODE HERE",
  "stickyFilter" : "true"
  }
</script>

👉 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.

👉 If you want to remove the Day's filter section, you need to add this to the widget code (comma separated).

.schedule-filters-filter-group:first-child {
    display: none;
}

Last updated in April 2022.

Written by Wendy Rendón

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

👇