Articles in this section
Category / Section

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

Published:
5 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.

Creating the schedule widget

To set up the Schedule widget:

  1. In the event setup, go to Settings > Widgets tab. Choose the Schedule widget from the list.

    Screenshot 2024-08-22 at 5.17.58 PM

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

    Screenshot 2024-08-23 at 12.50.53 PM

  3. 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.
    Screenshot 2024-08-23 at 2.02.34 PM

  4. 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.
    Screenshot 2024-08-23 at 2.12.54 PM

  5. Any published recordings are also shown in the session details page for that session.
    Screenshot 2024-08-23 at 2.15.06 PM-min

  6. 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.
    Screenshot 2024-08-23 at 2.16.24 PM

    An example of the Speaker popup:
    Screenshot 2024-08-23 at 2.30.39 PM

    An example of the Sponsor popup:
    Screenshot 2024-08-23 at 2.30.57 PM

  7. 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.
    Screenshot 2024-08-23 at 2.32.34 PM

  8. 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 tabThis checkbox shows sessions in different tabs according to their day. Turn this off to show a continuous list of sessions.
      Screenshot 2024-08-23 at 2.36.31 PM

  9. 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.
Screenshot 2024-08-23 at 2.37.27 PM


Customize widget branding

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

  2. In the code text area on the right, you can enter your custom CSS code to customize the widget's appearance.
    Screenshot 2024-08-23 at 2.40.21 PM
  3. Click Save.



CSS classes for the widget

Currently, you can use the following classes to style the Schedule 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
eg. Type, Speakers,Sponsors,etc.

custom-schedule-filter-options-container

Main container for filter option and the dropdown option values.




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.

    Screenshot 2024-08-23 at 2.41.28 PM

  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