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

Last updated: August 1, 2025



The Speaker widget lets you create a widget that displays your event speakers, customize it using CSS, and embed it in your website.
To set up the Speaker widget:

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

    Screenshot 2023-11-09 at 4.32.02 PM.png
    The widgets page

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

    Click Use widget

  3. The speaker data added in the event setup is automatically synced to the widget. You can customize which speakers to display under the Speakers section in the sidebar and the speaker details in the widget under the Widget settings section.

    Screenshot 2023-11-10 at 6.07.21 PM.png
    Customize the content of the widget

Customize widget branding

To customize your branding,

  1. After customizing the speakers and displaying the speaker details, click the Custom CSS tab in the sidebar.

    Screenshot 2023-11-10 at 6.09.04 PM.png
    The Custom CSS tab

  2. In the code text area on the right, you can enter your custom CSS code to customize the widget's appearance.

    Screenshot 2023-11-10 at 7.08.26 PM 1.png
    Enter your CSS code here
  3. Click Save to apply these changes to the widget.

CSS classes for the widget

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

Speaker CSS classes

Class nameDescription
custom-speaker-list-imageThe speaker's image is shown in the list. This is applied on the
tag.
custom-speaker-list-nameName of the speaker in the list.
custom-speaker-list-titleTitle and Organization of the speaker in the list.
custom-speaker-list-backgroundThe background color of the entire speaker list component.
custom-speaker-popup-imageThe speaker's image in the popup is what you see when you click on an individual speaker item, which opens a model.
custom-speaker-popup-nameThe speaker's name is in the popup. When you click on an individual speaker item, it opens a model.
custom-speaker-popup-titleThe speaker's title is in the popup. When you click on an individual speaker item, it opens a model.
custom-speaker-popup-descriptionSpeaker's description in the popup: when you click on an individual speaker item, it opens a model.
custom-speaker-popup-social-linksThe speaker's social links are in the popup; when you click on an individual speaker item, it opens a model.
custom-speaker-popup-backgroundBackground in the popup: when you click on an individual speaker item, it opens a model.

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