Avaya Client SDK

< Back to Package Overview

Enable Avaya Co-Browsing on the Customer Website

This article describes ways to enable Avaya Co-Browsing solution on Customer Website.

Planning

Before you begin implementing Avaya Co-Browsing for your application, think of an approach that would be most beneficial for your customers. Enabling a blind Avaya Co-Browsing on the entire domain might become troublesome.

Ensure you:

  • Enable Avaya Co-Browsing on the Customer website page only if it has data where customers might need help.
  • Plan the navigation of the users on the Co-Browsing and off the Co-Browse enabled page
  • Review the contents on the Co-Browse enabled page
  • Plan a strategy on the elements that are present on the Co-Browse enabled page
  • Put the ads and or third party contents/videos/external links if any, under no show elements.
  • Review any sensitive fields where Customer might type some information that should not be shared with the Agent e.g. password fields, credit card number fields etc.
  • Get the UI reviewed for a UX (User Experience Designer) stand point, so that optimization and user experience do not run into each other.
  • 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

Dealing with DOM objects

Avaya Co-Browsing supports the default DOM objects which are supported as per HTML 5 standards except for canvas, video/audio controls, input type date. We have done extensive testing on most commonly used UI Elements from Twitter bootstrap and JQuery UI stack.

Element Description Supported
<html> The˙HTML Root Element˙(<html>) represents the root of an HTML document. All other elements must be descendants of this element. Yes
<base> The˙HTML Base Element˙(<base>) specifies the base URL to use for all relative URLs contained within a document. There can be only one <base> element in a document. Yes
<head> The˙HTML Head Element˙(<head>) provides general information (metadata) about the document, including its title and links to or definitions of scripts and style sheets Yes
<link> The˙HTML Link Element˙(<link>) specifies relationships between the current document and an external resource. Possible uses for this element include defining a relational framework for navigation. This Element is most used to link to style sheets. Yes
<meta> The˙HTML˙Meta Element˙(<meta>) represents any metadata information that cannot be represented by one of the other HTML meta-related elements (<base>,˙<link>,˙<script>,˙<style>˙or˙<title>). Yes
<style> The˙HTML Style Element˙(<style>) contains style information for a document, or part of a document. By default, the style instructions written inside that element are expected to be˙CSS. Yes
<title> The˙HTML Title Element˙(<title>) defines the title of the document, shown in a browser's title bar or on the page's tab. It can only contain text and any contained tags are not interpreted. Yes
<address> The˙HTML˙Address˙Element˙(<address>) should be used by authors to supply contact information for its nearest˙<article>˙or˙<body>˙ancestor; in the latter case, it applies to the whole document. Yes
<article> The˙HTML˙Article˙Element˙(<article>) represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable, e.g., in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, or any other independent item of content. Each˙<article>˙should be identified, typically by including a heading (h1-h6˙element) as a child of the˙<article>˙element. Yes
<body> The˙HTML Body Element˙(<body>) represents the content of an HTML˙document. There can be only one˙<body>˙element in a document. Yes
<footer> The˙HTML Footer Element˙(<footer>) represents a footer for its nearest sectioning content˙or˙sectioning root˙element. A footer typically contains information about the author of the section, copyright data or links to related documents. Yes
<header> The˙HTML˙<header>˙Element˙represents a group of introductory or navigational aids. It may contain some heading elements but also other elements like a logo, wrapped section's header, a search form, and so on. Yes
<h1>,<h2>,<h3>,<h4>,<h5>,˙<h6> Heading˙elements implement six levels of document headings,˙<h1>˙is the most important and˙<h6>˙is the least. A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically. Yes
<hgroup> The˙HTML˙<hgroup>˙Element˙(HTML Headings Group Element) represents the heading of a section. It defines a single title that participates in˙the outline of the document˙as the heading of the implicit or explicit section that it belongs to. Yes
<nav> The˙HTML Navigation Element˙(<nav>) represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Yes
<section> The˙HTML Section Element˙(<section>) represents a generic section of a document, i.e., a thematic grouping of content, typically with a heading. Each˙<section>˙should be identified, typically by including a heading (<h1>-<h6>˙element) as a child of the˙<section>˙element. Yes
<dd> The˙HTML Description Element˙(<dd>) indicates the description of a term in a description list (<dl>) element. This element can occur only as a child element of a definition list and it must follow a˙<dt>element. Yes
<div> The˙HTML˙<div>˙element˙(or˙HTML Document Division Element) is the generic container for flow content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the˙class˙or˙id˙attributes), or because they share attribute values, such as˙lang. It should be used only when no other semantic element (such as˙<article>˙or˙<nav>) is appropriate. Yes
<dl> The˙HTML˙<dl>˙Element˙(or˙HTML˙Description List Element) encloses a list of pairs of terms and descriptions. Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs). Yes
<dt> The˙HTML˙<dt>˙element˙(or HTML Definition Term Element) identifies a term in a definition list. This element can occur only as a child element of a˙<dl>. It is usually followed by a˙<dd>˙element; however, multiple˙<dt>˙elements in a row indicate several terms that are all defined by the immediate next˙<dd>˙element. Yes
<figcaption> The˙HTML˙<figcaption>˙Element˙represents a caption or a legend associated with a figure or an illustration described by the rest of the data of the˙<figure>˙element which is its immediate ancestor which means˙<figcaption>˙can be the first or last element inside a<figure>˙block.˙Also, the˙HTML Figcaption Element˙is optional; if not provided, then the parent figure element will have no caption. No
<figure> The˙HTML˙<figure>˙Element˙represents self-contained content, frequently with a caption˙(<figcaption>),˙and is˙typically referenced as a single unit. While it is related to the main flow, its position is independent of the main flow. Usually this is an image, an illustration, a diagram, a code snippet, or a schema that is referenced in the main text, but that can be moved to another page or to an appendix without affecting the main flow. No
<hr> The˙HTML˙<hr>˙element˙represents a thematic break between paragraph-level elements (for example, a change of scene in a story, or a shift of topic with a section). In previous versions of HTML, it represented a horizontal rule. It may still be displayed as a horizontal rule in visual browsers, but is now defined in semantic terms, rather than presentational terms. Yes
<li> The˙HTML List Item Element˙(<li>) is used to represent an item in a list. It must be contained in a parent element: an ordered list (<ol>), an unordered list (<ul>), or a menu (<menu>). In menus and unordered lists, list items are usually displayed using bullet points. In ordered lists, they are usually displayed with an ascending counter on the left, such as a number or letter. Yes
<main> The˙HTML Main Element˙(<main>) can be used as a container for the dominant contents of the document. The main content area consists of content that is directly related to, or expands upon the central topic of a section or the central functionality of an application. This content should be unique to the document, excluding any content that is repeated across a set of documents such as sidebars, navigation links, copyright information, site logos, and search forms (unless, of course, the document's main function is as a search form). Unlike˙<article>and˙<section>, this element does not contribute to the document outline. Yes
<ol> The˙HTML˙<ol>˙Element˙(or˙HTML Ordered List Element) represents an ordered list of items. Typically, ordered-list items are displayed with a preceding numbering, which can be of any form, like numerals, letters or Romans numerals or even simple bullets. This numbered style is not defined in the HTML description of the page, but in its associated CSS, using the˙list-style-type˙property. Yes
<p> The˙HTML˙<p>˙element˙(or˙HTML Paragraph Element)˙represents a paragraph of text. Yes
<pre> The˙HTML Preformatted Text˙(<pre>)˙represents preformatted text. Text within this element is typically displayed in a non-proportional font exactly as it is laid out in the file. Whitespaces inside this element are displayed as typed. Yes
<ul> The HTML˙unordered list˙element (<ul>) represents an unordered list of items, namely a collection of items that do not have a numerical ordering, and their order in the list is meaningless. Typically, unordered-list items are displayed with a bullet, which can be of several forms, like a dot, a circle or a squared. The bullet style is not defined in the HTML description of the page, but in its associated CSS, using the˙list-style-type˙property. Yes
<area> The˙HTML˙<area>˙element˙defines a hot-spot region on an image, and optionally associates it with a˙hypertext link. This element is used only within a˙<map>˙element. No
<audio> The˙HTML˙<audio>˙element˙is used to embed sound content in documents. It may contain several audio sources, represented using the˙src˙attribute or the˙<source>˙element; the browser will choose the most suitable one. No
<img> The˙HTML Image Element˙(<img>) represents an image of the document. Yes
<map> The˙HTML˙<map>˙element˙is used with˙<area>˙elements to define an image map (a clickable link area). No
<track> The˙HTML˙<track>˙element˙is used as a child of the media elements?<audio>˙and˙<video>. It lets you specify timed text tracks (or time-based data), for example to automatically handle subtitles. The tracks are formatted in˙WebVTT format˙(.vtt˙files) ? Web Video Text Tracks. No
<video> The˙HTML˙<video>˙element˙is used to embed video content. It may contain several video sources, represented using the˙src˙attribute or the˙<source>element; the browser will choose the most suitable one. No
<embed> The˙HTML˙<embed>˙Element˙represents an integration point for an external application or interactive content (in other words, a plug-in). No
<iframe> The˙HTML Inline Frame Element˙(<iframe>) represents a nested browsing context, effectively embedding another HTML page into the current page. In HTML 4.01, a document may contain a˙head˙and a˙body˙or a˙head˙and a frame-set, but not both a˙body˙and a˙frame-set. However, an˙<iframe>can be used within a normal document body. Each browsing context has its own session history and active document. The browsing context that contains the embedded content is called the˙parent˙browsing context. The top-level˙browsing context (which has no parent) is typically the browser window. Yes
<object> The˙HTML Embedded Object Element˙(<object>) represents an external resource, which can be treated as an image, a nested browsing context, or a resource to be handled by a plugin. No
<param> The˙HTML˙<param>˙Element˙(or˙HTML Parameter Element)˙defines parameters for˙<object>. Yes
<source> The˙HTML˙<source>˙element˙is used to specify multiple media resources for˙<picture>,˙<audio>˙and˙<video>˙elements. It is an empty element. It is commonly used to serve the same media in˙multiple formats supported by different browsers. No
<canvas> The˙HTML˙<canvas>˙Element˙can be used to draw graphics via scripting (usually˙JavaScript). For example, it can be used to draw graphs, make photo compositions or even perform animations. You may (and should) provide alternate content inside the˙<canvas>˙block. That content will be rendered both on older browsers that don't support canvas˙and˙in browsers with JavaScript disabled. No
<noscript> The˙HTML˙<noscript>˙Element˙defines a section of html to be inserted if a script type on the page is unsupported or if scripting is currently turned off in the browser. Yes
<script> The˙HTML Script Element˙(<script>) is used to embed or reference an executable script within an˙HTML˙or˙XHTML˙document. Yes
<del> The˙HTML Deleted Text Element˙(<del>) represents a range of text that has been deleted from a document. This element is often (but need not be) rendered with strike-through text. Yes
<ins> The˙HTML˙<ins>˙Element˙(or˙HTML Inserted Text) HTML represents a range of text that has been added to a document. Yes
<caption> The˙HTML˙<caption>˙Element˙(or˙HTML Table Caption Element) represents the title of a table. Though it is always the first descendant of a˙<table>, its styling, using CSS, may place it elsewhere, relative to the table. Yes
<col> The˙HTML Table Column Element˙(<col>) defines a column within a table and is used for defining common semantics on all common cells. It is generally found within a˙<colgroup>˙element. Yes
<colgroup> The˙HTML Table Column Group Element˙(<colgroup>) defines a group of columns within a table. Yes
<table> The˙HTML Table Element˙(<table>) represents data in two dimensions or more. Yes
<tbody> The HTML Table Body Element ( Yes
<td> The˙Table cell˙HTML˙element (<td>) defines a cell of a table that contains data. It participates in the˙table model. Yes
<tfoot> The˙HTML Table Foot Element˙(<tfoot>) defines a set of rows summarizing the columns of the table. Yes
<th> The˙HTML Table Header Cell Element˙(<th>) defines a cell that is a header for a group of cells of a table. The group of cells that the header refers to is defined by the˙scope˙and˙headers˙attribute. Yes
<thead> The˙HTML Table Head Element˙(<thead>) defines a set of rows defining the head of the columns of the table. Yes
<tr> The˙HTML Table Row Element˙(<tr>) defines a row of cells in a table. Those can be a mix of˙<td>˙and˙<th>˙elements. Yes
<button> The˙HTML˙<button>˙Element˙represents a clickable button. Yes
<datalist> The˙HTML Datalist˙Element˙(<datalist>) contains a set of˙<option>elements that represent the values available for other controls. Yes
<fieldset> The˙HTML˙<fieldset>˙element˙is used to group several controls as well as labels (<label>) within a web form. Yes
<form> The˙HTML˙<form>˙element˙represents a document section that contains interactive controls to submit information to a web server. Yes
<input> The HTML˙<input>˙element˙is used to create interactive controls for web-based forms in order to accept data from the user. How an˙<input>works varies considerably depending on the value of its˙type˙attribute. Yes
<keygen> The HTML˙<keygen>˙element exists to facilitate generation of key material, and submission of the public key as part of an˙HTML form. This mechanism is designed for use with Web-based certificate management systems. It is expected that the˙<keygen>˙element will be used in an HTML form along with other information needed to construct a certificate request, and that the result of the process will be a signed certificate. No
<label> The˙HTML Label˙Element˙(<label>) represents a caption for an item in a user interface. It can be associated with a control either by placing the control element inside the˙<label>˙element, or by using the˙for attribute. Such a control is called the˙labeled control˙of the label element. Yes
<legend> The˙HTML˙<legend>˙Element˙(or˙HTML Legend Field Element) represents a caption for the content of its parent˙<fieldset>. Yes
<meter> The˙HTML˙<meter>˙Element˙represents either a scalar value within a known range or a fractional value. No
<optgroup> In a Web form, the˙HTML˙<optgroup>˙element˙creates a grouping of options within a˙<select>˙element. Yes
<option> In a Web form, the˙HTML˙<option>˙element˙is used to create a control representing an item within a˙<select>, an˙<optgroup>˙or a˙<datalist>HTML5 element. Yes
<output> The˙HTML˙<output>˙element˙represents the result of a calculation or user action. Yes
<progress> The˙HTML˙<progress>˙Element˙is used to view the completion progress of a task. While the specifics of how it's displayed is left up to the browser developer, it's typically displayed as a progress bar. Javascript can be used to manipulate the value of progress bar. No
<select> The HTML˙select˙(<select>) element represents a control that presents a menu of options. The options within the menu are represented by<option>˙elements, which can be grouped by˙<optgroup>˙elements. Options can be pre-selected for the user. Yes
<textarea> The˙HTML˙<textarea>˙element˙represents a multi-line plain-text editing control. Yes
<details> The˙HTML Details˙Element˙(<details>) is used as a disclosure widget from which the user can retrieve additional information. Yes
<dialog> The˙HTML˙<dialog>˙element˙represents a dialog box or other interactive component, such as an inspector or window.˙<form>elements can be integrated within a dialog by specifying them with the attribute˙method="dialog"". When such a form is submitted the dialog is closed with a˙returnValue˙attribute set to the˙value˙of the submit button used." Yes
<menu> The˙HTML˙<menu>˙element˙represents a group of commands that a user can perform or activate. This includes both list menus, which might appear across the top of a screen, as well as context menus, such as those that might appear underneath a button after it has been clicked. Yes
<menuitem> The˙HTML˙<menuitem>˙element˙represents a command that a user is able to invoke through a popup menu. This includes context menus, as well as menus that might be attached to a menu button. Yes
<summary> The HTML˙summary˙element (<summary>) is used as a summary, caption, or legend for the content of a˙<details>˙element. Yes

Supported CSS3 components

Avaya Co-Browsing supports the following CSS3 styles.

Style Description Supported
element[foo^="bar"] attribute beginning matches exactly. Yes
element[foo$="bar"] attribute ending matches exactly. Yes
element[foo*="bar"] The element has an attribute called foo that contains the string "bar". Yes
:nth-child(n) use this to match exact child elements or use variables to get alternating matches. Yes
:nth-last-child(n) match exact child elements counting up from the last one. Yes
:nth-of-type(n) match sibling elements with the same name before it in the document tree. Yes
:nth-last-of-type(n) match sibling elements with the same name counting up from the bottom. Yes
:last-child match the last child element of the parent. Yes
:first-of-type match the first sibling element of that type. Yes
:last-of-type match the last sibling element of that type. Yes
:only-child match the element that is the only child of its parent. Yes
:only-of-type match the element that is the only one of its type. Yes
:empty match the element that has no children (including text nodes). Yes
:enabled match the element when it is enabled. Yes
:disabled match the element when it is disabled. Yes
:checked match the element when it's checked (radio button or checkbox). Yes
:not(s) match when the element does not match the simple selector s. Yes
background-clip This property defines how the background image should be clipped. The default is the border box, but it can be changed to the padding box or the content box. Yes
background-origin This property determines whether the background should be places in the padding box, the border box, or the content box. Yes
background-size This property allows you to indicate the size of the background image. It allows you to stretch smaller images to fit the page. Yes
background-repeat There are two new values for this property: space and round. Space spaces the tiled image evenly within the box without being clipped. Round rescales the background image so that it will tile a whole number of times in the box. Yes
background-attachment A new value local is added so that the background will scroll with the element content when that element has a scroll bar. No
background The background shorthand property adds in the size and origin properties. Yes
border-radius border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radiusThese properties allow you to create rounded corners on your borders. Yes
border-image-source Specifies the image source file to be used instead of border styles already defined. Yes
border-image-slice Represents the inward offsets from the border image edges. Yes
border-image-width Defines the value of the width for your border image. Yes
border-image-outset Specifies the amount that the border image area extends beyond the border box. Yes
border-image-stretch Defines how the sides and middle parts of the border image should be tiled or scaled. Yes
border-image The shorthand property for all the border image properties. Yes
column-width Defines the width your columns should be. The browser will then flow the text to fill the space with columns that wide. Yes
column-count Defines the number of columns on the page. The browser will then create columns wide enough to fit in the space, but only the number you specify. Yes
columnsShorthand property where you can define either the width or number (or both, but that rarely makes sense). Yes
column-gap Defines the width of the gaps between the columns. Yes
column-rule-color Defines the color of the rule. Yes
column-rule-style Defines the style of the rule (solid, dotted, double, etc.). Yes
column-rule-width Defines the width of the rule. Yes
column-rule A shorthand property defining all three column rule properties at once.

Files required to enable Avaya Co-Browsing on Customer website

The following table lists the files that are required for enabling Avaya Co-Browsing on the Customer 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 in Avaya Co-Browsing enabled webpages on the Customer 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.
md5.js sdk\common\lib\md5.js Used for calculating the differences of dom contents to synchronize pages with Agent. 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.
cbe.css sdk\customer\css\cbe.css The css file consumed by Avaya Co-Browsing Customer Service. Do not change any information in this file.
style.css sdk\customer\css\style.css The css file consumed by Avaya Co-Browsing Customer Service. Do not change any information in this file.
mask.png sdk\customer\img\mask.png Used for adding help for masked html element at Customer website. This image needs to be copied under img folder at the level of css directory under which Customer css files exists as this image is consumed by Customer css files.
pointer.png sdk\customer\img\pointer.png Used for displaying the mask symbol when the Customer does not have the mouse control and movement of mouse is controlled by the Agent. 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/
md5.js Used for calculating the differences of dom contents to synchronize pages with Agent. Copyright 1999-2010, Joseph Myers, Paul Johnston, Greg Holt, Will Bond will@wbond.net http://www.myersdaily.org/joseph/javascript/md5-text.html http://pajhome.org.uk/crypt/md5 Released under the BSD license http://www.opensource.org/licenses/bsd-license
select2.js Used to handle dropdown elements. select2 v4.0.13 https://creativecommons.org/licenses/by/4.0/ MIT license

What to do next...

The following is a recommended list of articles to get you started on Customer Website: