< Back to Package Overview
Enable Avaya Co-Browsing on the Agent Website
This article describes ways to enable Avaya Co-Browsing solution on Agent website.
Planning
Before you begin implementing Avaya Co-Browsing for your application, ensure you:
- Add an iframe on the Agent webpage for showing Avaya Co-Browsing contents.
- Analysis of website to be cobrowsed with against JS libraries used in Avaya Co-Browsing solution against any potential conflict.
- NAMESPACE analysis of the website against Avaya Co-Browsing solution's NAMESPACE for any potential conflict
- Optionally, you can disable the inline scripts on agent side or restrict the execution of javascripts from certain domains. To do this, you can use the meta tag of the content security policy and add the information under the head section of the web page where the agent iframe is added.
javascript
<head>
<meta http-equiv='Content-Security-Policy' content='script-src self;'>
</head>
Files required to enable Avaya Co-Browsing on Agent website
The following table lists the files that are required for enabling Avaya Co-Browsing on the Agent website.
The table also provides information about the location and purpose of each file. File path is relative to the extracted Sharing-Package folder.
Note:You must include all JavaScript and css files on the Agent website.
| File Name |
File Path |
Purpose |
Comments |
| AvayaCoBrowseClientServices.min.js |
sdk\AvayaCoBrowseClientServices.min.js |
Contains all the API interfaces and implementation. |
You cannot change anything in this file. It violates the license agreement. |
| Base64.js |
sdk\common\lib\Base64.js |
Used to encrypt and decrypt the html content. |
This is a third party library. |
| jquery.min.js |
sdk\common\lib\jquery.min.js |
This is used for Dom manipulation, CSS manipulation, Html event methods, Ajax calls, and other utilities, such as traversing, adding css effects. |
This is a third party library. |
| sock.js |
sdk\common\lib\sock.js |
Used for transferring data between server and Customer webpages through long polling. |
This is a third party library. |
| select2.js |
sdk\common\lib\select2.js |
Used to handle dropdown elements. |
This is a third party library. |
| agent.css |
sdk\agent\css\agent.css |
The css file consumed by Avaya Co-Browsing Agent Service. |
Do not change any information in this file. |
| pointer.png |
sdk\agent\img\pointer.png |
Used for displaying the mask symbol when the Agent does not have the mouse control and movement of mouse is controlled by the Customer. |
Create an img folder in the directory containing the css folder and then copy this file in the img folder. |
List of 3rd party libraries
| 3rd Party javascript library |
Purpose |
Version and information |
| sock.js |
It contains the implementation of sockjs-client.SockJS is a browser JavaScript library that provides a WebSocket-like object. SockJS gives you a coherent, cross-browser, Javascript API which creates a low latency, full duplex, cross-domain communication channel between the browser and the web server. |
sockjs-client v1.4.0 http://sockjs.org MIT license |
| jquery.min.js |
Jquery library is used for Dom manipulation, CSS manipulation, Html event methods, Ajax calls, and other utilities, such as traversing, adding css effects. |
jQuery v3.4.1 (c) 2005, 2020 jQuery Foundation, Inc. jquery.org/license |
| Base64.js |
Used to encrypt and decrypt the html content. |
webtoolkit.base64.min.js http://www.webtoolkit.info/* http://www.webtoolkit.info/javascript_base64.html#.WBHC1yh94dU/ |
| select2.js |
Used to handle dropdown elements. |
select2 v4.0.13 https://creativecommons.org/licenses/by/4.0/ MIT license |
Supported Events
When the agent is in control, Avaya Co-Browsing supports a set of events on html elements for updating contents. The list of events that are supported are:-
| Events |
Html Element |
| click |
a, button, input type button, input type submit, checkbox, radio, label, span, li |
| mouseup |
node type text |
| change |
select, input type text |
| blur |
input type text |
| focus |
input type text |
| keypress |
input type text, input type radio |
| hover |
For defined psuedo class on elements |
| keyup |
input type text, textarea |
| scroll |
texarea, div |
| focusin |
a, input, textarea, select, option,optgroup, button, fieldset, legend, img, area, map, nav > li, nav > li> div |
| mouseenter |
a, input, textarea, select, option,optgroup, button, fieldset, legend, img, area, map, nav > li, nav > li> div |
| mouseleave |
a, input, textarea, select, option,optgroup, button, fieldset, legend, img, area, map, nav > li, nav > li> div |
What to do next...
The following is a recommended list of articles to get you started on Customer Website:
