Pega Co-Browse

IMPLEMENTATION GUIDE
7.4
 © Copyright 2018
Pegasystems Inc., Cambridge, MA
All rights reserved.

Trademarks

For Pegasystems Inc. trademarks and registered trademarks, all rights reserved. Other brand or product names
are trademarks of their respective holders.

For information about the third-party software that is delivered with the product, refer to the third-party license
file on your installation media that is specific to your release.
Notices

This publication describes and/or represents products and services of Pegasystems Inc. It may contain trade
secrets and proprietary information that are protected by various federal, state, and international laws, and
distributed under licenses restricting their use, copying, modification, distribution, or transmittal in any form
without prior written authorization of Pegasystems Inc.

This publication is current as of the date of publication only. Changes to the publication may be made from
time to time at the discretion of Pegasystems Inc. This publication remains the property of Pegasystems Inc.
and must be returned to it upon request. This publication does not imply any commitment to offer or deliver
the products or services described herein.

This publication may include references to Pegasystems Inc. product features that have not been licensed by
you or your company. If you have questions about whether a particular capability is included in your
installation, please consult your Pegasystems Inc. services consultant.

Although Pegasystems Inc. strives for accuracy in its publications, any publication may contain inaccuracies or
typographical errors, as well as technical inaccuracies. Pegasystems Inc. may make improvements and/or
changes to the publication at any time.

Any references in this publication to non-Pegasystems websites are provided for convenience only and do not
serve as an endorsement of these websites. The materials at these websites are not part of the material for
Pegasystems products, and use of those websites is at your own risk.

Information concerning non-Pegasystems products was obtained from the suppliers of those products, their
publications, or other publicly available sources. Address questions about non-Pegasystems products to the
suppliers of those products.

This publication may contain examples used in daily business operations that include the names of people,
companies, products, and other third-party publications. Such examples are fictitious and any similarity to the
names or other data used by an actual business enterprise or individual is coincidental.

This information is the property of:

Pegasystems Inc.
One Rogers Street
Cambridge, MA 02142-1209
USA
Phone: (617) 374-9600
Fax: (617) 374-9620
www.pega.com

Document: Pega Co-Browse Implementation Guide

Software Version: 7.4

Updated: April 2018

 CONTENTS
Introduction ....................................................................................................... 1
Product description ........................................................................................ 1
Use cases and methods ................................................................................ 1
Browser support ............................................................................................ 2
Architecture ................................................................................................... 2

Configuring Pega Co-Browse ........................................................................... 3

Getting started ............................................................................................... 3
Configuring account and creating a sample web page .................................. 3
Testing Your Configuration ............................................................................ 4
Pega 7 Co-Browse Configuration .................................................................. 5
Obtaining the Co-Browse API Key and Token ............................................... 5
Configuring the Pega platform for Pega Co-Browse ....................................... 5
Configuring the Pega Customer Service application for co-browsing ............. 6
Configuring Pega Chat for integration with Pega Co-Browse ......................... 6
Configuring the directed Pega Co-Browse link ............................................... 6
Enabling Pega Co-Browse remote control settings………………………..…….7
Adding disclaimer text about Document Object Model recording ................... 7
Enabling recording of a Co-Browse session…………………………… ….…….7
Viewing recording of co-browse sessions .…………………………… ………...8
Optional: Branding the customer window …..…………………….…… ……….8
Configuring sub-domain co-browse .…………..………………….…… …….....9
Adding or modifying a language pack ……………..…………….………….…..9
Masking and hiding data .............................................................................. 10
Customizing the user experience ................................................................. 11
Basic Troubleshooting ................................................................................. 12

API .................................................................................................................... 13

Pega Co-Browse Implementation Guide i

 Introduction

Product description
By using Pega Co-Browse, a customer service representative can connect to customers'
browsers and show them sections of the website by highlighting different elements of the web
page. The customer service representative can also click links or fill out forms remotely without
additional plug-ins or software.

Pega Co-Browse is similar to screen sharing but is different in the following ways:

 It does not require a download, installation, or plugin.

 The presenter shares only the web page.
 It is supported across platforms (Mac, PC, iPhone, iPad, and Android).

Use cases and methods

Pega Co-Browse has several use cases.

 Traditional – A customer service representative can see what the customers see on their
screen, allowing quick resolution to the problem, promote self-service usage, and reduces
handle time.

 Customer to Customer – Individuals can share his or her browser session with another
individuals. This type of session is initiated from a single-use directed link that establishes
the co-browsing session.

