Apply Custom Branding across the App

The Conferences i/o app features a robust branding tool to assist admins in capturing their organization's unique branding. Admins can change colors, add logos, and modify the typeface seen throughout the app to create a professional look and feel for attendees.

Overview

Logo Guidelines

Add App Header, Sponsor Top, and Sponsor Footer Logos

Add Presentation Branding Logos

Customizing the Font

Customizing Colors

Hide the 'Sign in to Moderate' Button

Advanced Customization

Branding Tips

 

Overview

Admins can add logos to Conference i/o multiple areas. The following are examples of each option: 

  • App Header

Branding - Main Logo.png

  • Sponsor Branding at the Top of the Page 

    Sponsor Header.png

  • Sponsor Branding at the Bottom of the Page

    Sponsor Footer.png

  • Live Content Slides

Please Note: The logo placement on Live Content Slides will depend on whether the QR code on your Live Content Slides is enabled. The following are examples with and without the QR code enabled. 

Want to have the session-specific QR code enabled on your presentation slides? See Brand Bar v2!

  • Logo Placement when Brand Bar v2 is Enabled: 
Branding Live Slide with QR code.png

  • Logo Placement when Brand Bar v2 is Disabled: 

Branding Live Slide - no QR code.png


 

Logo Guidelines

For the best results, use web-optimized images in PNG, JPG, or GIF format that are no bigger than 800 pixels wide by 200 pixels tall. Rectangular images that are horizontally longer than they are vertically tall are best. Transparent backgrounds are supported.

The maximum allowed size is 2000 pixels wide by 1000 pixels tall, and the maximum file size is 500KB. Though we allow image files up to those thresholds, we strongly encourage you to use smaller images, since they will be loaded onto attendees' devices.

 

  1. Sign in to the Admin panel
  2. Under App Administration, click Branding & Custom CSS

  3. Choose a logo by clicking Choose File under the respective logo location



    Branding - Headers.png 

  4. Optionally, set the Background Color of the App Header
  5. Scroll down and click Save to save changes

 

Add Presentation Branding Logos

  1. Sign in to the Admin panel
  2. Under App Administration, click Branding & Custom CSS

  3. Choose a logo by clicking Choose File under Presentation Branding
     

    Branding - Presentation Header.png
     

  4. Optionally, set the Brand Bar Background Color by providing a Color HEX code
  5. Scroll down and click Save to save changes

Customizing the Font

  1. Sign in to the Admin panel
  2. Under App Administration, click Branding & Custom CSS

  3. Under the Default Font section, select a font
     

    Branding - App Font.png
  4. Scroll down and click Save to save changes

 

Customizing Colors

Many colors of the Conferences i/o text and elements can be customized in the Branding & Custom CSS area, including:

  • the app background
  • navigation lists
  • the sidebar menu
  • link and link hover
  • primary action button
  • session headers
  • poll headers and instructions
  • social Q&A headers and instructions
  1. Sign in to the Admin panel
  2. Under App Administration, click Branding & Custom CSS

  3. Click the color dropdown in the respective area to customize, e.g. background
     

    Branding - App Colors.png
  4. Drag the dot around to pick a color, or enter the Color HEX code in the box
  5. Click Choose
  6. Scroll down and click Save to save changes

Hide the 'Sign in as Admin or Q&A Facilitator' Button

This option will allow you to hide the 'Sign in as Admin or Q&A Facilitator' button from the attendees.   

Hide Admin Sign-in button.png

 

  1. Scroll down to Admin & moderator links at the bottom of the page
  2. Change Visibility of admin login links to either Show to everyone or Hide All
  3. Click Save

Hide the 'Sign In To Moderate' Button

Sometimes there are concerns with the prominence of the Sign In To Moderate button that attendees will see on their device, especially if users think they need to click that button before participating with Q&A or Polling. These concerns can be alleviated by hiding the button from attendees. 

Hide Sign into Mod Button.png
  1. Scroll down to Admin & moderator links at the bottom of the page
  2. Change Visibility of session moderator login links to either Show to logged-in administrators only or Hide All
  3. Click Save

Advanced Customization

Expert users can use custom CSS and JavaScript to customize the look and feel of the app beyond the available default options. For a list of customizations, see the Custom CSS guide.

Warning: Custom CSS and JavaScript have the potential to alter the Conferences i/o app in unexpected ways. It is recommended that only users fluent in CSS and JavaScript should attempt to modify these configurations. 

Conferences i/o Support will provide a best-effort attempt at assisting with advanced customizations, but will not be able to custom develop themes for apps.

  1. Sign in to the Admin panel
  2. Under App Administration, click Branding & Custom CSS

  3. In the appropriate area, provide the syntactically correct code

    Custom CSS .png
  4. Scroll down and click Save to save changes

Branding Tips

For the best viewing experience, avoid adding too many header or footer images. As most attendees will be viewing the app on a smartphone, they have a smaller screen, and therefore it will take more effort for them to scroll to see content like Polls and Social Q&A. With large stacked images in the header, attendees may not even see that there are tools for them to participate below the logos. If a top Sponsor Branding image is necessary, consider making it as small and unobtrusive as possible.


Make sure to view the Conferences i/o app on another device and a different browser to experience the app as an attendee would. Look for images being too large and intrusive or color choices that decrease readability.