Skip to main content
ON24 Knowledge Center

Building the Audience Console

This article explains how to use the Console Builder to create a custom branded webcast experience for your audience.

The Console Builder is at the heart of creating a custom webcast experience for your audience. It is your WYSIWYG (“what you see is what you get”) design tool for the webcast console.  The webcast console is what your audience will see when they attend your webcast.

Accessing the Console Builder

The Console Builder is integrated directly within the Webcast Elite user interface and is accessible by clicking on the Console Builder tab. By default, the console will include an Image engagement tool, Media Player, a Slides engagement tool, Q&A, a Related Content engagement tool, a Speaker Bio engagement tool, a background image, and a Help engagement tool. Additional features include auto-save and quick access to console templates via a drop-down menu.

Default Audience Console.jpg

Responsive Console

The desktop audience experience provides a responsive display. Content within the console will adjust based on the size of the attendee’s screen. With this enhancement, regardless of whether the audience is viewing on a small laptop or a large desktop monitor, they will have a beautiful viewing experience.

Here is an example of a console seen on a smaller screen, with the responsive setting turned OFF. Notice that the Take Survey tool on the far right is cut off, and the user would need to use the scroll bar to see it.

Responsive Setting Turned Off.jpg

Here is the same example, with the responsive setting turned ON. Various tools have been scaled so that the Survey tool now fits on screen. The actual text inside tools like Related Content, Take Survey, etc. do not scale, so they are still completely legible.

Responsive Setting Turned ON.jpg

Note: To enable at the webinar level, you need to first enable the responsive console at the account level. To learn more about activating this feature at the account level review this page about the Account Dashboard. 

Pro Tip: When responsive is turned ON for a webinar, the tools will scale to fit the size of the screen. As part of the scaling, logic has been added to avoid tools overlapping on top of one another. The responsive handling should result in a better viewing experience as illustrated in the example above. However, depending on how you have designed your console, it may impact the look of your webinar in unexpected ways.

In some cases, tools may not be positioned exactly as you had intended because of the logic to avoid overlapping of tools. Image and Text tools, in particular, are the tools that are most likely to have that issue. You might need to adjust their size or position to get them to appear as you intend. If you have Image / Text tools overlapped on top of each other on purpose, you might need to combine them into a single image.

For these reasons, the responsive setting is OFF by default for all existing webinars. As a best practice, if you are interested in turning ON the responsive setting for a webinar, preview the console so that you know how it will appear. Make edits as necessary to your console and decide if responsive handling should be ON or OFF for your webinar.

Console Customization Response Control.jpg

Translucent Console Customization Option

 

 

An additional console customization option can be used to bring your webinars to life. Within Console Builder > Console Customization, there is a new “Window Background” setting. The Translucent background gives users more options to design an audience console with a totally different look and feel.

Translucent Audience Console.jpg

Console Builder Layout

At the top of the console builder, the webcast’s title and a series of editing tools are displayed. Any changes made to the console will be saved automatically.

Console Builder Editing Tools:

Image_002-4.jpg

Console Customization: Click the Styling button to customize your console background, hide the Menu Dock, or change the button color for your engagement tools

Image_003-4.jpg

Tools Manager: Use the Manager to add engagement tools to your console

Image_004-3.jpg

Preview: Click the Preview button to launch a preview of the webcast console in a new browser window

Image_005-2.jpg

Template Manager: Use the Template Manager to create new console templates, recall saved templates or manage the Template Library

size.jpgalign.jpg

Sizing and Alignment Tools: Using the sizing and alignment tools to assist you in placing engagement tools in the audience console

Console CustomizationImage_002-4.jpg

The Console Customization menu allows you to design the background of your console and customize the button color of the engagement tools. The Menu Dock may also be hidden if desired. Each setting is detailed below.

Setting A Background Color

There are 2 options for customizing the background color of your console.  Click each color block to select a color from the color palette or enter a custom Hexadecimal value in the text box. If the Gradient is selected, a drop-down menu will appear to select the angle of the gradient.

