How to Customize the Speaker Widget
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:
- In the event setup, go to Settings > Widgets tab.
- On the Speaker widget card, click the Use widget button. This creates the Speaker widget.
- 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.
- 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 speakers and displaying the speaker details, 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 Speaker widget:
Speaker CSS classes
| Class name | Description |
|---|---|
| custom-speaker-list-image | The speaker's image is shown in the list. This is applied on the <img /> tag. |
| custom-speaker-list-name | Name of the speaker in the list. |
| custom-speaker-list-title | Title and Organization of the speaker in the list. |
| custom-speaker-list-background | The background color of the entire speaker list component. |
| custom-speaker-popup-image | The 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-name | The speaker's name is in the popup. When you click on an individual speaker item, it opens a model. |
| custom-speaker-popup-title | The speaker's title is in the popup. When you click on an individual speaker item, it opens a model. |
| custom-speaker-popup-description | Speaker's description in the popup: when you click on an individual speaker item, it opens a model. |
| custom-speaker-popup-social-links | The speaker's social links are in the popup; when you click on an individual speaker item, it opens a model. |
| custom-speaker-popup-background | Background 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 <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 speaker widget
To embed the speaker widget,
- Click on the </> Get embeddable code icon to view the embeddable link.
Click on the Copy button.
Embed code- Paste the code in your HTML webpage inside the <body> tag.
- The speaker widget will be visible to visitors viewing the website. Any updates to your speaker's list will automatically be reflected in the speaker's widget.
