Every customer chat that uses Pega Customer Service 8.2 or later first passes through web chatbot interactions as the first resolution path. Therefore, you can configure a Web Chatbot channel in your Pega Customer Service application, style it using self-service configuration, and deploy it in your website. Customers can enter commands in the embedded chat window to perform defined actions such as displaying a menu of commands or creating cases for the application.

To provide a meaningful chatbot conversation experience for your customers, configure the web chatbot behaviour by defininig the chatbot responses to various user inputs and actions along with other channel configurations such as interaction timeout. You can style the chat window based on your branding requirements before deploying it on your website.

Before you begin

Ensure that you created the self-service application. See Step 5: Creating the self-service application.

Procedure

To configure the web chatbot, complete the following tasks:

• Creating the Web Chatbot channel
• Creating a self-service configuration for the Web Chatbot channel
• Deploying theself-service configuration
• Implementing chat window branding

Creating the Web Chatbot channel

Log in to your self-service channel as an administrator to configure the Web Chatbot channel. For more information about how to create the Web Chatbot channel, see Configuring the Web Chatbot channel.

Creating a self-service configuration

A self-service configuration is a wrapper around your Web Chatbot channel using which you can style, download, and deploy the channel on a website. You can customize the Web Chatbot channel's look by adding one or more self-service configurations. You can deploy the same Web Chatbot channel on different websites by using different self-service configurations so that the channel's styles align with the websites. 

Before you Begin

Ensure that you created a Web Chatbot channel. See Configuring the Web Chatbot channel.

To create a self-service configuration for your Web Chatbot channel, follow these steps:

1. Log in to your customerself-service application with your administrator credentials.
2. In the header of Dev Studio, click Launch web interface > Self-Service Configuration Portal.
3. Under the Configure Self-Service section, click Add Self-Service configuration.
4. In the Name field, enter a name for the configuration. 
5. To enable the live chat feature, select the Enable live chatcheck box.
   If the Enable live chat check box is not selected, the Pega Customer Support chat supports only chatbot conversations and does not support escalations to CSRs.
6. In the Channel name list, select the Web Chabot channel that this configuration wraps.
7. In the Memo field, enter a short description for your configuration.
8. Click Submit.

Configuring chat window styles

You can customize the chat window styles to match your website branding.

1. In the Self-Service application, click Launch web interface > Self-Service Configuration Portal.
2. Select the Web Chatbot channel for which you want to update the style, and click the Edit icon.
3. Click the Style tab.
4. Under General settings, configure the following options:
   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. Height: Select the height of the chat launcher tab or button. 
   4. Width: Select the width of the chat launcher tab or button.
   5. Link color: Select the background color for the chat launcher tab or button. 
5. Under Labels, configure the following options:
   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. Under Header, configure the following options:
   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. Under Chat body, configure the following options:
   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.

Deploying the self-service configuration

After you configure the self-service configuration, you must deploy it in your website so that the chat launcher tab or button appears on it allowing customers to chat with the web chatbot or a CSR.

Before you begin

Ensure that you created a Web Chatbot channel. See Configuring the Web Chatbot channel.

1. Log in to your customerself-service application by entering your administrator credentials.
2. In the header of Dev Studio, click Launch web interface > Self-Service Configuration Portal.
3. To create and download the self-service configuration as a .zip archive, click the Download link.
4. Extract the file from the downloaded .zip file archive and copy the resulting folder to your web server.

To test your deployment, open your web browser and enter the webserver path where you deployed the web chatbot.