Customize Genesys Co-browse User Interface
Contents
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):
- Adding additional CSS to your website that overrides the default CSS for the elements. See Customizing the CSS below.
- Using the JavaScript API.
- Using Localization.
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.
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.