This document describes version 5 of Unblu. If you’re using the latest major version of Unblu, go to the documentation of the latest version.

The support period for version 5 ended on 22 November 2021. We no longer provide support or updates for this version. You should upgrade to the latest version of Unblu.

How can I embed my own button to start Unblu?

Problem

Solution

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.

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

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)
unblu_activation_element_start

The following examples show different ways to provide a starting point for the security code (PIN) dialog. 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"/>