Creating a Custom Cobrowse Visitor User Interface

The Cobrowse Visitor User Interface

The Cobrowse Visitor User Interface consists of elements such as:

  • The Terms and Conditions message which is displayed before a Cobrowse session begins.
  • The Cobrowse button that is displayed while in a Cobrowse session.
  • Display of the agent screen or agent video.

Many customers will use the default Cobrowse Visitor User Interface, using the Cobrowse Customization Tool to create a custom look. Customers who would like to further customize the visitor experience may choose to create a custom Visitor UI using Javascript and the Cobrowse Visitor API.

Implementing a Custom Cobrowse Visitor UI

To implement a custom Cobrowse Visitor User Interface, specify data-ui="custom"cobrowse<script>tag to prevent the default UI script from loading.

Sample code which implements a Cobrowse user interface can be found here.

Screenshare and Agent Video in a Custom Visitor UI

When using the default visitor user interface, both Glance Screen Share and Agent Video are automatically displayed in the visitor browser. When using a custom visitor user interface, implement a listen for the screenshare event.

When an agent chooses to share his or her screen or webcam video a screenshare event fires. See Visitor Side Events for a description of the Screen Share event. Glance uses the standard screenshareView names: glance_screenshare for Screen Share and glance_agentvideo for Agent Video.

To support Screen Share and Agent Video with a custom user interface, add hidden iframes and with id="glance_screenshare" and id="glance_agentvideo" to the visitor’s page, and unhide the corresponding iframes when a screenshare event fires.

The glance_agentvideo and glance_screenshare iframes must exist in the page before the agent initiates Agent Video or Screen Share. In addition, if the visitor navigates after Agent Video has already been turned on, the iframe must exist in the page before the visitor connects to the Cobrowse server. It is not possible to wait to create the iframe until the screenshare event fires.