< Back to Package Overview

Configuring the Customer Features

Using the Avaya Co-Browsing Client SDK, you can configure Avaya Co-Browsing features for Customer website.

Mask WebPage Fields

You must analyze and find out the fields which need to keep hidden from the Agent. You must apply CSS class to mask webpage fields. After CSS class is applied, contents of the fields will not be visible to the Agent.

• Mask button and checkbox.

Add a css class avcobrowse-block in the style.

• Mask textfields.

Add a css class avcobrowse-mask in the element style.

• Mask common elements like link, text

Add a css class avcobrowse-hide in the element style.

Online Help

Enable Highlight

Use the enableHighlight() method to enable the Highlight feature. By default the Highlight feature is enabled.

    _cbinstance.enableHighlight();

Disable Highlight

Use the disableHighlight() method to disable the Highlight feature.

    _cbinstance.disableHighlight();

Enable Element Highlight

Use the enableElementHighlight() method to enable the Highlight element feature. By default the Highlight element feature is enabled.

    _cbinstance.enableElementHighlight();

Disable Element Highlight

Use the disableElementHighlight() method to disable the Highlight element feature.

    _cbinstance.disableElementHighlight();

Set Highlight Color

To set color of highlighted text. The default value is yellow.

    _cbinstance.setHighlightColor(color);

Note:Mouse double click for text selection to highlight selected text is not supported.

Support Psuedo Elements And Classes

To add support for Psuedo elements and classes in Avaya Co-Browsing.

    _cbinstance.setCSSHoverFile({"css": "one.css"});
    //Set the CSS file name containing hover e.g
    //For one CSS file {"css": "one.css"}
    //For multiple CSS file {"css": "one.css, two.css, three.css"}
    //For parsing all the CSS file {"css": ""}

Support css with url properly

To add support for css style having url property in Avaya Co-Browsing.

    _cbinstance.addUrlPropertySelectors(urlProperties, selectors);
    //Set multiple css style properties having url using comma separation e.g
     ("content,background")
    //Set the html selectors applied with the urlProperties with comma separation e.g
    //("span","div")
    _cbinstance.addUrlPropertySelectors("content,background", "span,div");

Support for Psuedo Element Before

To add support for Psuedo element ::Before having URL property.

    _cbinstance.addClassSelForPseudoElemtBefore(urlProperties, classSelectorsBefore);
    //e.g addClassSelForPseudoElemtBefore("content", ".icon-header[_ngcontent-wwx-c0]")
    //urlProperties- Set multiple css style properties having url using comma separation e.g
    //("content,background")
    //classSelectorsBefore-Set selector class using pseudo element ::Before having URL property e.g
    //(".icon-header[_ngcontent-wwx-c0]")
    //Where .icon-header defined as .icon-header[_ngcontent-wwx-c0]::Before {content: url("chat-icon.png");}

Support for Psuedo Element After

To add support for Psuedo element ::After having URL property.

    _cbinstance.addClassSelForPseudoElemtAfter(urlProperties, classSelectorsBefore);
    //e.g addClassSelForPseudoElemtBefore("content", ".icon-header[_ngcontent-wwx-c0]")
    //urlProperties- Set multiple css style properties having url using comma separation e.g
    //("content,background")
    //classSelectorsBefore-Set selector class using pseudo element ::After having URL property e.g
    //(".icon-header[_ngcontent-wwx-c0]")
    //Where .icon-header defined as .icon-header[_ngcontent-wwx-c0]::After {content: url("chat-icon.png");}

Agent View Synchronization Interval

To set Agent view synchronization interval, you must provide time in milliseconds. This specifies the interval after which Customer web page synchronizes with the Agent if there are any changes in Customer webpage. The default value is 500.

    _cbinstance.setAgentViewSyncInterval(agentViewSyncInterval);

Connection Retry Interval

To set connection retry attempts, you must provide time in milliseconds. This specifies the interval after which Customer service attempts to connect with Breeze server. The default value is 10000.

    _cbinstance.setCustomerConnectionRetryInterval(connectionRetryInterval);

Set Mouse and Scroll Synchronization Interval

To set mouse and scroll synchronization interval, you must provide time in milliseconds. This specifies the interval after which the Customer synchronizes mouse trails and scroll position with the Agent. The default value is 1000.

    _cbinstance.setMouseScrollSyncInterval(mouseScrollSyncInterval);

Remove Fields to Synchronize with Agent

You can restrict HTML elements which you do not want to synchronize with the Agent webpage. You must provide ID of the DOM element.

    _cbinstance.addElementIDToRemove("cbeToolbar");

Update inactivity timeout

To record inactivity timeout activities, you must provide time in seconds.

    _cbinstance.updateIdleTime(_inactiveMessageCounter);

Clear content of Cross Origin Iframes

If any of the Iframes' content is Cross-origin in nature, it may cause error while sync between the Agent and the Customer. To overcome DOM sync failures, you can instruct the SDK not to show content of such Iframes on Agent side. If enabled, Agent will see blank Iframes for which content is Cross-origin in nature. It will not affect other Iframes which do not have Cross-Origin content.

    _cbinstance.removeCrossOriginIFrameContent();

Making Configuration Changes at Runtime

Configuration data is critical for initializing the Avaya Co-Browsing Client SDK. Services are created and initialized according to their corresponding configuration data during initialization. After the Client SDK is initialized, if you need to change any configuration options for any services or enable/disable certain services, the Avaya Co-Browsing Client SDK must be re-initialized with the updated configuration data. Dynamic changes of configuration options are not supported.