Branding the customer chat window
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.
- In the Self-Service application, click .
- Select the chatbot for which you want to update the style, click the Edit icon.
- Click the Style tab.
- To configure the chat help settings, complete the following fields in the
General settings section.
- Launcher:Select Tab or Button based on how you want to show the chat window launcher on your web page.
- Font family:Select a font family for the text shown on the help launcher and the chat window header.
- 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.
- Height:Select a font family for the text shown on the help launcher and the chat window header.
- Width:Select the width of the chat launcher tab or button.
- Link color Select the background color for the chat launcher tab or button.
- To configure the name of your help tab or button, complete the following fields in the
Labels section.
- Help tab/button text:Enter the text you want to display on the help launcher tab or button.
- Header title:Enter the text you want to display on the chat header as the title.
- To configure the message header settings, complete the following fields in the
Header section.
- Header text color:Enter the font color for the text shown on the chat window header.
- Header background color:Enter the background color for the text shown on the chat window header.
- 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.
- To configure the chat text settings, complete the following fields in the
Chat body section.
- Font color:Enter the font color of the chat text for the CSR chat window and Customer chat window under the respective settings.
- Font family:Enter the font family of the chat text for the CSR chat window and Customer chat window under the respective settings.
- Background color:Select the background color for the CSR chat window.
- Click Submit.
Previous topic Defining the chat window branding Next topic Configuring Pega Knowledge help categories in the web chatbot