Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

Branding the customer chat window

Updated on March 25, 2020

Configure customer chat window branding in the Style tab of the Self-service configuration portal. You can configure styles such as the font family, text, and dimensions of the help launcher, chat window, and chat header so that they reflect your organization's branding. You can create multiple self-service configurations for a web chatbot so that it can be deployed on different websites with different branding requirements.

  1. In the Self-Service application, click Launch web interfaceSelf-Service Configuration Portal.
  2. Select the chatbot for which you want to update the style, click the Edit icon.
  3. Click the Style tab.
  4. To configure the chat help settings, complete the following fields in the General settings section.
    1. Launcher:Select Tab or Button based on how you want to show the chat window launcher on your web page.
    2. Font family:Select a font family for the text shown on the help launcher and the chat window header.
    3. Allow users to resize font:Select this check box to allow customers to change the font size of their chat text.
      Select this check box to display three different selectable font size icons in the header of the chat window. The default size is 18px, and the other two options are 20px, and 22px.
    4. Height:Select a font family for the text shown on the help launcher and the chat window header.
    5. Width:Select the width of the chat launcher tab or button.
    6. Link color Select the background color for the chat launcher tab or button.
  5. To configure the name of your help tab or button, complete the following fields in the Labels section.
    1. Help tab/button text:Enter the text you want to display on the help launcher tab or button.
      For example: Need help?
    2. Header title:Enter the text you want to display on the chat header as the title.
  6. To configure the message header settings, complete the following fields in the Header section.
    1. Header text color:Enter the font color for the text shown on the chat window header.
    2. Header background color:Enter the background color for the text shown on the chat window header.
    3. Logo:Upload the image to display to the left side of the chat header text, for example, your company logo. All images are scaled to 21-pixel by 21-pixels.
  7. To configure the chat text settings, complete the following fields in the Chat body section.
    1. Font color:Enter the font color of the chat text for the CSR chat window and Customer chat window under the respective settings.
    2. Font family:Enter the font family of the chat text for the CSR chat window and Customer chat window under the respective settings.
    3. Background color:Select the background color for the CSR chat window.
  8. Click Submit.
  • Previous topic Defining the chat window branding
  • Next topic Configuring Pega Knowledge help categories in the web chatbot

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us