Choose a color(s) for both your desktop/tablet viewers and your mobile phone viewers.

  • Single Color - The default option; the initial color is set to blue.
  • Gradient - Adds a second color and a drop-down menu to choose the angle for the color gradation.
    • Horizontal - The top color fades into the bottom color, from the upper part of the console.
    • Vertical - The top color fades into the bottom color, from the left side of the console.
    • Diagonal from Left - The top color fades into the bottom color from the upper left corner to the lower right corner of the console.
    • Diagonal from Right - The top color fades into the bottom color from the upper right corner to the lower-left corner of the console.

 

console custom.png

 

Adding Background Image

You may add a background image to the console. This image is layered above the background color(s), and below the engagement tools.  Images will not show on mobile phone consoles.

Find the recommended sizes here.

  • Choose Image and click Upload New to locate an image on your network
    • Accepted files formats are SWF, PNG, GIF, and JPG
  • Once added, the background image is displayed by default
  • If you decide you do not want to use the background image, reopen the Styling menu and select a background color - the color choice will show instead of the image
    • The background image filename will still appear even if it is not being used.

 

 

console image.jpg

Constrain Image Proportions

  • Checked by default and displays the image using its original dimensions
    • If 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 stretch to fit the attendee's browser window.

Note: When using a SWF background image, the Audience Console does not display it as stretched even if that is the defined behavior.

 

Engagement Tools Styling

Fine-tune the look and feel of the audience console with the ability to controlling the look of the engagement tool windows, buttons, and icons on the console. 

 

 

Window Shadow

  • Add depth to the console by using the shadow effect on all of the engagement tools
  • Move the slider bar to increase or decrease the amount of shadow

 

Window Shadow.jpg

 

 

Windows Corner Radius

  • Controls the corners on all of the engagement tools on the console and in the Menu Dock
  • Move the slider bar to increase or decrease the curve of the tools
Window Corner Radius.jpg

 

 

Button Corner Radius

  • Controls the corners of the buttons within all of the engagement tools
  • Move the slider bar to the increase or decrease the curve of the buttons
Button Corner Radius.jpg

 

 

Button Color

  • Choose the active color of the button and the button text using the color picker or hex code
  • All the buttons within the engagement tools will display the selected color when the tool is engaged
    • Button color will not update in the Console Builder, but will be visible to audiences when it has the potential to be used 
Button Color.jpg

 

 

Window Background

  • The white background offers four options in the dropdown menu below for different chrome colors for the audience console engagement tools.
  • Choose from grey, black, transparent, or white.
White Background Options.jpg

 

 

Translucent Background

  • The translucent option only provides a translucent chrome color.
  • The translucent background offers a different look and feel to your engagement tools
Translucent Console Setting.jpg

 

 

Menu Dock

  • By default, the Menu Dock will be visible and centered at the bottom of the console
  • To hide the Menu Dock, uncheck the box
    • If unchecked all engagement tools will need to be set to Show on Launch in their Attributes, otherwise, they will not be retrievable
Show Menu Dock.jpg

 

 

Menu Dock - Mobile Phone and Tablet

  • Showing the menu dock when the screen is tapped is the default setting to show the engagement tool dock icons.
  • You can alternatively make it so the menu dock is always shown. This can be configured in the Console Builder at the bottom of the Console Customization Styling tool.

Note: Showing the menu dock when the screen is tapped is the default setting.

Menu Dock Mobile Always Shown.jpg

Control Which Items Show in the Mobile Device Menu Dock

On mobile devices, there is limited space to show the tool icons in the menu dock. Up to 3 tool icons display on a mobile phone, and up to 7 display on a tablet. If there are more tools than can fit, the rest are shown in a menu that is available after clicking the 3 dots icon.

You can control which icons are shown in the menu dock on mobile devices!

  •  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.

Icons in order of priority (left to right)

 

Mobile Dock Icon Priority.jpg

 

Using Engagement Tools and Conversion Tools Image_003-4.jpg

