Create and Add a Cobrowse Button

Even after you instrument your website with the Cobrowse script tag, there will be no visible UI for starting a Cobrowse session. Most customers do not want the Cobrowse UI to be visible while the visitor is not in session, so by default, it is not initially displayed.

Glance recommends that you place a clickable element, such as a link, button, or other object, at the footer of every web page. An agent can then ask the visitor to scroll to the bottom of whatever page they are on and click that element to start a session. (This is especially important when supporting people using the browser in a mobile device.)

Note

Refer to the Cobrowse Visitor API page for additional properties and methods to customize Cobrowse.

Add a Button to your Webpage

Add the data-glancebutton="[Glance action]" attribute to an existing element on your page or add one of the following start commands:

Info

Adding data-glancebutton="[Glance action]" to your page will prevent Presence from being available. If Presence is needed, utilize the showTerms or startSession buttons.

showTerms

The showTerms command shows the Terms and Conditions modal with Accept/Decline buttons. Clicking Accept starts the session.

Link Link

Utilize the following code to add the showTerms command to your website.

    <a href="#" id="show-cobrowse-jS" onclick="showTerms()">Cobrowse with an Agent Session JavaScript</a>
            
            <script>
            function showTerms(){
                GLANCE.Cobrowse.Visitor.showTerms();
            }
            </script>

startSession

The startSession command starts a session (and displays the Cobrowse UI).

Link Link

Utilize the following code to add the startSession command to your website.

   <a href="#" id="start-cobrowse-jS" onclick="startSession()">Start Cobrowse Session JavaScript</a>
            
            <script>
            function startSession(){
                GLANCE.Cobrowse.Visitor.startSession();
            }
            </script>

Style the Glance Cobrowse Button

  1. Under Account Management, click the Settings tab.

  2. In the bottom right corner of the Settings tab, select Manage your Cobrowse settings.

  3. Customize your button using the Cobrowse customization tool found under Manage Cobrowse customizations.

Default vs. Custom UI

Glance provides a default Cobrowse UI in a separate script file which is loaded automatically along with the visitor script.

When implementing a custom UI, specify data-ui="custom" to prevent loading of the default UI script, the setUIReady() call will need to be added. Refer to Properties and Methods for additional information.

You can also customize the visitor experience using the Cobrowse Visitor API.

Session Code

Every Cobrowse session has a session code. This is a unique session identifier available to both the visitor and agent, allowing the agent to connect to the correct visitor session. The code may be randomly generated and exchanged over the phone, or it can be assigned automatically via integration with the customer website, as explained below in the Visitor ID section.

After an unidentified visitor clicks the Show button, the session code is displayed:

Link Link