Here you can upload your logo, configure your webinar theme and add custom CSS to your pages.
Logo
To upload a logo, follow the following steps:
Click on 'Account' in the top right corner.
Next, click on 'My account' in the dropdown menu.
Navigate to 'Branding' on the left-hand side under the 'Webinars' tab.
Click on 'Upload logo' and select the correct file.
You can upload two logos: one for light mode and one for dark mode. The light theme logo will be visible on the registration page, confirmation page, channel and in the upper left corner of the webinar page when light mode is enabled. The dark theme logo is only visible on the webinar page when dark mode is enabled.
Please note! SVG format is preferred to ensure the best quality in any size the logo will appear (transparent .png files can also be uploaded). Uploaded image files (.png) need to be a minimum of 70 pixels in height.
Icon
To upload an icon, follow the following steps:
Click on 'Account' in the top right corner.
Next, click on 'My account' in the dropdown menu.
Navigate to 'Branding' on the left-hand side under the 'Webinars' tab.
Click on 'Upload logo' and select the correct file.
Uploading an icon is available from the Enterprise plan. You can upload two icons: one for the light mode and one for dark mode. The light theme icon will be visible in the mobile streaming app and browser as favicon when light mode is enabled. The dark theme icon is only visible when dark mode is enabled.
Theme colors
To change the webinar theme for your webinars, follow the following steps:
Click on 'Account' in the top right corner.
Next, click on 'My account' in the dropdown menu.
Navigate to 'Branding' on the left-hand side under the 'Webinars' tab.
Here, click on 'Theme colors' and set up your Default webinar theme or Custom theme colors.
Webinar theme
Here you can set the default visual theme for your webinars. This applies to the pages where webinar participants participate in your webinar. By default nobody can change the theme you choose, presenters, moderators and viewers alike unless you configure otherwise.
Custom theme colors
Here you can set up your own colors. We'll mix and match them to create a pleasing combination. We won't use the exact colors you pick because we rely on color theory to find the best match.
Please note! Changes will not be applied until you hit save. Make sure the custom theme is enabled and click on 'Update theme colors'.
You can read more about webinar themes in this article.
Team member label
During your webinars, webinar team members will have a label next to their name. By default 'Team' is used, but you can customize these labels to your liking with the following steps:
Click on 'Account' in the top right corner.
Next, click on 'My account' in the dropdown menu.
Navigate to 'Branding' on the left-hand side under the 'Webinars' tab.
Scroll down to 'Team member label' and enter a label to your liking with up to 20 characters.
Custom CSS
To add custom CSS to your pages, follow the following steps:
Click on 'Account' in the top right corner.
Next, click on 'My account' in the dropdown menu.
Navigate to 'Branding' on the left-hand side under the 'Webinars' tab.
Add custom CSS to your pages to give them a generic own layout. This is applied to all registration and viewer pages.
Custom CSS is available from the Enterprise plan.
Please note that custom CSS is limited. You can, for example, apply a different font, but colors of elements are defined by us.
Tips, tricks and references:
Always test your pages after making a change.
Apply your style to the .font-family class if you want to use your own font for your registration and other pages.
Use the @import function to load external (https) sources such as fonts.
Do not load styles for interactive elements such as the video player to prevent something from working.
To find out which elements to select, use the 'Web inspector' or 'Developer toolbar' in Chrome or Firefox to click on elements to find out their selector (eg ".logo-balk") to target for custom CSS.
We clean up CSS code and extract unwanted code, if this happens double check your syntax and notation.
// set all font elements to the font family 'Verdana'
.font-family { font-family: 'Verdana' !important; }
// set all font elements to the Google Font 'Roboto'
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
.font-family { font-family: 'Roboto', sans-serif !important; }
// set all fonts on any page to 'Roboto'
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
* { font-family: 'Roboto', sans-serif !important; }