How to customize your Chat icon, Surveys and Announcements: Color and placement

In this article: Learn how to customize the color and position of the Chat icon, Surveys and Announcements. These Communication features all share the same positioning and color settings. 

Here’s how to customize the color and placement of your Communication features:

  1. Click on Communicate from the left navigation
  2. Select Chat Settings
  3. Click on Appearance from the list; this should be displayed by default. 

To set the page placement

  1. From the Chat Launcher, select the Custom Position button
  2. This will open up options for:
    1. Alignment: The designates the side of the screen that the Chat icon, Survey and Announcement are displayed to visitors. Select from Left Side or Right Side
    2. Padding: This adds more or less space between the bottom and side of the Chat icon, Survey and/or Announcement. The default is 20 pixels on bottom and 20 pixels on either left or right side depending on your alignment selection
  3. The Chat icon displayed on the right side of the setting will display any updates
  4. When ready, click Save Updates

To set the accent color

  1. From Appearance, the next setting box is Accent Color
  2. Click on the color field 
  3. The color selector will display, allowing you to modify the color by:
    1. Adjusting the slider across the rainbow to select a specific color family (Light blue rectangle) and dragging the color selector across the associated hue and shade to select a specific color (Orange rectangle)
    2. Toggling Gradient Hue to include a gradient that fades from your primary accent color to a coordinating color of your choice (Red rectangle)
    3. Typing/pasting your Hex color code into the provided field (Navy rectangle)
  4. Any color updates will display in the sample Chat icon and button preview located to the right side of the setting
  5. When ready, click the purple Save button located at the bottom of the color selector

Note: There will be a message below the hex color field that will alert you if your color values do or don’t pass WCAG AA contrast standards. These standards ensure all visitors have a positive experience. Click here to learn more about the WCAG AA construct standards.