How to Customize the Schedule Widget
The Schedule widget lets you create a widget that displays your event schedule, customize it using CSS, and embed it on your website.
To set up the Schedule widget:
In the event setup, go to Settings > Widgets tab.
On the Schedule widget card, click the Use widget button. This creates the Schedule widget.
The session data added in the event setup is automatically synced to the widget. You can customize which sessions to display under the Sessions section in the sidebar and the session details in the widget under the Widget settings section.
- In the Session display preference section, choose the desired display format:
- Show sessions by date: only the sessions for the selected event day are shown, and the day can be selected using tabs.
- Show sessions of all dates: all sessions are shown sequentially, divided by dates.
- Scroll down to the Pagination section to choose how the speakers are displayed in the widget:
- Show all speakers: this option has no pagination, and all speakers are displayed in sequence simultaneously.
- Numbered pagination: the speakers are divided into pages. Enter the Speakers shown per page for Desktop and Mobile, respectively.
Customize widget branding
To customize your 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 to apply these changes to the widget.
CSS classes for the widget
Currently, you can use the following classes to style the Schedule widget:
Schedule CSS classes
| Class name | Description |
|---|---|
| custom-schedule-name | Name of the session. |
| custom-schedule-venue | Location or venue of the sessions. |
| custom-schedule-time | Time of the session. |
| custom-schedule-speaker-name | Name of the speaker of a session. |
| custom-schedule-speaker-title | The title of the speaker is shown in the schedule. |
| custom-schedule-description | Session description in the session list. |
| custom-schedule-background | The background of the entire component that surrounds the session list and filters. |
| custom-schedule-venue-icon | Icon of the location of the session. |
| custom-schedule-divider | The line that separates each session. |
| custom-schedule-date-selector | The tab that switches the dates. |
| custom-schedule-date-button-text | The text inside the date selector. |
| custom-schedule-search | The search icon button. |
| custom-schedule-filter | The filter icon appears in the mobile view next to the search icon. |
| custom-schedule-date-title | The schedule widget shows the day and time on each session row. |
| custom-schedule-speaker-avatar | The speaker image on each session row is either the speaker's profile pic or the avatar with initials placeholder. |
You can also contact our support team (support@zuddl.com) for further assistance.
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.
You can contact our support team (support@zuddl.com) for any further assistance.
Embed the schedule widget
To 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.