Pega Co-Browse is supported in stand-alone mode as well as within a Pega 7 application.

Pega Co-Browse can be installed on premises or within the Pega Cloud.

A presenter can start a session using any of the following methods:

 A button or link in a Pega 7 application

 A Pega Chat window
 A single-use directed link that they receive from the CSR via any supported channel,
including email.

Note: This document assumes that the Pega Co-Browse account setup is cloud-based. For
more information, see Pega On-Premises Co-Browse Server Installation Guide on the PDN.

Pega Co-Browse Implementation Guide 1

 Browser support
Pega Co-Browse supports Internet Explorer 11, Microsoft Edge, Firefox, Safari, and Google Chrome.

Note: Pega does not support Internet Explorer 11 compatibility mode.

Architecture

Pega Co-Browse Implementation Guide 2

 Configuring Pega Co-Browse

Note: The following section applies to customers who use stand-alone Pega Co-Browse.

Getting started
1. Create a Pega Co-Browse account. The co-browse provision email contains a link to
create a new account. You receive an email that contains a link to set up your account.
The subject line of this email is “The Pega Co-Browse instance has been provisioned for
<XYZ company>”.
2. Build a sample web page, and then insert the Pega Co-Browse JavaScript snippet.

Configuring account and creating a sample web page

1. Log in to the Pega Co-Browse application by entering you administrator credentials.
2. On the Customize tab, in the Display options section, select of the activation mode.
• Button – With this mode the presenter starts a Co-Browse session by clicking a
Support button on the left side of the web page. This is the default mode.
• Stealth – With the mode the presenter starts a session by typing Ctrl+Enter.
Note: To use Pega Co-Browse with Pega Chat, you must select this mode.
• API - With this mode the presenter starts a Co-Browse session using a custom
method that is defined using JavaScript and the Co-Browse API. For example,
starting a session from a custom button.
You can change these modes anytime that you want.
3. On the Install tab, copy the JavaScript snippet excluding the script tags.

Pega Co-Browse Implementation Guide 3

 4. Create a sample web page with minimal HTML.
5. Insert the copied JavaScript snippet into the <HEAD> tag of your sample web page, and then
refresh your web page.

Testing Configuration
1. Log in to your Pega Co-Browse account at http://www.usefirefly.com/sessions/new.
2. Open your sample website in another browser.
3. Initiate the Co-Browsing session based on your activation mode: Stealth, Button, or API.
4. On the Co-Browse menu, in the Start a co-browse session, enter the activation code, and then
click Start Co-Browse.

Pega Co-Browse Implementation Guide 4

 Note: The following section applies to customers who use Pega Co-Browse with any Pega
application.

Configuring Pega Co-Browse

Obtain the Co-Browse API key and token to configure Pega Co-Browse to use with either
the Pega Platform or the Pega Customer Service.

1. Log in to the Pega Co-Browse application by entering your administrator credentials.

2. Click My Account > API.
3. Copy the API key.
The API key and token uniquely identifies a customer that want to establish a co-browse session
with a customer service representative.
4. On the Install tab and then copy the fireflyAPI.token value.

Configuring the Pega Platform to use Pega Co-Browse

The Pega Platform provides a pyCobrowseSession section to embed in your application.

Adding this section to your Pega application provides co-browsing capabilities without the
need to separately log in to the Co- Browse account.

1. Insert the pyCobrowseSession section in your application section rule.

2. Configure the parameters of this section to pass in the API key.
3. Save your section rule.

Pega Co-Browse Implementation Guide 5

 Configuring the Pega Customer Service application for co-browsing
Pega Co-Browse is enabled by default in the Pega Customer Service application. You must
configure the Pega Co-Browse settings for the Pega Customer Service application. Pega Co-
Browse configuration has moved to Pega Express. If you have licensed Pega Co-Browse
and have an API key, use Pega Express to setup Co-Browse.

1. In Designer Studio, to switch to express mode, click the Switch to Express mode icon at the
bottom of the Explorer panel.
2. In the Explorer panel, click Settings > Behaviors.
3. Select the Enable Co-Browse check box. The Co-Browse token and Co-Browse API key fields
are auto populated.
4. Optional: To record the Co-Browse sessions, select the Enable Co-Browse Recording.

Testing the configuration:

1. Log in to the Interaction Portal.
2. Select New > Demo Pop-CONNOR.
3. Click Accept the Call > Click Add Task.
4. Under General, select Co-Browsing Session > Add Task.
5. In a second browser session, open your sample web page.
6. Click Support (or use whichever activation method you have selected), and copy the Session
code.
7. Return to the Interaction portal, in the session code field, paste the session code, and then
click Submit.
8. Wrap up the session by selecting Co-Browsing Session as the reason for the interaction.

