How to Customize the Schedule Widget for a Hybrid Event in Zuddl
Creating the schedule widget
To set up the Schedule widget:
In the event setup, go to Settings > Widgets tab. Choose the Schedule widget from the list.
The session data added in the event setup is automatically synced to the widget. You can customize which sessions to display in the widget under the Sessions section in the sidebar.
The Widget settings section lets you customize the details shown for each session in the widget. Session time and Session name are mandatory, the other details can be hidden as required.
The Session details page (enabled by default) shows a separate page for each session, which can be accessed by clicking on the session in the list.
Any published recordings are also shown in the session details page for that session.
There are two popups available in the schedule widget: the Speaker popup and the Sponsor popup, which show the details of speakers or sponsors in a popup when you click on a speaker or a sponsor respectively. Both can be individually enabled or disabled.
For speakers, you can also choose to show or hide the sessions that the speaker is a part of using the Show sessions the speaker is part of checkbox.
An example of the Speaker popup:
An example of the Sponsor popup:The Schedule filters (enabled by default) let you select what filters to show in the left sidebar for the widget. These filters help attendees to sort through the sessions.
You can also select your preferred Session display preference:
Show the event date tabs: This toggle shows sessions date-wise under different tab.
Show sessions of each day in a separate tab: This checkbox shows sessions in different tabs according to their day. Turn this off to show a continuous list of sessions.
- Choose a pagination type for the widget:
- Show all sessions (no pagination): This shows all sessions in a continuous scroll
- Numbered pagination: This shows a fixed number of sessions per page, and you can customize the number of Sessions shown per page separately for desktop and mobile.
- Use show more button: This allows attendees to click on a button to show all sessions.
- Sessions shown per page (Mobile/Desktop): The number of sessions shown per view. Defaults to 6. Enter a specific number for Mobile or Desktop.
Customize widget branding
After customizing the sessions and details to display, click the Custom CSS tab in the sidebar.
- In the code text area on the right, you can enter your custom CSS code to customize the widget's appearance.
- Click Save.
CSS classes for the widget
Class name | Description |
|---|---|
custom-schedule-time-zone | the individual session's timezone in the search list and individual page |
custom-schedule-session-format | the individual session's session format in the search list and individual page |
custom-schedule-tag | the individual session's tag in the search list and individual page |
custom-schedule-file | the individual session's file in the individual page |
custom-schedule-sponsor-name | the individual sponsor name in sponsor list |
custom-schedule-sponsor-title | the individual sponsor title in sponsor list |
custom-schedule-date-dropdown-title | the date dropdown title('Select date to view sessions') shown on top |
custom-schedule-watch-recording-button | Watch recording button shown for completed session and published recordings |
custom-schedule-sponsor-avatar | the individual sponsor avatar in sponsor list |
custom-schedule-see-more-pagination | See more pagination shown below when pagination settings is set to SHOW_MORE. |
custom-schedule-filter-options | Filter options in filter |
custom-schedule-filter-title | Filter title in filters |
custom-schedule-filter-options-container | Main container for filter option and the dropdown option values. |
Best practices
- You cannot inspect the page and use any classes given as it may not give you the intended results. Use only Zuddl custom classes listed for branding customizations.
- Add "!important" on properties that aren't behaving as expected, which may be because of any existing class. This tag will give precedence to the CSS.
- Do not use <style> tags in the Custom CSS text area.
- The feature only supports plain CSS and not CSS nesting.
Embed the schedule widget
- Click on the </> Get embeddable code icon to view the embeddable link.
Click on the Copy button.
- Paste the code in your HTML webpage inside the <body> tag.
- The schedule widget will be visible to visitors viewing the website. Any updates to your schedule will automatically be reflected in the schedule widget.
