Customize Genesys Co-browse User Interface
Contents
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):
- Adding additional CSS to your website that overrides the default CSS for the widgets. 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 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.
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.