Configuring Pega Chat for integration with Pega Co-Browse

A Pega Co-Browse session from a Pega Chat window is supported only in Stealth mode.

When configuring web pages to use Pega Chat, the JavaScript snippet that enables chat on the
web page must identify the Co-Browse API key, and it must provide instructions for connecting
the chat session to the appropriate chat queue.

For more information, see the Pega Chat implementation chapter in the Pega Customer Service
Implementation Guide on the Pega Customer Service product page.

Configuring the directed Pega Co-Browse link

To send an email, chat message, or text message that contains a one-use link to a Pega Co-
Browse session, configure a directed Pega Co-Browse interaction.

1. Obtain the API key and token, see Obtaining the Co-Browse API Key and Token.
2. Configure the pyCobrowseSession section, see Configuring the Pega 7 Platform for Pega Co-
Browse.
3. Configure the Co-Browse Destination links in co-browsing destinations data table.

Pega Co-Browse Implementation Guide 6

 4. Configure the email account as you would for any Pega 7 Platform application. To configure
email, see Email Account Form.

Test the configuration

1. Initiate a Pega Co-Browse session service process to assist a customer.
2. Click Other actions, and the select Send Destination URL.
3. Enter the customer email address in the provided field, and then click Submit.
The Customer Service application sends an email to customer with a link including the auto-
generated session code.
4. Click the link in the email.
5. Click Submit to initiate a Pega Co-Browse session.

Enabling Pega Co-Browse remote control settings

During a Pega Co-Browse session, a customer service representative can remotely control a
customer webpage only when the remote control setting is set to Yes. Either a customer or a
customer service representative can end a Co-Browse session.
1. Log in to the application using your customer service representative credentials.
2. Click the Customize tab, and then under the Remote Control option, select Yes.
3. Click Save.
The customer and the customer service representative both view same web page
collaborating online. The customer service representative guide the customer visually to
perform an activity on the webpage.

Adding disclaimer text about Document Object Model recording

With Pega Co-Browse you can enable or disable a legal disclaimer to be visible before starting
DOM recording of a Co-Browse session. Document Object Model (DOM) is a logical tree
structure made of many nodes, wherein each node stores one of the elements of XML
structure.

1. Log in to Pega Co-Browse using your customer service representative credentials.

2. Click the Customize tab, and then expand Advanced Settings.
3. Under the Do you want to add disclaimer text? label, select Yes to make the disclaimer visible.
4. Click Save.

Enabling recording of a co-browse session

With Pega Co-Browse you can record a Co-Browse session. This recording captures any
screen changes, highlighting annotations and the placement of customer and CSR cursors.

1. Log in to Pega Co-Browse using your customer service representative credentials.

2. Click the Customize tab,

Pega Co-Browse Implementation Guide 7

 3. To record the session, in the Co-Browse recording section, click Yes.
4. Click Save.
Note: Before recording a session, ensure that you provide a disclaimer. For more information
about disclaimer, see Adding disclaimer text about Document Object Model recording.

Viewing recording of co-browse sessions

With Pega Co-Browse you can view recordings of a Co-Browse session. This recording
captures any screen changes, highlighting annotations and the placement of customer and
CSR cursors.
1. Log in to Pega Co-Browse using your CSR credentials.
2. Click the Recordings tab.
3. To play the recording, in the Play column, click the recording that want to view.
4. Optional: To download the recording, in the Download column, click the recording that you want
to download.

Note: To record and view the recorded co-browse sessions, recording must be enabled on the
Pega Co-Browse server. For more information, see Enabling recording of a Co-Browse session.

Optional: Branding the customer window

In the Pega Co-Browse application, administrators can customize the appearance of elements
such as the header and body of the customer widget, location of the widget, and the text
messages that you want customers to view. By default, each field contains suggested values,
you can modify these fields to meet your business requirements.

1. Log in to the Pega Co-Browse application by entering your administrator credentials.

2. Click the Customize tab.
3. Expand Advanced Settings, expand the sections that you want to modify, and then modify the fields
as per your business requirements.
4. Click Save.

Configuring third-party co-browse

Customer support representatives can co-browse third-party websites and perform tasks such
as e-signing a loan document. The third-party that provides the content and the source site
must embed the JavaScript snippet in the web pages where you want to co-browse.
Note: Masking of fields from the partner site is not supported within iFrames.

