Floating Visitor UI integration
To enable the Floating Visitor UI on your website, the Unblu installation must be integrated with your web infrastructure. This involves addressing three issues:
-
How is the client code for the Floating Visitor UI (often called the Unblu snippet) included in your website page? The options are dynamic injection or static inclusion.
-
Where is the Unblu Server positioned inside your infrastructure? The options are site-embedded or cross-origin.
-
Do you need support for protected resource upload to the agent?
| These options only apply in an on-premises deployment. In an Unblu Cloud deployment, dynamic injection, site-embedded integration and protected resource upload aren’t supported. Consequently, all Unblu Cloud deployments use static inclusion and cross-origin integration and don’t have protected resource upload. |
Including the Unblu snippet
When an Unblu-enabled website is initially requested by a visitor’s browser the returned page includes not just the normal website code but also extra code that implements the Unblu visitor interface. This extra Unblu client code is often called the Unblu snippet. It can be included in your website code by either static inclusion or dynamic injection.
Static inclusion
In this method you alter your website’s markup to include the Unblu snippet. The snippet in turn loads the Unblu client code. Every page you want to display the Floating Visitor UI launcher button on must include the snippet. This method of inclusion is relatively simple but you do need access and permission to change the actual code of the website in question.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" defer="defer"
src="https://unblu.cloud/unblu/visitor.js?x-unblu-apikey=YOUR_API_KEY"></script> (1)
</head>
<body>
<!-- Your HTML body -->
</body>
</html>| 1 | Replace YOUR_API_KEY with your API key. |
The snippet with the correct key can also be copied from the API keys section in the Account Configuration.
| For certain use cases you might not need the snippet on all pages. For example, if you only want Unblu’s universal co-browsing or document co-browsing to be available on a specific section of your website, it’s enough to instrument only those pages. |
Dynamic injection
In this method you configure the Unblu snippet in a single central place and have it injected into the appropriate pages. There are two ways of doing this:
-
Dynamic injection with the SecureFlow Manager
-
Dynamic injection with a tag management system
Dynamic injection with the SecureFlow Manager
With this strategy you use a reverse proxy in front of your website server that includes the Unblu SecureFlow Manager. This method doesn’t involve any changes to the website code itself, but it does involve installation of software on your corporate infrastructure. If you already have a suitable cache/reverse proxy installed you may be able to simply add the SecureFlow Manager to it.
The SecureFlow Manager will manage the injection of the required JavaScript into the pages to enable the Floating Visitor UI. It also provides the protected resource upload functionality (see below).
For more information, refer to SecureFlow Manager.
Dynamic injection with tag management
An alternative method of including the Unblu snippet is to leverage an existing tag management system to inject the snippet into the desired pages of your website. Tag management systems are used primarily to centralize the management of injecting marketing-related code into pages across large websites, but in many cases they can be used to inject any JavaScript snippet, including the Unblu snippet.
Integration with single-page applications (SPAs)
Single-page applications (SPAs) pose special challenges to integrating Unblu. If your customer navigates to a part of your SPA that uses a different API key, for example, or changes the language of the application, Unblu won’t be aware of the fact without a page reload.
You will have to take some additional measures to ensure that the Unblu UI works as your customers expect it to. If you are adding the Floating Visitor UI to an SPA, review our article on integrating Unblu in an SPA.
Protected resource upload
As discussed earlier, embedded co-browsing works by capturing the state of the DOM of the Unblu-enabled website on the visitor browser and transferring that state to the agent browser.
Once the DOM has been rebuilt on the agent browser, there are typically additional resources (stylesheets, images, etc.) that the browser must request to complete the rendering of the visitor’s view.
In many cases, these resources will be inaccessible without authentication and authorization, for example, if they’re part of a bank’s e-banking site. In normal circumstances, such as in the case of the visitor browser, this doesn’t present a problem since that browser will already be signed in to the site. However, co-browsing is a special case. The agent browser doesn’t have the same authorization as the visitor browser and yet, to render the visitor’s view properly, it needs access to the protected resources.
Since uploading the resources from the visitor browser is considered unsafe and would usually be too slow, Unblu solves this problem with the SecureFlow Manager, a software component installed in a proxy in front of the website server that caches the resources and uploads them on demand to the Unblu server, from where the agent browser can successfully request them and build an accurate rendition of the visitor’s view.
Removing the Floating Visitor UI from a page
There are cases where you may no longer want the Floating Visitor UI to be available to a visitor. When an agent has been able to answer a visitor’s questions, you might want to remove the Unblu functionality from the page that the visitor is on. You can accomplish this using the Visitor JS API. For further information, refer to the documentation on the deinitialize() method.