Class

Cobrowser

Cobrowser

Members

object

# EVENTS

Properties:
Name Type Description
COBROWSING_REQUEST string
MODE_CHANGE string
object

# MODES

Properties:
Name Type Description
OBSERVATION string Operator can observe the visitor but cannot interact with the web page. Visitor can not see Operator's mouse pointer.
ENGAGEMENT string Operator can observe the visitor and fully interact with the web page. Visitor sees Operator's mouse pointer.
POINTER string Operator can observe the visitor but cannot interact with the web page but scrolling. Visitor sees Operator's mouse pointer.

Methods

# addBufferedEventListener(type, listener)

Registers a Cobrowser buffered event listener on the API.

If you want to add listeners when starting the application, then this should be the default choice over Cobrowser#addUnbufferedEventListener.

This listener has a buffer for events that occurred before the listener was added. It will buffer the last event that was fired before any listeners were added. In another word, if a listener is added during or after an event has occurred, the listener will trigger immediately.

This can be useful, for example, if a listener should fire for events that occurred during page loading and all the scripts were not yet initialized.

A popular example is MODE_CHANGE event which, in addition to regular CoBrowsing mode changes, is also triggered when Engagement is being re-established after visitor navigation.

If multiple identical listeners are registered on the same event type the duplicate instances are discarded. They do not cause the listener to be called twice and do not need to be removed with the removeBufferedEventListener method.

Parameters:
Name Type Description
type string The event type for which the visitor is registering. Must be one of Cobrowser#EVENTS.
listener function The listener function that will be called when the event occurs.
Example
engagement.cobrowser.addBufferedEventListener(
    engagement.cobrowser.EVENTS.MODE_CHANGE,
    function(payload) {
      // Handle event here
    }
  );

# addUnbufferedEventListener(type, listener)

Registers an event listener on the Cobrowser.

If a listener is added while the Cobrowser is processing an event, it will be not triggered with the current event.

If multiple identical listeners are registered on the same event type the duplicate instances are discarded. They do not cause the listener to be called twice and do not need to be removed with the removeEventListener method.

Parameters:
Name Type Description
type string The event type for which the user is registering. Must be one of Cobrowser#EVENTS.
listener function The listener function that will be called when the event occurs.

# removeBufferedEventListener(type, listener)

Removes a Cobrowser buffered event listener from the API.

If an event listener is removed while the API is processing an event, it will not be triggered with the current event.

An event listener is never invoked after being removed.

Calling removeBufferedEventListener with arguments which do not identify any currently registered listener has no effect.

Parameters:
Name Type Description
type string The event type for the listener being removed.
listener function The event listener to be removed.

# removeUnbufferedEventListener(type, listener)

Removes an event listener from the Cobrowser.

If an event listener is removed while the Cobrowser is processing an event, it will not be triggered with the current event.

An event listener is never invoked after being removed.

Calling removeEventListener with arguments which do not identify any currently registered listener has no effect.

Parameters:
Name Type Description
type string The event type for the listener being removed.
listener function The event listener to be removed.

# resendPage()

Triggers resending visitor page to operator.

NB! This functionality is in beta, meaning that it can contain unknown bugs and has not been fully tested yet. Use it at your own risk!

There is a known bug - CoBrowsable iFrames can not be observed after this function has been called. Do not use it if visitor web page contains CoBrowsable iFrames!

Example

Unmask an element and resend page when CoBrowsing mode changes to ENGAGEMENT

  var cobrowser = engagement.cobrowser;
  cobrowser.addBufferedEventListener(
    cobrowser.EVENTS.MODE_CHANGE,
    function(cobrowsingState) {
      if (cobrowsingState.mode === engagement.cobrowser.MODES.ENGAGEMENT) {
        document.getElementById('masked-form').classList.remove('sm_cobrowsing_masked_field');
        cobrowser.resendPage();
      }
    }
  );

Events

# COBROWSING_REQUEST

Triggered when an operator requests to CoBrowse with the visitor. Accepting this request means that the operator can fill inputs, click links etc in the visitor's stead. This event might be triggered multiple times. Declining one request does not prevent further requests from being sent by the operator. The event listener will be called with a CobrowsingRequest instance.
Example

Accept a CoBrowsing request

  engagement.cobrowser.addUnbufferedEventListener(
    engagement.cobrowser.EVENTS.COBROWSING_REQUEST,
    function(cobrowsingRequest) {
      cobrowsingRequest.allow();
    }
  );

# MODE_CHANGE

Triggered when CoBrowsing mode is changed. For instance, when operator accepts visitor's CoBrowsing request, mode is changed from OBSERVATION to ENGAGEMENT and MODE_CHANGE event is triggered right after. The event is also triggered when Engagement is being re-established, e.g. when loading the page after visitor has navigated. The event listener will be called with a CobrowsingState instance.
Example

Listen to mode changes and stop a CoBrowsing session on user event

  engagement.cobrowser.addBufferedEventListener(
    engagement.cobrowser.EVENTS.MODE_CHANGE,
    function(cobrowsingState) {
      if (cobrowsingState.mode === engagement.cobrowser.MODES.ENGAGEMENT) {
        var stopButton = document.createElement("div");
        stopButton.innerHTML = 'Stop CoBrowsing';
        stopButton.addEventListener('click', function() {
          cobrowsingState.session.stop();
        });
        document.body.appendChild(stopButton);
      }
    }
  );