How to customize the unblu start chat tab (OfflineFlap)

The full example implementation shown below can be downloaded from here: jsc-10.zip

unblu version: 4.x.x (unblu 4 or above). The example must be uploaded to an Apache server, or similar, in order to work correctly.

This example shows how the 'initiator' to the unblu start dialog can be customized. For example, you may not want the little 'start' tab displaying at the bottom of your screen and instead want something specific to your organization. For example, you may want a 'Start Chat' button, or other element, on your page instead of the default unblu tab.

Note that the scripts here show you how to enable your own activation element(s). In order to suppress the default unblu tab (called the 'OfflineFlap' within the Server Configuration Reference) you can alter the following configuration property: (The OfflineFlap can also be suppressed from within the Agent Desk.)

Whether or not the flap should be hidden when offline:

# Type: BOOLEAN 
# Default value: "false" 
com.unblu.cobrowsing.hideOfflineFlap=true

After clicking on the 'start chat' button, the following dialog box displays. Note here that after clicking your start element the process is exactly the same as the default behavior.

Note: All file/object/function names can be changed according to your needs.

  1. Create an HTML page.
  2. Create a JavaScript file named 'snippet.js' and paste the snippet into it. The snippet can be found in your account at www.unblu.com. (unblu.com -> myunblu -> administer account -> integration section.)

    Keep in mind that the snippet should be placed after the last tag in the section, but before any other script. All the other JSAPI consuming scripts must only appear after the snippet.

  3. Include the snippet in your HTML file, inside the tag (using the appropriate location of the actual 'snippet.js' file within your project tree).

<script type="text/javascript" src="js/snippet.js"></script>
  1. Create an empty JavaScript file and include it in your HTML page after the <body> tag. The start session dialog will be triggered by this function when the script is called.
<script type="text/javascript" src="js/main.js"></script>
  1. Inside 'main.js' you need to declare one variable/object to hold the unblu API and one object to hold the activation element from the HTML page. You also need to add 'eventListener' to this element.
var unbluAPI;
var el; // activation element
el = document.getElementById('startChat');
el.addEventListener('click', start, false);
  1. Declare the 'start' function, which will get the unblu API and then activate the start session dialog using “unbluAPI.core.visitor.ui.Dialogs.showChatSessionDialog()”
function start() {
    unblu.registerApiConsumer(function (api) {
        if (typeof api.fatalError != 'undefined') {
            return;
        }

        unbluAPI = api;
    }, ['core.visitor.ui']); // Add unblu packages at this location depending on which one of them you need

    if (unbluAPI) { // if the unblu API is loaded
        unbluAPI.core.visitor.ui.Dialogs.showChatSessionDialog(); // Showing the start chat session unblu dialog
}};
  • deploycloud
  • deployonprem

results matching ""

    No results matching ""