Enabling the Cobrowse Feature

Introduction

This topic describes how to enable the cobrowse behavior on your institution’s website. Cobrowsing enables you to configure the visitor’s pages to be shared with you. This enables you to assist the visitor in activities such as form filling or answering other queries that the visitor may have.

Prerequisite

• The Node.js installer is a prerequisite for the Cobrowse feature. It is available in Prerequisites.rar.

• Before working with Cobrowse in an upgrade environment, replace the Cobrowse.js file in your website. Copy the file from the CRM installation folder from the path Samples\Web\Website\Cobrowse\Contents\scripts, and overwrite the same file in your website.

Steps to Deploy the Cobrowse Feature on a Web Page

1. From the Samples\Web\CobrowsePlugin folder, copy the Cobrowse folder and the Blank.html file to the root directory of your institution’s website. If your website's pages have multiple folders, copy the Cobrowse folder and the Blank.html file to each folder.

2. Make the following modifications to the visitor pages that you want to configure as cobrowsable:

a. Add the following script references to the visitor page in the indicated order:

var Options = { userName: 'Visitor', color: 'red', userType: 3 };

</script>

You can replace the text 'Visitor' and 'red' and specify different values.

b. Insert the following code:

This enables the display of the Cobrowse icon on the page.

3. Copy the CobrowseConfiguration.js file from the CoBrowse folder that is created when Cobrowse was installed.

4. In the Cobrowse folder of your institution's website, replace the CobrowseConfiguration.js file with the file that you copied in the previous step.

Alternatively, copy the content of the hubBase tag from the CobrowseConfiguration.js file in the CoBrowse installation folder and replace the complete text of the hubBase tag in the CobrowseConfiguration.js file available in the CoBrowse directory of your institution's website.

Enabling the Display of the CoBrowse Tab in Web Client

1. Navigate to the Web Client installation folder and open the web.config file.

2. Set the value of the EnableCobrowse parameter to 1. By default, its value is 0.

3. Copy the CobrowseConfiguration.js file from the CoBrowse folder that is created when Cobrowse was installed.

4. In the Cobrowse folder of the Web Client installation folder, replace the CobrowseConfiguration.js file with the file that you copied in the previous step.

5. Reset IIS.

The Co-Browse tab will be displayed in the Chat and Phone workspaces.

Securing Information in Cobrowsable Pages

Institutions can implement masking behavior to hide fields and controls or display a masking character instead of field values to prevent staff users from viewing content. This behavior can be enabled on a web page to prevent a staff user from viewing confidential or personally identifiable information (PII) during a cobrowsing session.

To implement this functionality, the following attributes can be implemented on a cobrowsable page:

Attribute	Description
excludecontrol	The attribute must be copied into code that displays the field. Set the value of the attribute to 1 to hide the display of the field to the staff user. Example The First name field is displayed to the visitor, but the staff user cannot view the input area of the field: Visitor - Staff user - Sample Code <input name="txtNameLastD" disabled="disabled" id="txtNameLastD" type="text" maxlength="50" excludecontrol="1" >
preventcontrolaction	This attribute must be copied into code that displays the field. Set the value of the attribute to 1 to display the content to the staff user in read-only format. Example The value of the Middle name field is displayed to the visitor. However, the staff user cannot edit the typed value as its displayed in read-only format: Visitor – Staff user - Sample Code <input name="txtNameLastD" disabled="disabled" id="txtNameLastD" type="text" maxlength="50" preventcontrolaction="1" >
showpredefinedtext	This attribute must be copied into code that displays the field. Set the value of the attribute to 1 to display a fixed count of masking characters to the staff user. This count of characters is displayed regardless of the count of characters typed by the visitor. Example The value of the Last name field is displayed to the visitor. However, the specific count of masking characters defined in code are displayed to the staff user. Visitor - Staff user - Sample Code <input name="TextBox1" disabled="disabled" id="TextBox1" type="text" placeholder="******************" showpredefinedtext="1">
maskedcontrol	This attribute must be copied into code that displays the field. Set the value of the attribute to 1 to display masking characters to the staff user. The same count of characters that the visitor types are displayed as masked text to the staff user. Example The value in the Phone number field is displayed to the visitor, but masking characters are displayed to the staff user. Visitor - Staff user - Sample Code <input name="TextBox2" disabled="disabled" id="TextBox2" type="password" maskedcontrol="1">

Note

• The Agent.html and Visitor.html files are sample pages on which cobrowsing is enabled by default. You can use these pages to enable cobrowsing on your institution’s website. They can also be used to test the cobrowsing feature independently.

• The Website folder in the Samples\Web path is a working example of an institution’s website. You can use files in this folder to view a demonstration of the cobrowsing feature.