The Tool Manager allows you to add engagement tools to your console. Tools are divided into two categories: Conversion Tools and Engagement Tools. Within each category, tools are listed in alphabetical order. To add a tool, simply drag it from the Tools Manager to the console or click on the plus (+) icon.

The Tools Manager has two views:

  • Classic Icons
  • New Icons

Adding a Tool

  • There are two options to add tools to the console:
    • Click and drag the tool from the Tools Manager onto the console
    • Double-click the tool
  • Most engagement tools appear as they would when the console is launched (with a few exceptions)

When opening the Tools Manager, Class Icons will display.

clipboard_e97e8fb3f6b93fc57f9425fa7e67dfcc6.png

Select New Icons to choose a new version

clipboard_e6083e8f7717d026053d373687fba40d8.png

 

 

Deleting a Tool

  • Tools can be deleted from the console in two ways:
    • Click the gear Image_003-2.jpg icon in the tool header and select Delete
    • Select the tool and press Delete on your keyboard

Note: If you delete or edit a tool AFTER a webcast has run, any responses associated with it are deleted from the webinar report.

Configure a Tool and Set Its Attributes

  • To configure a tool and change its attributes, click on the gear Image_003-2.jpg icon at the top of the tool
  • For more information on configuring tools, start here and choose a tool to learn more about its features
  • For more information on tool attributes, click here

 

Templates Image_005-2.jpg

Create a console template to save time when setting up future audience consoles. Use one of the dozen pre-designed templates developed by ON24, or create your own.   

When creating a template, the console background, layout, graphics, and engagement tool icons will all be saved.  The majority of engagement tool attributes and configurations will also be saved, except for the configuration of the following tools: 

  • Certification 
  • Test 
  • If reusing the same test or certification criteria is needed, considering building a webcast template as an alternative.  When copying a webcast template, all engagement tool configurations will be carried over to the new webcast.  Click here to learn more!
Existing console templates that have Survey or Resource List tools do not have any associated survey questions or resource items. To take advantage of the enhancement made September 2020, create new console templates with fully configured Survey or Resource List tools.

Save a Template

  • Click on the Template Manager Image_005-2.jpg to name the template
  • Click Save to add the template to your Template Library
template manager.jpg

Rename a Template

  • Rename any template by clicking the pencil icon and typing in the new name.

Delete a Template

  • Click the trash icon to the right of the template you wish to delete
  • The deleted template cannot be recovered

Apply A Template to Your Console

  • Open the Template Library template library.jpg
  • Double-click the name of the desired template

 

console template.png

When applying a console template, all settings and engagement tools from the saved template will override the existing console.   

A confirmation dialogue will pop-up, to prevent you from accidentally wiping out your console.

apply console template.png

 

Sizing and Alignment Options size.jpgalign.jpg

There are a couple of options when moving or resizing the engagement tools.  

Arrange and Resize Engagement Tool Windows

  • Engagement tool windows can be moved by clicking and dragging the window to the desired location
  • Click and drag any corner of the tool to resize (except for the Media Player)
  • You can also arrange or resize the tools using the Align align.jpgand Resize size.jpgicons at the top of the console

tool example.jpg

Align

  • Use the Alignment option to align groups of engagement tools
  • Control-click to select multiple tool windows, then choose the desired alignment option
  • The alignment is based on the position of the first tool selected in the group
    • Align Group Left
    • Align Group Center
    • Align Group Right
    • Align Group Top
    • Align Group Middle
    • Align Group Bottom
  • Once grouped tools are aligned, they may be unaligned manually by clicking and dragging each to a new location

 

 

align tool.jpg

Resize

  • Use the Resize option to resize or move tools based on pixel size values and X/Y coordinates respectively
  • Click on the tool you wish to resize or move in this way, then select the Resize option
resize.jpg

 

Preview the Console 

Use the Preview icon Image_004-3.jpg  or the Preview URL to see the console from your audience's perspective.  The preview allows you to test the layout and functionality of your console as you build it.

console preview.jpg

 

  • Was this article helpful?