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.)

Add a Button to your Webpage

Add the glance_button="[Glance action]" attribute.

Style the Glance Cobrowse Button

  1. Under Manage Your Account, click the Settings tab.

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

  3. Customize your button using the button customization tool found under Button Customization.

It is most common to place a link or button in the footer of every web page. No matter where the visitor is in their journey through the Company’s website, an agent can ask, “Are you on our website? Could you scroll to the bottom of the page and click the link that says...?""

The cobrowse UI.

Or (more typically), you can choose to immediately start a session and display its Session Code:

The settings tab.

By default, the Cobrowse UI appears at the bottom right of each tagged web page, indented 200 pixels from the right border. To alter its location, add Custom CSS to the Button Customization.

For example, if you add: #glance_cobrowse_btn{ right:auto; left:50px; } it indents the button 50 pixels from the left margin.

NOTE: You many need to clear your browser’s file cache to pick up the change.

Valid Cobrowse Actions

This section describes the available cobrowse actions:

showButton: Shows the Cobrowse UI which the visitor can click to start a session.

toggleButton: Toggles the visibility of the Cobrowse UI.

site: Shows the Terms and Conditions modal with Accept/Decline buttons. Clicking Accept starts the session.

The show terms dialog.

The View Terms anchor text on the example below links to the URL specified in the data-terms url attribute of the Cobrowse script tag, or in Cobrowse Button Customization > Branding.

startSession: Starts a session (and displays the Cobrowse UI).

The cobrowse UI.

data-inputevents: Maps input events to Glance Cobrowse’s actions. The data-inputevents format is { “[modifier]-[keycode]” : “[Glance action]”, …}. For example,

 { “[modifier]-[keycode]” : “[Glance action]”, …}

The example above indicates that pressing Ctrl+Enter should start a session and Ctrl+Tab should toggle the visibility of the Cobrowse button. Allowed modifier keys are Shift, Ctrl, and Alt. The key code may be any standard JavaScript key code.

NOTE: Use single and double quotes exactly as shown in the above example. The outer quotes around the attribute value should be single quotes, and the quotes within the attribute value must be double quotes. Customers should still provide a link or button in addition to the key combinations to allow for starting sessions on mobile devices.

data-cookiedomain: The domain to use for the Cobrowse session cookie. This setting is typically required only for staging sites hosted on a public suffix domain such as azurewebsites.net or herokuapp.com. Specify the full host name as the cookie domain. For example, if your staging site is atabcco.azurewebsites.com, specify data-cookiedomain=”abcco.azurewebsites.com”

data-cookietype: The type of cookie to use for the Cobrowse session. Possible values include the following:

  • normal (default): A non-secure cookie on your website domain. Use this value if visitors need to be able to navigate to insecure pages during a Cobrowse session.

  • secure: A secure cookie on your website domain. You may use this value if visitors will only need to be able to navigate to secure pages during a Cobrowse session.

  • ls: Local storage on your website domain. You may use this value if you would like to avoid adding a cookie to your domain, and if your visitors only navigate to pages on the same local domain.

  • dual: Both local storage and cookie are used. Use this value if you have existing code which may delete cookies on your website domain, including the Cobrowse session cookie.

data-custver: Custom CSS cache buster version parameter. The Cobrowse button custom CSS file has a one week cache time. If a change is made to the custom CSS specify any value in data-custver as a cache buster to force an immediate download of the updated CSS to all visitors.

For example, <a href="javascript:;" glance_button="startSession">Cobrowse</a> causes the anchor text Cobrowse to start a session and show the Glance Cobrowse UI when clicked, while <a href=”#” onclick=”javascript:return false;” glance_button=”showTerms”>Cobrowse</a> causes the anchor text Cobrowse to show the Terms and Conditions modal.

NOTE: When Cobrowse is integrated with a chat, it may not be necessary for the visitor to take any action to initiate a session.

Internationalization

Glance does not have built in support for internationalization of the Cobrowse button. However, all text in the Cobrowse button is specified in CSS, so customers may add CSS to their pages to display different text based on a language specifier in the page.

You can look at the Cobrowse_n.n.n.css file and provide language specific versions of all text specified there.

For example, Cobrowse_n.n.n.css specifies text that appears on the button to stop the session: #glance_stop_btn:before{content:"stop showing"}

If the web pages contain a “lang” attribute, add the following CSS to “Custom CSS” area in the button customization tool: :lang(es) #glance_stop_btn:before{content:"terminar la sesion"} :lang(fr) #glance_stop_btn:before{content:"mettre fin a la session"}

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”cobrowse<script>tag to prevent loading of the default UI script.

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.

The Default button for starting a session:

The default start session button.

(Most customers use their own link, button, or menu item to start the session).

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

The settings tab.

Visitor ID

When the identity of a visitor is known—whether they are logged in or because of a unique cookie—and the agent has access to this id, it is more efficient to use this unique id as a session code rather than a random number. Any identifying piece of information that is known about a visitor at the time a web page is generated can be used as the session code. The identifier is referred to as a Visitor ID and should be embedded on the web page before the Cobrowse script tag. It has the following format:

<script type="text/javascript"> var GLANCE_COBROWSE = { visitorid: "[visitorid]"}; </script>

The Visitor ID can be any alphanumeric string up to 62 characters long. It should be either information that the visitor would know and can communicate to the agent over the phone (for example, a name, phone number, or email address) or an id or account number that can be accessed by the agent.

By continuing to use the site, you agree to the use of cookies. Learn More