The Console Customization menu allows you to design the background of your webinar console and customize the look of your engagement tools.
Access the Console Customization menu by clicking on the gear icon in the Console Builder tab of your webcast.
Console Background Styling
Design the background of your Console here. The background that you use for the desktop console can be different from the image that you use for the mobile console.
When using Single Color or Gradient, click on the Background Color block to choose a color from the palette or enter a Hex value.
Or choose Image and click on Upload New to upload an image for the console background.
- Accepted file formats are PNG, GIF, and JPG
- Find the recommended sizes here
Images are layered above the background color and below the engagement tools.
Constrain Image Properties is checked by default and displays the image at its original size.
- If webcast attendees expand their console view larger than the background image, the background colors will appear beyond the image boundary
- If the Constrain Image Proportions box is left unchecked, the background image will scale to fit the attendee's browser window
- Background graphics vary in design, so we recommend opening Preview to determine which option displays the best results
- To see how the constrain image proportions option works, watch this quick demo
- Find more information on using Constrain Image Proportions
Check Inherit mobile background from desktop settings if you would like the console for your desktop and mobile viewers to be the same. If the box is unchecked, set up the mobile console background.
Engagement Tool Styling
The Engagement Tools section allows you to fine-tune the look and feel of the tool windows, buttons, and icons.
Window Shadow and Corner Radius and Button Styling
Add depth to the console by using the shadow effect on all of the engagement tools using Window Shadow. And Window Corner Radius controls the corners of all of the engagement tools on the console and in the Menu Dock. Move the slider bars to increase or decrease shadow and corner radius.
Update the look of the buttons in tools using the Button Corner Radius using the slider bar and the color pickers for Button Color and Text Color.
Button color updates will not be seen in the Console Builder but will be visible in the Preview URL and to audiences when it has the potential to be used.
Change the background of the engagement tools on your console here.
For Window Background, choose from either a White Background, a Dark Translucent Background, or a Light Translucent Background.
- White also offers four options for different chrome/tool header colors (grey, black, transparent, or white)
- Dark Translucent or Light Translucent only offer a translucent chrome/tool header color, but does allow you to choose the tool opacity
Set the headers of your engagement tools here.
By default, the headers are set to Embedded chrome shown on Hover, meaning the the tool's name and the tool options will show only when you hover over the tool, for a cleaner look. This option is available no matter which window background option is used.
- This is the default option for new events and when using the ON24 console templates. If you do not want this to be the default, open your Account Dashboard and toggle OFF Default Chrome Style to Show on Hover.
If you are using a white Window Background, you can change the color of the header to Gray, Black, Transparent, or White. This header will always be visible on the tools.
If you are using a translucent Window Background, you can choose Translucent Chrome that will always be visible on the tools.
Responsive Behavior for Desktop Console
Toggle this option ON to allow content within the console to adjust based on the size of the attendee's screen - tools will scale to fit the size of the screen. This option is OFF by default.
Find more information on the responsive console behaviors here.
The Tools Menu section lets you decide if the Menu Dock that holds all your engagement tools is shown on your console. See below for how to style your Menu Dock.
- For Desktop users, check the box if you want the Menu Dock to show
- If unchecked, the Menu Dock will be hidden and all engagement tools will need to be set to Show on Launch in their Attributes
- For Mobile users, choose when the Menu Dock shows
Mobile Menu Dock
On mobile devices, there is limited space to show the tool icons in the menu dock. Up to three tool icons display on a mobile phone, and up to seven display on a tablet. If there are more tools, the rest are shown in a menu that is available after clicking the three dots icon.
You can control which icons are shown in the menu dock on mobile devices by clicking in the Menu Dock in your Console Builder and dragging tools to their desired location.
- Icons displayed in the menu dock on phones are dictated by the position set in the Console Builder
- The left-most dock icon tool takes the highest priority, and the right-most the lowest priority
- The first two icons do not show because they are the Media Player and Slides tools and on mobile devices, the Media Player and Slides are always visible
- The application ignores icons that don’t apply to mobile and includes the next highest priority icon
Menu Dock Styling Options
There are two positions for the Engagement Tools menu dock: Dock or Top Dropdown dock.
The dock has traditionally been placed at the bottom of the Audience Console, but you can also display the Engagement Tools from a dropdown menu at the top right of the audience console.
The Top Dropdown dock at the top right of the console resides in a header and allows for additional customization, including choosing the color of the header or adding a logo.
To choose the dock position, click the gear icon on the Menu Dock to open the settings.
The Menu Configuration panel will open with two tabs on the left navigation: Menu Type and Tool Icons.
Select from the Dock or Top Dropdown options.
For the Top Dropdown option, you can customize the following settings:
- Menu Link Text
- Menu Link Color - Select with the color picker
- Header Background - Select with the color picker
- Header Opacity - Select an opacity percentage on the slider
- Company Logo - Upload a logo to the header
Example of a top dropdown Menu
If you want to use the ON24 default tool icons, you can configure the style and color of the icons in the Menu Configuration.
Choose your Icon Style.
Note: If this option is toggled ON, you will not be able to change the tools icons individually in Attributes.
Single Color - Choose this option to set the color of the icons
- If Include icon background color is toggled ON, choose both the tool background and foreground colors using the color pickers
- If Include icon background color is toggled OFF, choose just the foreground color
- Mixed Color - This will style the tools in the ON24 default colors
If you would prefer to style to icons individually, toggle Use ON24 default tool icons OFF, then update the icons for individual tools in the Attributes of each tool. Image size is 48x48 pixels. You can find downloadable .zip files of tool icons here.