Unblu 4.1

Integrating unblu in your Website

1. Website Integration

To integrate unblu in your website, unblu uses a small snippet of JavaScript code. This is no different than for example integrating Google analytics into your website. To integrate the unblu Business Line, the snippet must be inserted into all pages from which co-browsing can start and into all pages which should support Live Chat. If you do not have the snippet present, the chat session will close should a participant navigate to an un-instrumented page.

For unblu enterprise the snippet must be present in all pages you would like to instrument for co-browsing.

You can find your account specific code snippet in the Integration section of the administrative application. Adding the snippet to your site is very straightforward:

Insert the code snippet into the <head> section of every page of your website. If you use a content management system, this is usually one copy-paste action in the page template.

Please consider the following:

  • If the <head> section contains no <meta http-equiv="content-type"> or <meta-charset> directive, then place the snippet immediately after the <head>-tag (that is, as the first element inside of the <head> section).
  • If the <head> section contains a <meta http-equiv="content-type"> or <meta-charset> directive, then place the snippet immediately after that directive. If you can, try to move any other content of the <head> section below the snippet.

Do not modify the snippet code (and make sure that no line breaks or special characters were added by copying it).

Note that The unblu JavaScript code does not affect the normal functioning of your website. The unblu code is loaded asynchronously, so only after your entire page was delivered to the requestor.

Example of the integration of the code snippet:

 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <!-- insert the unblu snippet here -->
 <meta name="author" content="John P.">


2. Graphical Launch Elements - The default way: Help button on the left

By default, after integrating the unblu snippet in your website, a "Live Support" button appears on the left hand side of your webpages. Customers clicking this button will have a dialog showing up to enter the security code received from your support agent. The graphical appearance (color or monochrome) and the dialog text that appear using the default user interfaces can be configured inside the administrative application under Account Settings and Domain Settings menu points.

3. Graphical Launch Elements - Using Activation Elements

Activation elements provide an easy way to integrate unblu‘s functions into the look-and-feel of your website. They allow you to design any element, such as buttons or menu entries, which unblu uses to initiate and end co-browsing.

Note: The JavaScript API provides similar features. It is more technical to use, but you can create even more flexible elements with it (such as buttons that are shown only during the hours when your telephones are serviced).

3.1. How Activation Elements Work

When unblu starts, it checks your website content for specific IDs. If these IDs are used on an element, then clicking this element will start an action, such as starting the co-browsing connection process.

Currently, unblu supports the following IDs:

  • unblu_activation_element_token: clicking shows the start session dialog. When a customer has typed a valid security number into the dialog, co-browsing starts.
  • unblu_activation_element_invitation: clicking shows the invitation dialog, where customers can send an email-invitation to a friend.
  • unblu_activation_element_termination: clicking shows a window that asks if the user wants to terminate co-browsing (if the user is not currently co-browsing, clicking the element does not have any effect).

3.2. Examples

The following examples show different ways to provide a starting point for social browsing. You can implement the other IDs in the same manner:

 <a id="unblu_activation_element_token">Click to start co-browsing</a>

You can use any element as an activation element:

 <span id="unblu_activation_element_token">Click to start co-browsing</span>

Specifically, you can use an image:

 <img src="start.png" id="unblu_activation_element_token" />