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.

Building the Audience Console from ON24 Platform Training Services on Vimeo.

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 a Media Player, a Slides engagement tool, Q&A, and a Help engagement tool. Additional features include auto-save and quick access to console templates via a drop-down menu.

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

Styling: 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

Styling Image_002-4.jpg

The Styling 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

 

shadow set.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.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.jpg

 

 

Button Color

  • Choose the 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
button color.jpg

 

 

Chrome Color

  • Choose the header color for all of the engagement tools
  • Four color options available: grey, black, transparent, or white
chrome color.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
menu dock.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?