1. Log in to the Pega Co-Browse application by entering your administrator credentials.

2. To share the JavaScript snippet with your client, click the Install tab, and then copy the
code except for the script tags
3. Click the Customize tab, and then expand Advanced Settings.

Pega Co-Browse Implementation Guide 8

 4. In the Enable Safe mode field, select Yes. You keep safe mode activated to prevent security attack
such as XSS.
5. In the Cross-Domain iFrame whitelist field, perform the following steps:
a. To co-browse domains, enter domain names each separated by a comma, for example
example.com, pdn.pega.com.
b. To co-browse all domains, enter *.
c. To deny co-browsing any third-party web page, leave the field empty.
d. To enable and control third-party iFrames while co-browsing, click Yes.
e. Complete the fields in the Widget Text section.
4. Click Save.

Configuring sub-domain co-browse

By default, customer support representatives can co-browse only the web page that has
JavaScript snippet embedded. To make customer support representatives to co-browse sub-
domains of a website, enter the domain name in the Co-Browsing Sub-domain(s) field. You
can co-browse across all sub-domains of the same company within a single co-browse
session. For example, if you are viewing the content of the website www.example.com, then
you can also view the content on sub-domain www.my.example.com.
1. Log in to the Pega Co-Browse application by entering your administrator credentials.
2. Click the Customize tab, and then expand Advanced Settings.
3. In the Co-Browsing Sub-domain(s) field, enter the domain name, for example, example.com.

Note: Enter only the domain name, not the full URL, for example, example.com not
www.example.com.
4. Click Save.

Adding or modifying a language pack

You can localize the Co-Browse text and prompts so that you see information in your local
language. Information on the Customer Service Representative (CSR) website can be
localized in English, French, German, Portuguese, Italian, and Spanish. Information on the
customer website can be localized in the same languages as the CSR in addition to Swedish.

Localizing CSR side webpages

1. Log in to Pega Co-Browse http://usefirefly.com/admin/languageupload with your Administrator

credentials.
2. In the Language list, click the language that you want.
3. In the Name field, enter the name of the language (for example, French language).
4. In the Description field, enter any value, (for example, Francois).
5. To upload the language you have selected, in the Upload Language section, click Choose File,
and select the relevant file (for example, Co-Browse> Language-Packs > French > Co-
Browse.xml), and then click Open.
6. Click Save.
7. Log in to Pega Co-Browse as a CSR.

Pega Co-Browse Implementation Guide 9

 8. On the Customize tab, in the Preferred Language list, click the language you have selected
earlier (for example, French language).
9. Click Save, and refresh the browser.

Localizing Customer side webpages

1. Log in to Pega Co-Browse.

2. Click the Install tab, and then copy the code except for the script tags.
3. In a separate tab, open the website that you want to Co-Browse, right click on the website, and
then click Inspect.
4. On the Console tab, paste the script.
5. Append fireflyChatAPI.assetHostUrl="https://firefly.com"; with firelfyAPI.language='fr', and then
press Enter.

Masking and hiding data

Pega Co-Browse simplifies data masking and data hiding functionality. Business users can
directly mask and hide data through a visual approach instead of any changes required in code.

Data masking is the process of replacing sensitive information with special characters that cannot
be misused. Data hiding is the process that hides data from viewers.

1. Log in to Pega Co-Browse using your Administrator credentials.

2. Click the Install tab, and then copy the code except for the script tags.
If you have added the JavaScript Co-Browse snippet earlier, skip step 3.
3. In a separate tab, open the website that you want to Co-Browse, right click on the website, and
then click Inspect.
4. On the Console tab, insert the JavaScript into the <HEAD> tag on your web pages where you
want to enable Co-Browse, and then press Enter.
5. Click the open web page, and the press Ctrl+Alt+Enter.
The Co-Browse login dialog box opens.
6. Enter your Email address and Password, and then click Login.
A panel with Settings and Summary tabs is displayed.
7. Select one or more elements on the webpage, and then click the Settings tab to complete the
following steps:
a. In the What would you like to name this? field, enter the name you would like to have
(for example, Header Masking).
b. In the Privacy options group, select Mask to mask the data or select Hide to hide the
data.
c. In the Privacy criteria group, select This element if you have selected only a single field,
otherwise select All similar elements.

Pega Co-Browse Implementation Guide 10

 d. In the Privacy settings applies on group, select This page to apply data masking only on
this page, otherwise select All pages.
e. Click Add.
f. Optional: Click Preview to see how a CSR views masked or hidden fields.
g. On the Summary tab, click Save & exit.

