Articles in this section
Category / Section

How to Customize Schedule Widget for a Hybrid Event in Zuddl

Published:
12 mins read
Updated:
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.

When someone clicks on the speaker inside the Schedule widget, the speaker profile is shown as popup with the list of sessions that the speaker is speaking at.

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:


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.
speaker-details-modal-backgroundThe background for speaker details modal
speaker-details-modal-speaker-avatar
The avatar on speaker details modal
speaker-details-modal-speaker-name

The speaker name on speaker details modal

speaker-details-modal-speaker-title
The speaker title with company's name on speaker details modal
speaker-details-modal-speaker-bio-with-about-title

The speaker's bio and About title on the modal

speaker-details-modal-speaker-social-icons
The speaker's social profile icons on the modal
speaker-details-modal-speaker-and-sessions-divider

The divider between speaker details and it's schedule details on the modal

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,
  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?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied