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.

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.
Tip
To customize the built-in chat widget, see Customizing the Chat Widget User Interface.

Example: Customizing Live Chat and Co-browsing Buttons

Customization type: CSS Based

Prerequisites

You must have basic knowledge of CSS and HTML.

Tip
The Live Chat and 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 integrated JavaScript application. Live Chat and Co-browsing buttons should appear:

    CoBrowse Customizing UI 1 1.png

  2. Right click the Live Chat buttons and click Inspect Element with Firebug to open the Firebug tool.

    CoBrowse Customizing UI 1 2.png

  3. In Firebug, you can see the CSS rules responsible for styling the button:

    CoBrowse Customizing UI 1 3.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 Firebug:

    CoBrowse Customizing UI 1 4.png

    You can see that there is an additional :hover rule for the button:

    CoBrowse Customizing UI 1 5.png

  5. Base 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-startChat, .gcb-startChat: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:

    CoBrowse Customizing UI 1 6.png

  7. Reload the page. Now, the Live Chat button is replaced with our new image:

    CoBrowse Customizing UI 1 7.png

Tip
The Co-browsing button can be customized in the same way.

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:

CoBrowse 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 Integrated JavaScript Application 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() {
        // ...
    });
    Tip
    You can subscribe to the readiness of the UI using the onReady Callback.
  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.

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

This page was last modified on November 27, 2014, at 07:04.

Feedback

Comment on this article:

blog comments powered by Disqus