Setting up the IVA for Web Messaging
Enable users to interact with Pega Intelligent Virtual Assistant™ (IVA) from a chat window that you embed in a webpage. As a result, you give users another method to interact with your application and help to address reported issues more efficiently.
For example, when customers use an embedded chat window of a website to report a missing part for their purchased mobile phone, your chatbot can respond by asking for more details about the issue and automatically starting a service request case in the application. If you define multiple messaging accounts for your Digital Messaging channel, you can also give users an option to switch from the chat window to another messaging platform, such as Facebook Messenger or WhatsApp, for your application.- Configure Digital Messaging channel security settings. For more information, see Configuring Digital Messaging channel security.
- If you do not have an IVA for Digital Messaging, create a Digital Messaging channel. For more information, see Creating a Digital Messaging channel.
- For more information about the available Web Messaging widget features in this release, see the Pega Customer Service Implementation Guide.
If your security team requires JSON Web Token (JWT) authentication for communication between your IVA for Digital Messaging and social messaging platforms, you can configure this alternative security method for your channel. JWT authentication is an industry-standard method that permits the sender to sign a request with a unique token that the receiver later verifies, to ensure that the obtained request is valid and that the token did not expire. For Pega Customer Service 8.6 and higher, JWT is the default authentication method. The system automatically selects the JWT authentication method in the Digital Messaging security configuration in your instance, and in Digital Messaging Service.
- You configure the languages in which the Web Messaging widget can interact with users by defining the list of supported languages in the Digital Messaging channel. For more information, see Creating a Digital Messaging channel.
- After you update Pega Platform or Pega Customer Service, to use the latest Digital Messaging Manager features, save your existing Digital Messaging channel.
For relevant training materials and to test this feature on a virtual Pega instance, see the Configuring Digital Messaging Manager module and the Creating a Digital Messaging interface challenge on Pega Academy.
- In the navigation pane of App Studio, click Channels.
- In the Current channel interfaces section, click the icon that represents your existing Digital Messaging channel.
- In the Digital Messaging channel, click the Connection tab.
- Click Manage connections.
- In the Digital Messaging Manager window, click Add Connection, and then click the Web Messaging icon.
- On the General tab, in the Name field, enter a name for the Web Messaging account.
- In the Appearance section, click the color box, and then select a color theme to display in the chat window.
- In the Chat headings section, in the Language list, select a language for the chat heading.
- In the Chat heading field, enter a heading that the system displays in the chat window.
- Optional: To define a heading in an additional language, click Add chat
heading for another language, and then repeat steps 8 through 9.You can define a heading in additional languages based on the list of supported languages for the Digital Messaging channel.
- Click Save.
Result: The system displays information that the new Web Messaging account was successfully registered. - Configure sound notifications when messages arrive in the chat window:
- In the Sound notifications section, in the Choose when to play list, select Don't Play Sound Notifications, Play On Every Message, or Play Only When Not Visible.
- If you selected to play a sound for every message or only when the chat window is not visible, in the Select sound list, select one of the predefined sounds.
- Optional: To hear the audio of the selected predefined sound, click the Play icon.
When you enable sound notifications for the chat window, website users can also control their sounds directly from the widget menu by clicking an option to Mute or Unmute. - Optional: To display a company logo in the chat window, in the Company logo section, select Display company logo, click Upload, and then select an image to upload.
- Optional: To display the Emoji icon in the chat window, in the
Widget configuration section, select the
Enable emojis picker checkbox.By clicking the Emoji icon during an interaction with the chatbot, users can insert a predefined emoji in the chat message.
- Optional: To display a Powered by Pega footer in the chat window, select the Display Powered by Pega checkbox.
- Optional: To display a typing indicator in the chat window to users before the system sends the chatbot response, select the Display typing indicator checkbox.
- Optional: To hide the chat widget launcher from your webpage, select the
Remove default Widget Launcher checkbox.You can hide the chat widget if you want to replace the default chat bubble with a custom button. You will need to configure a method in your website for the user to start a chat.
- Optional: To let users switch to another supported language in the chat window, select
the Display select language option checkbox.When you enable this option, users can switch between each of the supported languages for the Digital Messaging channel. For more information, see Creating a Digital Messaging channel.
- Optional: To display bot and CSR avatars in the chat window:
- Select the Display avatars in the chat widget checkbox.
- In the Bot avatar type section, click Default or Custom.
- In the CSR avatar type section, click Default or Custom.
- If you selected a custom bot avatar type, click Upload bot avatar image, select an image file from your local drive, and then click Open.
- If you selected a custom CSR avatar type, click Upload CSR avatar image, select an image file from your local drive, and then click Open.
The system supports the following image file types for bot and CSR avatars:PNG
,JPG
, andJPEG
. The uploaded avatar image must have same width and height, and cannot exceed 500 KB. - Optional: Configure the widget position and button type on the webpage:
- In the Widget position list, select the position on the webpage where you want to display the widget.
- In the Widget button type list, select the button type for the widget.
- If you select a text button type, in the Text orientation list, select the text orientation.
- If you select a text button type, in the Button text field, enter a label for the button, and then click Save.
The system updates the widget button type and text orientation on the webpage immediately after you save changes.For example: The following figure shows sample configuration settings for Web Messaging:
The configuration settings for Web Messaging - Optional: To use your own font in the chat window:
- In the Custom fonts for widget section, click Upload font file.
- Select a font file from your local drive, and then click Open.
- To upload additional fonts for the chat window, repeat steps 21.a through 21.b.
The system supports the following font file types:TTF
,OTF
,WOFF
, andWOFF2
. If you upload multiple font files, the browser displays the first supported font in the list for the chat window. - Optional: To configure a list of additional channels that users can switch to from the
chat window:
- Click the Channel switching tab.
- In the Channel switching control placement section, click Top right menu or Visible in header to configure where the system displays the option to switch channels.
- Click Add channel, and then in the Add
channel window, in the Channel
list, select a channel.
For example: Select Facebook. - In the Connections section, click the name of your configured channel account, and then click Submit.
- Add more channels by repeating steps 22.c through 22.d.
- Optional: To configure the chat context data to display to CSRs when they interact with
users:
- Click the Context data tab.
- In the General information section, select the
context data to capture during interaction with a user:
Context data Description IP address The IP address of the browser session. Location The physical location based on their browser settings. Browser/device The web browser and device type. Current page The webpage from which the user launched the chat window. - Click Save.
- In the Tags section, in the Display
Name field and the Tag field,
define the tags to add to your website, and then click
Add.Use tags to capture custom context data during an interaction with a user so that the system passes this information to a CSR. Custom tags require additional implementation on your website.
- Optional: To add more tags, repeat step 23.d.
- Optional: To configure security options for the Web Messaging widget:
- Click the Security tab.
- In the Allowed domains section, in the
New domain field, enter a domain in which the
system can display the Web Messaging widget, and then click
Add.
Note: If you do not specify any domains, the widget is rendered on any website. - Optional: To add more domains to the list, repeat step 24.b.
- In the Allowed cookies section, in the New cookie field, enter a cookie name that the system allows to pass information between your website and your application.
- Optional: To add more cookies to the list, repeat step 24.d.
- Optional: To sign requests while exchanging private data, in the JWT
Secret section, click Show JWT
Secret, and then copy the displayed identification code
to the clipboard or a file.You can then use the identification code to authorize requests when you exchange private data.
- Optional: To configure proactive chat capability, set up chat triggers for the Web
Messaging widget and embed them on your website as JavaScript code
snippets.With proactive chat your chatbot can engage with users in the Web Messaging chat window by automatically inviting them to a chat conversation based on configured rules and conditions. For more information, see Configuring proactive chat for Web Messaging.
- Click the Installation tab, and then copy to clipboard or a text file the displayed script code for your Web Messaging widget.
</body>
tag.Previous topic Setting up the IVA for Twitter Next topic Embedding the Web Messaging widget in a native Pega Platform application