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 data-glancebutton="[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. Then, no matter where your visitor is in their journey through your website, an agent can say something like this.

_Are you on our website? Please scroll to the bottom of the page and click the button that says Cobrowse with agent. When your visitor clicks the link they see a popup prompt like this, and can click it to start a session.

Show button.

Or (more typically), you can make your link or button immediately start a session and display the Session Code. Your visitor sees this and can read the code to the agent.

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 cache to pick up changes as you change styling.

Create a Vertical "Stop Showing" Button

When a Cobrowse session begins, the Stop Showing button appears attached to the bottom of the screen in the right corner. You can add custom CSS to have the button appear on the bottom of the screen but attach to display vertically and attach to the side.
The settings tab.

You can add the following code to the Custom CSS section in the Cobrowse Settings page of My Account, to move the Stop Showing button to the side on the bottom right corner.

It is recommended that you place and test this code in a staging environment before moving to production.

#glance_cobrowse_btn:not(.expanded) #glance_start_label {
	transform: rotate(270deg);
	position: fixed;
	right: -76px !important;
	bottom: 120px;

#glance_cobrowse_btn:not(.expanded)  #glance_expand {
	display: none;

Valid Cobrowse Actions

This section describes the available cobrowse actions:

showButton: Shows the Cobrowse UI which the visitor can click to start a session. Only available with the 'original' widget.

toggleButton: Toggles the visibility of the Cobrowse UI.

showTerms: 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]”, …}

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 a staging site hosted on a public suffix domain such as or Specify the full host name as the cookie domain. For example, if your staging site is, specify data-cookiedomain=””

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:;" data-glancebutton="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;” data-glancebutton=”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.


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"}

If you find you reach the character limit in the Custom CSS box, you can use import statements to reference localization customizations.

  1. Put your translations in a CSS file that you will upload to Glance.
  2. From Settings > Manage Your Cobrowse Settings > Resources > upload the CSS file.
  3. From Settings > Manage Your Customization Settings > Custom CSS, scroll to the Custom CSS imports field.
  4. Enter the import statements to the custom CSS imports field. This import statement looksl ike this, swapping the URL with the URL from the resources section. For example, @import url("");
  5. Click Save Staging Customization or Publish to Production to verify.

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.

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 64 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