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 web page. 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.
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, in the Chat heading field, enter a heading that the system displays in the chat window.
- Click the color box, and then select a color theme to display in the chat window.
- In the Display message field, enter an initial message to display to the user in the chat window.
- Click Save.
For example: The following figure shows sample configuration settings for Web Messaging:
The configuration settings for Web Messaging 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.
- 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 bot and CSR avatars in the chat window:
- Select the Display avatars in the chat widget check box.
- 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. - 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 configure additional custom fonts for the chat window, repeat steps 15.a through 15.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 16.c through 16.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.
For example: To capture a IP address, browser, and device type of a user, select IP address and Browser/device. - 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 17.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 18.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 18.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.
- 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 Setting up the IVA for WhatsApp