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.

 

TABLE OF CONTENTS


Overview

Admins can add logos to Conference i/o multiple areas. On the app homepage, Admins can customize the App Header, the Sponsor Branding Top, and the Sponsor Branding Footer.


Additionally, Admins can also add custom branding to Live Content Slides.


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 attendee's 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


  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


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

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 has 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 attempt to 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

  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.