Note: If you have web pages in which some parts of the URL are elements, you must
configure the web pages as All Pages, in the Privacy settings applies group.

Customizing the user experience

The Pega Co-Browse console enables basic customization. For example, from the
Customize menu, you can customize the message that users receive before they are
connected to a session.

You can completely customize the UI instead of using the default Pega Co-Browse UI. For
example, to create your own buttons to manage the session, use the following methods.

 To start a session: fireflyAPI.start()

 To end a session: fireflyAPI.endSession()

 To see if a session is active: fireflyAPI.cobrowsingActive()

Pega Co-Browse Implementation Guide 11

 Basic Troubleshooting
If Pega Co-Browse is not working from the Customer Service Application

1. Check that you have correctly identified the API Key and the API Token. The API Key is the
value found in the Pega Co-Browse console under My Account > API Key. The API Token is
the value found in the JavaScript snippet.
2. Make sure that the API Key and API Token values have been inserted into the
ApplicationSettings data transform.
− The CobrowsingAPIKey and PortalCobrowsingAPIKey is set to the API Key value.
− The PortalCobrowsingAPIToken value is set to the API Token value.
− The PortalCobrowsingEnabled value is set to true.
3. Verify that the ApplicationSettings data transform is saved to the correct ruleset version.
4. Refresh the Declare_CAApplicationSettings data page. Make sure the correct API Key and
API Token values appear on this page.

Assets aren’t showing up, and the site I’m co-browsing on is hosted behind a VPN or on
localhost

1. On the Pega Co-Browse customer-side API, set: fireflyAPI.set(‘secureUrl’, false);

2. Make sure that the agent’s browser can load the website that is being hosted on localhost or
behind the VPN.
3. Make sure that the agent side is running on HTTP not HTTPS.

My assets aren’t showing up and I’m co-browsing on a Pega 7 application

1. On the Pega Co-Browse customer-side API, set: fireflyAPI.set(‘sendStaticContent’,true);

Pega Co-Browse Implementation Guide 12

A API

Feature Description
CustomUI  Change different pieces of the UI
 fireflyAPI.set(‘customUI’, {mouse: {11ffset: -25, 11ffset: -25,
cursorURL:’https://s3.amazonaws.com/firefly-
071591/img/video-desk-cursor.png’}});

Custom Words  Sets the name of the viewer and the presenter
 fireflyAPI.set(‘customWords’, {presenter: ‘customer’, viewer:
‘agent’});

Masking  Sets fields to mask for the presenter

 fireflyAPI.set(‘masking’, {‘*’ : [‘input’, ‘#myDiv’, ‘.myClass’],
‘/products’ : [‘#anotherDiv’] });

Message  Sets the message that pops up when a session is started

 fireflyAPI.set(‘message’, ‘Please pass your session code.’);

Highlight CSS  Change the color of the highlight on the customer’s side
 fireflyAPI.set(‘highlightCSS’, {backgroundColor: “1677f3”,
borderColor: “1907E2”})

isPega  Determines whether the session should be Pega branded

 fireflyAPI.set(‘isPega’, true);

On  Listen for events

 fireflyAPI.on(‘eventName’, callback();
 List of events you can listen for:
 cobrowsingRequested
 cobrowsingStarted
 cobrowsingEnded
 cobrowsingTimedOut
 repControlRequested

Secure URL  Turns off/on proxying so you can test on localhost or behind
VPN
 fireflyAPI.set(‘secureUrl’, false);

SendStaticContent  Send CSS and images to the viewer’s side

 fireflyAPI.set(’sendStaticContent’, true);

Session URL  Return the URL of the session

 fireflyAPI.get(‘sessionURL);

Pega Co-Browse Implementation Guide 13

 Feature Description

Sync Rep Scrolling  Sync scrolling between the viewer and the presenter
 fireflyAPI.set(‘syncRepScrolling’, true);

Theme  Sets the theme of the UI

 fireflyAPI.set(‘theme’, ‘black’);

Timeout Length  Controls length of the timeout for sessions (MS)

 fireflyAPI.set(‘timeoutLength’, 15000);

Whitelabel  Hides our logo

 fireflyAPI.set(‘whitelabel’, true);

Note: When using the API functions, be sure to wrap the call in the ready function in order
to prevent race conditions. For example:

<script type=“text/javascript”>

fireflyAPI.ready(functio

n(){

fireflyAPI.set(‘whitelabel’, true);

});

Pega Co-Browse Implementation Guide 14