How to Customize Branding in the Webinar Embed in Zuddl

Last updated: September 8, 2026

What This Does

You can add custom CSS styles to the embedded webinar using the Custom CSS option on the Embed page, and customize the embed as per your company’s branding guidelines. Each state that the embed can render — before the webinar, while it is live, and after it has ended — can be previewed and styled from the same screen.

Note: This article is intended to be used by CSS developers as it contains CSS concepts and terminologies.

Before You Begin

You need organizer access to the webinar in Zuddl.
The webinar embed must be available on the Webinar Details > Embed page.
You need working knowledge of plain CSS.

Steps

Go to Webinar Details > Embed and turn on the Embed webinar toggle.
Click Set custom CSS. This redirects you to the Custom CSS page, where you can add your CSS code. A two-pane window shows a preview area on the left and a CSS code area on the right.
Select the desired state from the Preview dropdown. The preview reflects this webinar’s own configuration, including whether a cover image has been uploaded.
On the code text area on the right, add your CSS styles, then click Save.

What Happens Next

Your styles are saved against this webinar and applied inside the embed. You do not need to change or re-paste the embed code on your website. Because not everything can be seen in the preview, you can also preview the actual embed on your website after you have saved the styles.

Using CSS classes to style the embed

The following sections show the different classes and their components which you can use. All public classes use the EmbedWebinar__ prefix.

Important guidelines

You cannot inspect the page and use any classes given as it may not give you the intended results. Use only the Zuddl public classes listed in this article, not the generated CSS-module class names you may see in the browser.
A class only applies when its element exists in the selected layout or state. If an element does not appear in a particular state, styles targeting it have no effect there.
Branding applies inline styles to some elements, including the hero background and text color. A normal class rule may not override an inline declaration on the same element. Prefer a more specific target — for example, the title rather than the container — and use !important only when necessary.
State attributes are not available. To check your styles against a particular state, switch states using the Preview dropdown rather than writing state-based selectors.
For iOS devices, any input should have a minimum font size of 16px, because if the selected input is below 16px, iOS automatically zooms in and stays in the zoomed-in mode.
You can refer to specific tags or elements within a class, for example span or p. See the example below of referring to tags within the countdown class.

.EmbedWebinar__countdown span {
  color: #445b4b !important;
}

Do not use <style> tags in the Custom CSS text area.
The feature only supports plain CSS and not CSS nesting.
Custom CSS added here styles the embed only. Registration form fields live in the Flow iframe — style them in Flow Builder > Branding > Custom CSS. See How to Customize Branding in the Registration Flow for a webinar on Zuddl.

Layout and hero

Class names	Description
`EmbedWebinar__container`	Represents the root embed container and the page background.
`EmbedWebinar__content`	Represents the main content layout and the spacing between panels. Also carried by the on-demand player layout.
`EmbedWebinar__hero`	Represents the hero card or cover-image section.
`EmbedWebinar__coverImage`	Represents the webinar cover image.
`EmbedWebinar__logo`	Represents the organization logo in the hero card. Shown when no cover image is uploaded.
`EmbedWebinar__title`	Represents the webinar title, including the mobile header and the on-demand player title.
`EmbedWebinar__meta`	Represents the webinar metadata row.
`EmbedWebinar__date`	Represents the date metadata item.
`EmbedWebinar__time`	Represents the time metadata item.
`EmbedWebinar__metaIcon`	Represents the calendar, time, completion and on-demand metadata icons.

Note: The same public class is used for equivalent elements across the desktop, mobile, cover-image and no-cover-image layouts, so a single rule covers all of them.

Adding custom fonts

To add custom fonts for global use across all properties, specify the font CSS URL inside the @import url tag and use the font-family in EmbedWebinar__container as shown below:

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;600;700&display=swap');

.EmbedWebinar__container * {
  font-family: 'Roboto Mono', monospace;
}

Adding a custom background color

The embed background can be changed as shown below:

.EmbedWebinar__container {
  background-color: #ebd9e1 !important;
}

Speakers

Class names	Description
`EmbedWebinar__speakers`	Represents the speaker strip or the text-list container.
`EmbedWebinar__speakersLabel`	Represents the Speakers label in the text-list layout.
`EmbedWebinar__speaker`	Represents an individual speaker card in the avatar layout.
`EmbedWebinar__speakerAvatar`	Represents a speaker photo.
`EmbedWebinar__speakerName`	Represents an individual speaker name in the avatar layout.
`EmbedWebinar__speakerDesignation`	Represents a speaker designation in the avatar layout.
`EmbedWebinar__speakerNames`	Represents the combined speaker names in the text-list layout.

