Customize the design of your event by adding images to Registration and Lobby pages, the Audience Console Background or Menu Dock Tool Icons, or within specific Engagement Tools in Webcast Elite. You can also add a background image to Poll Questions in Elite Studio. This article includes recommended file types, sizes, and formats for logos, backgrounds, banners, icons, and speaker photos.
As a best practice, all images should be sized before uploading to Webcast Elite. All images uploaded to the ON24 platform must be in a .JPG, .PNG, or .GIF format. Some exceptions may apply and are noted below with an asterisk*.
These recommendations are based on the most common scenarios and setups and are provided as guidance. Your setup may require something different as branding requirements are specific to each user.
Registration and Lobby Page
Customize your event's Registration and Lobby Pages by adding an image in the Header.
The Registration and Lobby Page Header image will appear at the top of your event Registration and Lobby pages.
Note: Image positioning and sizing vary based on your selected Header Layout option (Banner, Hero, or Hero and Logo). The example below shows a Registration Page Header image in a Hero Layout.
- Banner Layout Header image size: 1440x67 pixels
- Hero Layout and Hero and Logo Layout Header image size: 1440x828 pixels
- Supported file formats: JPG, PNG, GIF
- Banners can be traditional images or solid color blocks if a more saturated background is preferred in this section.
- Learn more about updating the Header in the Registration Page Builder.
If you are still using the legacy version of the Registration Page design, follow the guidelines below:
- If you would like your banner image to align with the edges of the abstract and registration fields, size your registration banner width at 1230 pixels.
- If you would like a full-width banner spanning the entire registration and lobby pages, size your banner width at 1920 pixels.
- Note: Either banner width will work with tablet devices.
| Registration page with banner width sized at 1230 pixels. | |
| Registration page with banner width sized at 1920 pixels. |
Audience Console
You can customize the design of your event's Audience Console by adding the following images as you select Console Customization options in the Console Builder:
- Audience Console Background image
- Audience Console Menu Dock Tool Icon images
Audience Console Background Image
Customize your Audience Console by using an image for the console background.
The Audience Console Background image will display beneath all of the tools in your audience console.
-
Audience Console Background image size: 2900x1350 pixels
- The recommended image size is the same for both desktop and mobile backgrounds.
- *Accepted file formats: SWF, PNG, GIF, and JPG.
- Need a background image? Review our Downloadable Console Background Images.
- Learn more about updating the background of your console in the Console Customization Options in the Console Builder.
Pro Tips for Optimizing Your Audience Console Background
Consider the following best practices to help optimize your Audience Console Background.
We recommend uploading an image with no text or logo. Using a background image with text or logos will often cause them to appear stretched/skewed when an attendee expands their browser window. Therefore, uploading a plain background image is recommended as a best practice.
- To add logos and text to your console, we recommend using the Image Tool and Text Tool options to achieve the best results. These tools will allow you to 'lock' the size and position of the images and text so they won't appear distorted when an attendee expands their browser window.
When selecting a background image in the Console Customization menu, there is a Constrain Image Proportions toggle that allows you to customize how your image displays when attendees expand or contract their browser window.
To see how the Constrain Image Proportions option works, watch this quick demo.
- When Constrain Image Proportions is toggled ON, the background image will always display at its original size as you uploaded it.
- If webinar attendees expand their console view larger than the original size of the background image, the console background colors will appear beyond the image boundary.
- See an example in the image with the red X below.
- If you are using a background image smaller than the recommended specifications, attendees viewing on larger displays might see a color background beyond where your image reaches. Reduce this effect by changing the Console Background setting to the Single Color option and selecting a color complementary to your console background image, then change the Console Background setting back to the Image option.
- If webinar attendees expand their console view larger than the original size of the background image, the console background colors will appear beyond the image boundary.
- When Constrain Image Proportions is toggled OFF, the background image will scale to fit the attendee's browser window as they expand or contract their console view
- See an example in the image with the green check mark below.
- Note: If using an SWF background image, the Audience Console does not display it as stretched even if that is the defined behavior.
Background graphics vary in design, so we recommend opening the Preview of the console to determine which option displays the best results.
To learn more about optimizing your Audience Console Background, watch this quick demo.
Audience Console Menu Dock Tool Icon Images
Customize your Audience Console by using custom images for your Menu Dock Tool Icons.
Menu Dock Tool Icon images will show in the tool menu along the bottom of the console.
Note: Menu Type must be set to Dock for the menu to appear along the bottom of the console with icons. If your Menu Type is set to Top Navigation instead of Dock, tool icons are only used on the mobile console. Learn more about Menu Dock Options in the Console Builder.
- Menu Dock Tool Icon image size: 48x48 pixels
- Supported file formats: JPG, PNG, GIF
- ON24 offers Engagement Tools Icons for Download. You can download .zip files of each icon provided to use in your console.
-
In the Console Builder Menu Dock Options, you can use the ON24 default tool icons and update general styling for all tool icons at once, or Toggle OFF "Use ON24 default tool icons" to update icons for each tool individually in the Attributes of each tool on the console.
- Learn more about updating general styling for all tool icons at once in the Console Builder Menu Dock Options.
- Learn more about updating icons for each tool individually in the Attributes of each tool in the Console Builder.
Engagement Tools
You can add images within several Engagement Tools in the Audience Console during tool set up.
Click each tool below to learn more about customization options.
Image Tool
With the Image Tool, you can add an image to display on your console and provide a Link URL for the image. When attendees click on the image in the console, the URL will launch in a separate browser window.
-
Image Tool image size: All images will display in the console at their original size, as uploaded.
- If resizing or editing is needed, changes should be made offline using your preferred photo editor (e.g., Photoshop, Snagit, etc.).
- Supported file formats: JPG, PNG, GIF
- When you create a new event, an Image Tool is included at the top left of the console next to the event title and will default to the Brand Logo set in your Account Dashboard Branding settings. If you'd like to change the image, click the gear icon on the tool to open Configuration.
- Learn more about adding Engagement Tools in the Console Builder.
- Learn more about customizing the Image Tool.
Pro Tip: If you want to use an Image Tool to display a banner across the console, the recommended size is 1200 pixels x 100-150 pixels.
Speaker Bio Tool
The Speaker Bio Tool allows you to add fully customizable profiles for each presenter to display in your console, including the speaker's name, photo, title, company, and direct contact links.
Note: Once you've set up the Speaker Bio Tool in the Console Builder, those Speaker Bios will also be available to add to your Registration and Lobby Pages in the Registration Builder. Speaker Bio information can only be updated in the Speaker Bio Tool in the Console Builder.
-
Speaker Bio Photo image size: 500x500 pixels
- Uploading a square image is strongly recommended and will achieve the best results.
- The image will be scaled appropriately for the Speaker Bio Tool in the console or Speaker Bios added to your Registration and Lobby Pages.
- Supported file formats: JPG, PNG, GIF
- Learn more about adding Engagement Tools in the Console Builder.
- Learn more about customizing the Speaker Bio Tool.
Take Action Tool
The Take Action Tool allows you to invite your viewers to continue their content journey with you by asking them to take a specific action, such as registering for an upcoming event or viewing external content. The Take Action Tool can be customized with an image.
- Take Action Tool Image size: The maximum size is 4096x4096 pixels.
- Supported file formats: JPG, PNG, GIF
- You can choose a square or circle display option, and the image will be center justified in the tool.
- Learn more about adding Engagement Tools in the Console Builder.
- Learn more about customizing the Take Action Tool.
Take Survey Tool
The Take Survey Tool can be utilized to gather feedback from each attendee or gauge approval of an idea or plan. The Take Survey Tool can be customized with a background image.
- Take Survey Tool Background Image size: No smaller than 500x500 pixels, and no larger than 1920x1080 pixels. Maximum file size is 10MB.
- Supported file formats: JPG, PNG, GIF
- Learn more about adding Engagement Tools in the Console Builder.
- Learn more about customizing the Take Survey Tool.
Poll Questions
Poll questions are a great way to capture the voice of the audience. When a poll question is pushed the audience, it will appear in their console.
When Producers create and manage polls in Elite Studio, they can add a background image to a poll question in Poll Styling.
Note: Only those logged into Elite Studio as Producer can add or edit poll questions.
- Poll Background image size: No smaller than 360x360 pixels, and no larger than 2048x2048 pixels.
- *Supported file formats: JPEG, JPG, PNG, BMP
- Learn more about adding poll questions and customizing poll styling in Elite Studio.
Comments
2 comments
Audience console image size of 2900 x 1350 ????
Hi Helen - are you confirming the recommended audience console background image size? Please let us know if there is anything else you need! Thank you!
Please sign in to leave a comment.