Skip to main content
LinkedIn
Copied!

Table of Contents

Legacy Webchat

Version:

Only available versions of this content are shown in the dropdown

Legacy Webchat (formerly called Pega Chat) also enables the customers to initiate the conversation with a bot or a CSR. When customers come in with a service request, the Legacy Webchat offers them various self-service options, including proactive chat, self-service cases, and knowledge articles. If the bot fails to serve the customers, they can escalate to CSRs. Based on the customers request the routing engine routes the customers to the right CSR. Legacy Webchat offers synchronous communication.

Pega Customer Service's self-service application provides a sample Legacy Webchat interface that can help you get started quickly with the configuration. The sample Legacy Webchat interface lets you add a custom self-service configuration in the channel to implement styling and additional self-service options in the chat window. Using the self-self service configurations, you can customize the chat window to suit your organization's branding requirements, enable proactive notifications, and configure relevant knowledge articles that the customers can see before interacting with the bot.

Customers with prior implementation may want to leverage Legacy Webchat. However, Legacy Webchat doesn't support the Channel switching feature, and hence the end-user cannot switch to private messaging channels.

Configuring the Legacy Webchat server

The Legacy Webchat server processes chat messages between the chat widget that is deployed on your webpages and your Pega Customer Service application. When you buy a license that includes the Pega Chat offering for Pega Customer Service 8.2 or later, a Pega Cloud Collaboration Services Legacy Webchat server account is provisioned for you. The authorized contact for your organization's Pega account receives an email that includes a private API key and the chat server hostname of your provisioned chat server account. The Pega Cloud Collaboration Services Legacy Webchat server's hostname depends on the geographical region (for example, for the USA, it is https://us.chat.pega.com). Check with your organization's Pega account contact that a Pega Cloud Collaboration Service chat server account is provisioned for you.

Configure the Legacy Webchat server by performing the following steps:

  1. In the navigation pane of App Studio, click Settings Chat and messaging

  2. In the list of chat and messaging settings, click Chat and messaging configuration.

  3. In the Legacy Webchat serversection, configure the following fields:

    1. In the Chat server hostname field, enter the host name of the chat server that has been provisioned to you. The host name depends on the geographical region of the chat server:

      • For the APAC region, the host name is au.chat.pega.com
      • For the EU, the host name is eu.chat.pega.com
      • For North America, the host name is us.chat.pega.com
    2. In the Configuration protocol list, select https.

    3. In the Port field, enter 443.

    4. In the Server configuration key field, enter the private API key of your provisioned chat server account.

      You receive the server configuration key in an email to your operational contact.
    5. To ensure that Pega Customer Service connects with the chat server, click Verify Key.

      If you have entered a chat server URL and verified the server configuration key, the Interaction Portal header displays the Chat routing icon.
  4. Click Save.

Creating a Legacy Webchat interface

Create a Legacy Webchat interface that allows you to add the template operator ID, by performing the following steps.

  1. Log in to the Self-Service application with the administrator credentials.

  2. In the navigation pane of App Studio, click Channels.

  3. On the Channels landing page, in the Create new channel interface section, click Legacy Webchat.

  4. On the New Legacy Webchat interface page, on the Configuration tab, in the Details section, enter the channel interface name and a meaningful description for your Legacy Webchat interface.

    Description is an optional field.
  5. On the Channel tab, in the Template operator ID list, click the name of an existing self-service operator to use as the template to create end user accounts.

    The application uses this operator as a template to create all further accounts for end user interactions with the channel. Each account has a unique channel identifier set as its ID. For information about access groups in Pega Customer Service, see Creating a self-service application.
  6. Click Save to create the Legacy Webchat interface.

Adding a self-service configuration for a Legacy Webchat interface

After enabling the Legacy Webchat interface and setting up its behavior you can add Self-Service configurations where you can configure the chatbot.

  1. Log in to the Self-Service application with the administrator credentials.

  2. In the navigation pane of App Studio, click Channels.

  3. On the Channels landing page, in the Current channel interfaces section, click the name of the channel to create a self-service configuration for a Legacy Webchat channel.

  4. On the Legacy Webchat interface page of the channel, click the Self-Service Configuration tab.

  5. Click Add self-service configuration.

  6. Enter a name for the self-service configuration, click Add. The system displays the newly-created self-service configuration on the left-side.

  7. Click Save.

Enabling live chat and transcript download options

Make sure you have configured the Legacy Webchat server to enable the live chat.
  1. On the Self-Service Configuration tab of your Legacy Webchat interface, select the desired self-service configuration.

  2. On the General tab of your self-service configuration, select the Enable live chat check box to enable the live chat.

  3. To enable the download transcript option in the chatbot, select the Enable transcript download check box.

  4. To delete the self-service configuration, click Delete.

Implementing end-user chat window branding

Configure the appearance of the Legacy Webchat bot button, dimensions of the end-user chat window, color and font for the chat window, and the header to reflect your website's theme.

  1. Log in to the Self-Service application with the administrator credentials.

  2. In the navigation pane of App Studio, click Channels.

  3. In the Current channel interfaces section, click the name of the channel to edit the self-service configuration of a Legacy Webchat channel.

  4. On the Legacy Webchat interface page of the channel, click the Self-Service Configuration tab.

  5. On the Appearance tab, select a configuration from the list to edit the styles of a self-service configuration.

    As you configure the styles, the chat window on the right shows a live preview of your settings.
  6. In the Chat header field, enter a text to configure the name that appears in the header of the chat window.

  7. To display an image on the left side of the chat header text, for example, your company logo, click Upload and then select an image.

    Images that you upload are resized to 30 by 30 pixels.
  8. In the Launcher section, select either Tab or Button to select the type of chat window launcher on the website.

  9. In the Help tab/button text field, enter the text you want to display on the help launcher tab or button.

    Need help?
  10. To allow end-users to change the size of their chat text, select the Enable font resizing check box.

    End-users can see three 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.
  11. Configure the default dimensions of the chat window, such as height, width, and height of the chat window in compact mode in the Dimensions section.

  12. Configure the Font family, Link color, Header text color, Header background color, Bot or Agent Settings, and Customer Settings for the end-user chat window, end-user interactions, and the bot or agent interactions in the Colors and fonts section, and then click Submit.

Deploying the chatbot

After you configure the chatbot with end-user chat window branding, Pega knowledge help categories, and proactive notifications, download the file and deploy the chatbot onto a supported web server.

  1. Log in to the Self-Service application with the administrator credentials.

  2. In the navigation pane of App Studio, click Channels.

  3. In the Current channel interfaces section, click the name of the channel to edit the self-service configuration of a Legacy Webchat channel.

  4. On the Legacy Webchat interface page of the channel, click the Self-Service Configuration tab.

  5. Select a configuration from the list, and then click the Download tab.

  6. To change the default Pega application URL used by the self-service configuration, click the edit icon next to the URL.

  7. To create and download the Legacy Webchat as a ZIP file archive, click the Download link.

  8. 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 web server path to where you deployed the Legacy Webchat.
    http://example.com/webchatbot

Configuring proactive chat

Configure proactive chat so that the chatbot on your website initiates a conversation with the customer, rather than waiting for the customer to request assistance. Based on your business requirements, you can define the logic that decides when to initiate a proactive chat. Pega Customer Service provides a set of JavaScript APIs to support the proactive chat feature from your website.

Use the JavaScript APIs to add proactive chat to your website. For more information about the JavaScript APIs, see APIs to support proactive chat
  1. In the navigation pane of App Studio, click Settings Chat and messaging .

  2. In the list of chat and messaging settings, click Chat and messaging configuration.

  3. To prevent the proactive chat feature from inviting a customer to a chat session when the wait time is longer than a specified number of seconds, enter the number of seconds in the Allow proactive chat when wait time is less than (seconds) field.

    If you enter 120, the system calculates the overall wait time of the queue and compares it with the value that you have entered in this field. The system presents the proactive chat window to the customer if the overall wait time for the queue is less than 120 seconds. Otherwise, the system does not present the proactive chat to the customer.
  4. Click Save.

APIs to support proactive chat

Pega Customer Service provides a set of JavaScript APIs to support the proactive chat feature. These APIs offer a proactive chat to the customer and enable the customer to accept or decline the offered proactive chat.

After the customer accepts the offered chat, the system connects the customer to a CSR available in the queue defined in the proactive chat API. As a best practice, you do not need to configure a queue questionnaire with queues mentioned in the proactive chat API. Instead, you can pass the required information through metadata defined in the proactive chat API.

To configure proactive chat, you must set the wait time in App Studio. For more information about how to set the wait time in App Studio, see Configuring proactive chat.

pega.chat.proactiveChat.offer(queuename, metadata, bDefault)

Offers the proactive chat to the customer by launching the proactive chat window on the customer web page.

Syntax
pega.chat.proactiveChat.offer(queuename, metadata, bDefualt);

Parameters

Parameter name Description
queuename This is a string that specifies the name of a queue where you want to route the chat.
metadata This is a JS Object with the following key values: {“Page Name”: “Bill Payment”, “Time spent on page” : “5 mins”}

This activity should return an HTML stream that displays in the CSR’s chat window.

bDefaultUI This is a boolean value that can be set to true to use the default user interface for a proactive chat. Otherwise, it is false. The default value is true/false.
Return value: N/A

pega.chat.proactiveChat.accept()

Initiates the chat flow and allows the customer to accept the proactive chat offer.

Syntax
pega.chat.proactiveChat.accept();
Parameters: N/A
Return value: N/A

pega.chat.proactiveChat.decline()

Does not initiate the chat flow. If the customer declines the offered proactive chat, dismisses the chat pop-up.

Syntax
pega.chat.proactiveChat.decline();
Parameters: N/A
Return value: N/A
Suggest Edit
Did you find this content helpful?

Have a question? Get answers now.

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

Ready to crush complexity?

Experience the benefits of Pega Community when you log in.

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

Pega Community has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice
Contact us