Engagement Themes (Branding)

You can customize themes or create new themes.  It's important to create a theme that fits with your company branding. Once you have created or modified a theme, go to the engagement that you want to customize and set the theme below the engagement preview, then click save.

First, go to the ENGAGEMENT THEMES page, located under the ENGAGEMENT dropdown menu. 

Then, click the CREATE A THEME button. 

You should see a page that looks like this:

NOTE: Guided tours, announcements/NPS surveys, and subtle announcements use different styles, so make sure you select the correct tab that contains the engagement type you want to style. 

The default options you can change for TOUR are:

• Tour Border Radius: changes the roundness of the corners of the Tour Steps. Bigger numbers make rounder corners. Smaller numbers make sharper corners.
• Tour Content Font Size: changes the size of the font
• Header Background Color: changes the color of the header
• Header Text Color: changes the color of the text in the header
• Header Text Font Size: changes the size of the font
• Header Dismiss Button Color: changes the color of the dismiss button in the header
• Left Button Color: changes the background color of the left button
• Left Button Text Color: changes the color of the text in the left button
• Left Button Border Radius: changes the roundness of the corners of the left button
• Right Button Color: changes the background color of the right button
• Right Button Text Color: changes the color of the text in the right button
• Right Button Border Radius: changes the roundness of the corners of the left button

ANNOUNCEMENT & SURVEY have additional styles options. They are:

• Footer Background Color: changes the color of the footer
• NPS Hover Button Background Color: changes the background color of the button background when hovering
• NPS Hover Button Text Color: changes the color of the text in the button when hovering

INFO BAR 

• Background Color: changes the background color of the announcments
• Border Color: changes the color of the border/line
• Font Size: changes the size of the text in the announcements
• Text Color: changes the color of the announcement text
• Button Background Color: changes color of the backgroud of the button(s)
• Button Border Color: changes the color of the button borders
• Button Font Size: changes size of the button text
• Button Text Color: changes the color of the button text
• Close Button Color: changes the color of the close button
• NPS Section: style the color of the circle background, border, text and for hover state as well

TOOLTIPS

• ToolTip Color: Changes the color of the circle
• Sonar Ping Color: Changes the color of the radiating circles
• Content Border Radius: Changes the roundness of the corners of the text area
• Content Background Color: Changes the color of the text area
• Content Border Color: Changes the color of the pointer bar area
• Content Font Size: Changes the size of the font
• Content Text Color: Changes the font color

LAUNCHER

• Bubble Icon Color: Change the color of the default icon
• Bubble Background Color: Change the background of the circle
• Bubble Border Color: Change the color of the circle border
• Header Font Size: Change the size of the font of the window header
• Header Font Color: Changes color of the header font
• Header Background Color: Changes the background of the window header
• List Font Size: Changes size of the font of the list of engagements
• Content Color: Changes the color of the content font
• Content Background Color: Changes the color of the window background
• Sublist Font Size: Changes the size of the sub-text (Step 1 of 2)
• Checkmark Background Color: Changes the color of the checkmark circle
• Progress Bar Font Color: Changes the color of the text for % complete
• Progress Bar color: Changes the color of the % complete bar
• Progress Bar Background Color: Changes the color of the incomplete section of the bar

CUSTOM CSS - You have the ability to customize all of the CSS by using the toggle at the bottom.

Locked Themes

Locked themes are themes that can only be edited by the user who created them. However, locked themes can be duplicated and modified based on new needs. Unlocked themes can be edited by any user.