Jump to: navigation, search

Customize Genesys Co-browse User Interface

The Genesys Co-browse user interface widgets that are visible on your website are based on HTML, CSS, and JavaScript. You can customize these widgets to suit the look and feel of your website.

There are three ways you can customize the UI (User Interface):

See Customization Examples for several detailed examples of UI customization.

Customizing the CSS

The Co-Browse JavaScript automatically loads some CSS files that define how the widgets look. To find these files, you can do one of the following:

  • Download the complete CSS file from the URL http(s)://<COBROWSE_HOST>[:<COBROWSE_PORT>]/cobrowse/css/master-all.css. This is a good starting point for medium to broad customizations such as changing the color scheme.
  • Use Firebug, Chrome Developer Tools, or a similar browser tool to select CSS rules for particular elements.

All Co-browse CSS follows the same principles:

  • Only classes are used.
  • All Co-browse classes begin with the .gcb- prefix.

You can override the Co-browse CSS by adding your own custom rules anywhere in the <head> tag.

Although the Co-browse CSS is loaded dynamically, it is prepended to the beginning of the <head> tag, so your custom CSS will always have higher specificity.

Customization Examples

See Customization Examples for detailed customization examples such as how to customize the Co-browsing button and the toolbar position.


See Localization.

This page was last modified on May 20, 2015, at 21:32.


Comment on this article:

blog comments powered by Disqus