Skip to main content


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

Legacy Webchat

Updated on April 1, 2022

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.

Note: Legacy Webchat has been replaced with the Web Messaging channel from Digital Messaging. Legacy Webchat was deprecated in 8.6 and de-supported in 8.7. Legacy Webchat is not supported for 8.7 and has not been tested. To learn how to migrate to Web Messaging, see Migrating from Legacy Webchat to Web Messaging.
Pega Customer Service Implementation Guide Pega Customer Service Implementation Guide Pega Customer Service Implementation Guide Pega Customer Service Implementation Guide Pega Customer Service Implementation Guide Pega Customer Service Implementation Guide Pega Customer Service Implementation Guide Pega Customer Service Implementation Guide Pega Customer Service Implementation Guide Pega Customer Service Implementation Guide Pega Customer Service Implementation Guide Pega Customer Service Implementation Guide Pega Customer Service Implementation Guide
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 SettingsChat 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.
      Note: 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.
    Note: 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.
    Note: Once you have created the Legacy Webchat interface, now configure the chatbot. For more information, see Configuring a chatbot.

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.

Proactive notifications for Legacy Webchat

Configure proactive notifications in your self-service configuration so that you can send relevant information, offers, and service cases to your customers proactively, based on their account profile. If you enable proactive notifications, Pega Customer Service interacts with Customer Decision Hub (CDH) when a customer visits your website, to predict the customer's needs and offer bot-enabled assistance. In this way, proactive notifications can save the customer's time and make the work of the customer service representatives (CSRs) more efficient.

For example, if a customer whose bill has increased by USD 25 in the current month logs in to your website, one possible reason is that they want to check their billing history. If CDH determines that a notification should be sent to the customer, the Legacy Webchat window slides open with a relevant message and links to either make a billing inquiry or close the notification. You can also configure the notification window to minimize after a specified amount of time if the customer ignores it.

Configuring proactive notifications for Legacy Webchat

Configure the proactive notifications for Legacy Webchat 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. 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 Proactive tab.
  6. To enable proactive notifications, select the Enable proactive notifications check box.
  7. To use CDH to generate proactive notifications instead of the default Pega Customer Service functionality, in the Proactive service URL field, enter the URL of the CDH application that is integrated with the Pega Customer Service application instance.
    The response to the REST call made to the URL should contain the following parameters in the .RankedResults() page:
    • ClassName
    • Greeting
    • Reason
    • AcceptText
    • DeclineText
    In the PegaHelper.js file of the Legacy Webchat, the setDynamicChatGadgetParams( ) function uses these values to render the proactive notifications display.
  8. To minimize the notification window after a specified time if the customer ignores it, select the Enable Minimizing check box.
  9. In the Minimize window after field, enter a number of seconds after which to minimize the notification window.

Enabling live chat and transcript download options

Before you begin: 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.
    For example: Need help?
  10. To allow end-users to change the size of their chat text, select the Enable font resizing check box.
    Result: 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.
    For example: 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.

Before you begin: 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 SettingsChat 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.
    For example: 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.

Note: 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 nameDescription
queuenameThis is a string that specifies the name of a queue where you want to route the chat.
metadataThis 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.

bDefaultUIThis 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

Cross-Site Request Forgery (CSRF)

Cross-Site Request Forgery (CSRF), also known as an XSRF or a sea surf, is a web security attack in which an intruder tricks customers to perform certain malicious activities on their web applications where they are currently authenticated. When you enable the CSRF token check in the Pega Customer Service application Dev Studio, the system defends activities and streams from the CSRF attack.

CSRF Settings for chat-specific activities and streams

Enabling CSRF Settings prevents unwanted attacks on customer web applications. In the following use case, the system performs the CSRF check on all activities and streams except chat-specific activities and streams.

  1. In the header of Dev Studio, click ConfigureSystemSettingsCross-Site Request Forgery.
    Result: The system opens the Cross-Site Request Forgery page.
  2. In the Cross-Site Request Forgery (CSRF) Settings section, select the Enable CSRF token check radio button.
    Result: The system displays the Secure section with the following two options:
    • All activities & streams: Secures all activities and streams except the specified activities.
    • Specific activities & streams: Secures only specific activities and streams and allows the rest.
    Note: Enabling the CSRF check doesn’t allow the chatbot to load on a web page.
  3. To exclude CSRF check on the chat-specific activities and streams, perform the following tasks:
    1. In the Secure section, select All activities & streams.
    2. In the Allowed Activities field, enter the following activities to exclude them from the CSRF check:
      • SetChatParams
      • GetCoBrowseConfigurations
      • czInvokeRouting
      • czUpdateConversationOnChatClosure
      • ToasterPopForChat

    3. In the Allowed Streams field, enter the ProcessChatAPI stream to exclude the stream from the CSRF check.
  4. In the Referrer Settings section, perform the following steps:
    1. To enable referrer check, select the Enable referrer check check box.
      Note:
      • When you select the Enable referrer check option, the system white lists the specified referrer URLs from the CSRF check.
    2. In the Allowed referrers field, enter the following URLs:
      • https://pegafpssdev.pg.com
      • https://pegafpsschatdev.pg.com
  5. To save the changes, click Submit.

Custom data for Legacy Webchat

When a customer opens the bot, the bot captures the necessary details to identify the customers and associate the conversation with the corresponding account.

The PegaHelperExtension.js file captures the following information from the website to pass on to the Pega Customer Service application by default:

  • pegaAParamObj.ContactId
  • pegaAParamObj.AccountNumber
  • pegaAParamObj.username
  • pegaAParamObj.CustomerURL
  • pegaAParamObj.Language
Sometimes you need to capture different or additional customer information depending on your organization needs. For example, if you are an insurance organization and the customers use their policy number to sign in to the website for chats, the PegaHelperExtension.js can be modified to capture the customer's policy number instead of the contact ID. To customize the data that the bot captures, follow these steps:
  1. In the downloaded self-service configuration folder of your bot channel, open the PegaHelperExtension.JS file.
  2. In the preparePegaAParams function, add the new key-value pairs.
    For example: pegaAParamObj.policyId = “123456789”
  3. In the Work-Channel-Chat class, create a new property to hold that value.
  4. In the Work-Channel-Chat class of your self-service application, update the pyDefault data transform to set .myServer to param.myParam.
  5. Copy the value set in the SetContactContextWebChatBot data transform to copy to the pyInteractionCase page.
    pyInteractionCase page is the context of the bot interaction.
  6. To set the properties from pyInteractionCase to the chatinteraction page, which is used while routing the request, use the cyInvokeRoutingExtn data transform.
Result: When the customer escalates the bot interaction to a CSR, the ToasterPopForChat activity copies the items from the chatinteraction page to the CSR side chat interaction page.

Tags

Pega Customer Service 8.7 Pega Customer Service for Communications 8.7 Pega Customer Service for Financial Services 8.7 Pega Customer Service for Healthcare 8.7 Pega Customer Service for Insurance 8.7

Have a question? Get answers now.

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

Visit the Support Center

Did you find this content helpful?

Yes
No

Want to help us improve this content?
Suggest an edit

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