Jump to: navigation, search

UI Customization Examples

This is a collection of UI customization examples. Although these examples do not cover every possible customization case, they should give you a sample of what can be achieved and how to begin.

If you use Genesys Widgets, also see the widgets customization documentation.

Tip
Some examples use Firebug as a developer tool. Any other similar tool can be used instead such as Google Chrome Developer Tools, Safari Web Inspector, or Internet Explorer Developer Tools.

Example: Customizing Co-browsing Buttons

Customization type: CSS Based

Prerequisites

You must have basic knowledge of CSS and HTML.

Tip
The Co-browsing buttons are images and cannot be modified using the Localization mechanism.
Tip
You can manage the visibility and moderately change the position of the default buttons using the JavaScript API.

Start of Procedure

  1. In Firefox, open the page instrumented with the Co-browse JavaScript application. The Co-browsing button should appear:

    GCB90 Dev cobrowse button.png

  2. Right click the Co-browsing button and click Inspect to open the Chrome developer tools.

    GCB90 Dev cobrowse firebugtool.png

  3. In Chrome developer tools, you can see the CSS rules responsible for styling the button:

    GCB90 Dev cobrowse firebugcss.png

    GCB90 Dev cobrowse firebughover.png

  4. Also check :hover rules to see if there are any rules applied to the button when the mouse cursor is over it. To do this, enable the :hover modifier in Chrome developer tools. You can see that there is an additional :hover rule for the button.

    GCB90 dev cobrowse hover.png

  5. Based on the rules above, you can prepare your own rules that override the defaults. In this example, we will prepare a custom image with a similar size to the default button and override the background. We will use a public service to generate an image of a kitten via an http request. Here is our CSS:
    /* 1. copy-paste the selector of the element to override */
    .gcb-startCobrowse:hover {
    /* 2. override some rules: */
      background: url(http://placekitten.com/23/84);
    }
  6. Now we add our CSS to the <head> section of our site. The way this is done will depend on the technology your website uses. We want to add code like this to the webpage:

    GCB90 Dev co-browse csscode.png

  7. Reload the page. Now, the Co-browsing button is replaced with our new image:

    GCB90 Dev cobrowse newbutton.png

End of Procedure

Example: Customizing the Toolbar Position

Customization Type: JavaScript Based


In this example, we will customize the starting position of the Co-browse toolbar:

GCB 851 customizing UI 2 1.png

Prerequisites

  1. Experience with JavaScript, jQuery, and browser developer tools such as Firebug.
  2. This example uses the the jQuery library to work with the DOM and assumes that jQuery is available on the page.

Start of Procedure

  1. Obtain the Co-browse API. See Accessing the Co-browse APIs for more information about obtaining the Co-browse API. In this example, we use the single-function mechanism.
    var _genesys = {
        cobrowse: {
            onReady: function(cobrowseAPI) {
                // ...
            }
        }
    }
  2. Use the Co-browse API to subscribe to the onSessionSarted Co-browse event.
    cobrowseAPI.onSessionStarted.add(function() {
        // ...
    });
  3. Use Firebug to determine which element to customize:
    1. Start a Co-browse session.
    2. Right click the Co-browse toolbar and click Inspect Element with Firebug to open the Firebug tool.

      GCB 851 customizing UI 2 2.png

    3. In Firebug, you can see that the element selected for inspection is not the toolbar itself but one of its sub-elements.

      CoBrowse Customizing UI 2 3.png

      You can also see from the Styles tab that position is not set for this element.

    4. You need to find the element whose position you want to change. From the DOM tree in Firebug you can see that this is the .gcb-toolbar.

      CoBrowse Customizing UI 2 4.png

  4. Now, we will use jQuery to override the position of the toolbar. We will set the starting position to 100 pixels from the top edge and 300 pixels from the left edge.
    jQuery('.gcb-toolbar').css({
      top: 100,
      left: 300
    });
  5. Putting it all together, we have the following:
    // 1. Get the API
    var _genesys = {
        cobrowse: {
            onReady: function(cobrowseAPI) {
     
                // 2. Use the API to subscribe on “session started” event
                cobrowseAPI.onSessionStarted.add(function() {
     
                    // 3. Use jQuery to get the toolbar and reposition it
                    jQuery('.gcb-toolbar').css({
                        top: 100,
                        left: 300
                    });
     
                });
     
            }
        }
    };

End of Procedure

Tip
You can achieve similar results using CSS:
.gcb-toolbar {
    top: 100px !important;
    left: 300px !important;
}

This solution is less ideal because you would have to use the !important modifier to override the inline styles of the element and this modifier would make the toolbar non-draggable.

Feedback

Comment on this article:

blog comments powered by Disqus
This page was last modified on March 2, 2018, at 09:52.