Jump to: navigation, search

Customize Genesys Co-browse User Interface

The Genesys Co-browse user interface elements that are visible on your website are based on HTML, CSS, and JavaScript. You can customize these elements 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 elements 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.

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

Changing the Co-browse toolbar background color

To change the Co-browse toolbar background color, just add the following code to the web page before the instrumentation script:

<style>
  .gcb-toolbar  {
     background: #ee0000;
  }
</style>

Where #ee0000 is substituted with the desired HEX color.

Customization Examples

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

Localization

See Localization.

This page was last edited on June 12, 2020, at 14:48.
Comments or questions about this documentation? Contact us for support!