Articles in this section
Category / Section

How to Customize the Schedule Widget for a Virtual Event in Zuddl

3 mins read
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:

  1. In the event setup, go to Settings > Widgets tab.

    The widgets page

  2. On the Schedule widget card, click the Use widget button. This creates the Schedule widget.

    Use schedule widget

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

  4. You can also select your preferred session display format:

    • Show sessions by date: This shows sessions date-wise under the date tab.

    • Show sessions of all datesThis shows all sessions (completed or ongoing) on a single list

  5. Choose a pagination type for the widget
    • Show all sessions (no pagination): This shows all sessions in a continuous scroll
    • 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

To customize your branding,
  1. After customizing the sessions and details to display, click the Custom CSS tab in the sidebar.

    You can view the event type — Virtual, In-person, or Hybrid and the stage name. 
  2. In the code text area on the right, you can enter your custom CSS code to customize the widget's appearance.

  3. Click Save.

CSS classes for the widget

Currently, you can use the following classes to style the Schedule widget:

Schedule CSS classes

Class nameDescription
custom-schedule-nameName of the session.
custom-schedule-venueLocation or venue of the sessions.
custom-schedule-timeTime of the session.
custom-schedule-speaker-nameName of the speaker of a session.
custom-schedule-speaker-titleThe title of the speaker is shown in the schedule.
custom-schedule-descriptionSession description in the session list.
custom-schedule-backgroundThe background of the entire component that surrounds the session list and filters.
custom-schedule-venue-iconIcon of the location of the session.
custom-schedule-dividerThe line that separates each session.
custom-schedule-date-selectorThe tab that switches the dates.
custom-schedule-date-button-textThe text inside the date selector.
custom-schedule-searchThe search icon button.
custom-schedule-filterThe filter icon appears in the mobile view next to the search icon.
custom-schedule-date-titleThe schedule widget shows the day and time on each session row.
custom-schedule-speaker-avatarThe 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 ( 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 ( for any further assistance.

Embed the schedule widget

To embed the schedule widget,
  1. Click on the </> Get embeddable code icon to view the embeddable link.
  2. Click on the Copy button.

  3. Paste the code in your HTML webpage inside the <body> tag.
  4. The schedule widget will be visible to visitors viewing the website. Any updates to your schedule will automatically be reflected in the schedule widget.
Was this article useful?
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied