Branding

Where do I brand an instance?

In the partner portal, open the instance and choose Configuration > Branding. Inside the instance, administrators find the same page under Platform settings > Branding. A live preview shows the Schedule meeting and Join meeting screens with your choices before you save. Select Update branding configuration to save everything on the page at once.

A distributor or reseller can brand its own level too. Every instance below it that has no branding of its own shows that branding. See Inheritance and locks.

Which colors can I set?

Primary and secondary can be the same color. If your logo is light, a darker logo background keeps it readable.

Which images can I upload?

Upload the icon once. The platform generates every size that browsers and devices need from that one file.

The dark mode logo and dark mode icon apply only to the level that uploaded them; they are not inherited. Without them, dark mode uses the regular logo and icon.

How does dark mode work?

Dark mode is a white-label setting, not a branding option. Under Features in the white-label settings, Dark mode enabled? switches it on for the instance, and Can users change the dark mode setting? lets each user choose for themselves.

Dark mode inverts the colors of the interface. Your colors therefore appear inverted in dark mode as well, which is why a lighter version of the logo and the icon helps.

Can my customers' accounts have their own logo?

Yes. Switch on Branding in the UI features of the white-label settings. Account administrators can then upload a logo and a dark mode logo for their account in their account settings. That logo replaces the instance logo in the application header, on the screen where participants join that account's meetings, and in the account's meeting summaries.

Accounts cannot change colors, icons or CSS. Those stay with the instance.

What can I change with custom CSS?

For anything the options above do not cover, write your own CSS. Rounded buttons, a corporate font, different shadows or spacing: almost every visual decision in the interface can be overridden this way.

Open Advanced - Custom CSS on the branding page and enter your rules. They are added after the platform's own styles, so they take precedence. Four placeholders stand for the colors you set above, so your CSS follows when the colors change:

• $primaryColor
• $secondaryColor
• $headerBackgroundColor
• $navbarLogoBackgroundColor

An example that rounds the buttons, uses a corporate font and draws a line under the header in the primary color:

@import url("https://fonts.example.com/css/corporate-sans.css");

body {
    font-family: "Corporate Sans", Arial, sans-serif;
}

.btn {
    border-radius: 20px;
}

.navbar {
    border-bottom: 3px solid $primaryColor;
}

Things to know before you rely on it:

• Your rules are scoped to the application. The platform wraps them in .wlvmr, the class on the page's root element. If your CSS already contains .wlvmr, the platform does not wrap it again.
• Nesting is allowed. The CSS is compiled with Sass, so nested rules work.
• Invalid CSS is dropped as a whole. If your CSS cannot be compiled, the platform leaves it out and the instance shows its regular styles. Check the result in a browser after every change.
• Fonts and images must come over HTTPS.
• Our class names can change between versions. Keep your rules few and targeted, and test them after an update.

What does branding not cover?

• Fonts have no setting of their own. Use custom CSS.
• Sounds can be switched off for each event, but not replaced with your own. See Meeting room and webinar.
• Texts are not part of branding. You change them in the language editor. See Texts and languages.
• The product name and the host name are white-label settings. See General settings.