Note: The text-list layout renders names as combined text, so individual names cannot be styled separately in that layout.

Countdown and status

Class names	Description
`EmbedWebinar__status`	Represents the container for the countdown, live status or replay prompt.
`EmbedWebinar__countdown`	Represents the inline countdown timer.
`EmbedWebinar__countdownValue`	Represents a countdown number.
`EmbedWebinar__countdownLabel`	Represents a countdown unit label.
`EmbedWebinar__liveBadge`	Represents the live badge.
`EmbedWebinar__liveDot`	Represents the dot inside the live badge.
`EmbedWebinar__replayPrompt`	Represents the register-to-watch replay message.

Slightly early

These classes apply to the card shown to an attendee who opens the embed shortly before the webinar starts.

Class names	Description
`EmbedWebinar__earlyCard`	Represents the main card, including the registered-before preview.
`EmbedWebinar__earlyTitle`	Represents the slightly-early heading.
`EmbedWebinar__earlyDescription`	Represents the event-not-started description.
`EmbedWebinar__earlyCalendarButton`	Represents the calendar button container.
`EmbedWebinar__earlyCalendarContent`	Represents the calendar web component containing the text and icon.

Webinar ended

Class names	Description
`EmbedWebinar__endedCard`	Represents the webinar-ended card.
`EmbedWebinar__endedTitle`	Represents the webinar-ended heading.
`EmbedWebinar__endedDescription`	Represents the supporting completion message.

On-demand recordings

The on-demand recording plays inline within the embed. There is no popup or modal.

Class names	Description
`EmbedWebinar__onDemand`	Represents the on-demand player layout container.
`EmbedWebinar__recordings`	Represents the same player layout container. Retained for compatibility; this is not a carousel.
`EmbedWebinar__recordingCard`	Represents the inline player card.
`EmbedWebinar__videoContainer`	Represents the wrapper around the video player.
`EmbedWebinar__previousButton`	Represents the previous recording button. Present only when the webinar has more than one recording.
`EmbedWebinar__nextButton`	Represents the next recording button. Present only when the webinar has more than one recording.
`EmbedWebinar__onDemandBadge`	Represents the on-demand metadata item shown in the ended hero when recordings are available.

Note: The recording title uses EmbedWebinar__title, and the gated replay message uses EmbedWebinar__replayPrompt. The video player’s own controls and its poster image do not have public classes and cannot be styled.

Footer

Class names	Description
`EmbedWebinar__poweredBy`	Represents the Powered by Zuddl footer container.
`EmbedWebinar__poweredByLogo`	Represents the Zuddl logo in the footer.

Styling examples

Matching your brand colors

.EmbedWebinar__title {
  color: #0b3a6f !important;
}

.EmbedWebinar__countdownValue {
  color: #ffd166 !important;
}

.EmbedWebinar__enterButton {
  background-color: #0b3a6f !important;
  border-radius: 0px;
}

Styling a button

The below example shows the Enter Now action with styles applied.

.EmbedWebinar__enterButton {
  background-color: #445b4b !important;
  height: 48px;
  border-radius: 0px;
  text-transform: uppercase;
  font-weight: 700;
}

.EmbedWebinar__enterButton:hover {
  background-color: green !important;
}

Tip: You can use pseudo classes such as hover with a Zuddl class.

Styling the registration panel and recording controls

.EmbedWebinar__registrationPanel {
  background-color: #ffffff;
  border-radius: 0px;
}

.EmbedWebinar__previousButton,
.EmbedWebinar__nextButton {
  border-radius: 8px;
}

What cannot be customized

The registration form inside the registration panel, which is styled from Flow branding
The video player’s own controls and its poster image
The content of the cover image, which is displayed exactly as uploaded
Individual speaker names in the text-list layout, which are rendered as combined text
Which elements appear in each state, which is determined by your webinar settings
Elements that are not rendered in a given state or layout

Notes

The preview states do not include the ungated inline on-demand player. Verify styles for the player classes on an actual webinar with ungated recordings.
Because not everything can be seen in the preview, preview the actual embed on your website after saving your styles.
You can reach out to our support team (support@zuddl.com) for any further assistance.

How to Customize Branding in the Registration Flow for a webinar on Zuddl