How to use and implement social co-browsing

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.

This example demonstrates how you can use and implement social co-browsing. When you use the social co-browsing feature, the way the agent interacts with the visitor, in terms of generating the PIN, is reversed (or somewhat inverted). That is; normally, a PIN code is generated on the agent side and the visitor uses the PIN code to join the session. However, when using the social co-browsing feature the session is started on the visitor side, then the PIN is generated on the visitor side and the URL/PIN would be transferred to the agent in order for the agent to join the session.

After clicking Start Co-Browsing the following displays.

A Social co-browsing session has been created.

After this, a link will be generated with the location on the server, which you can use to invite another participant to the session.

Any of the file/object/function names can be changed according to your needs.

Implementation

Create an HTML page which includes one activation element and one 'p', or any element that can be used to display information later.
Create a JavaScript file called '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 meta tag in the head section, but before any other script. All of the other JSAPI-consuming scripts must only appear after the snippet.
Include the snippet in your HTML file inside the <head> tag (using the appropriate location of the actual 'snippet.js' file within your project tree).
```
<script type="text/javascript" src="js/snippet.js"></script>
```
Create an empty JavaScript file and include it in your HTML page after the <body> tag. The Start Session dialog is triggered by the function in this file.
```
<script type="text/javascript" src="js/main.js"></script>
```

Inside 'main.js' declare the 'loadCobrowsing' function, which gets the unblu API and then activates the social co-browsing using 'unbluAPI.core.visitor.socialbrowsing.SocialBrowsing.startSession()'.

Using the 'SocialBrowsing.startSession' function on line (1) you can start a social-browsing session using our API.

Then on line (4) you need to use 'addParticipant()' to add a participant to this session.

Following this at line (7) fill the paragraph in the HTML with the social browsing invitation link.

unbluAPI.core.visitor.socialbrowsing.SocialBrowsing.startSession("testSession", {
    onSuccess: function (sessionInfo) {
        unbluAPI.core.visitor.socialbrowsing.SocialBrowsing.addParticipant("agent", {
            onSuccess: function (invitationInfo) {
                console.log(invitationInfo.invitationLink);
                document.getElementById("entryURL").innerHTML = invitationInfo.invitationLink;
            }, onFailure: function (err) {
                console.log(err.message);
            }
        });
    }, onFailure: function (err) {
        console.log("Fail starting session!" + err.message);
        // Verifying co-browsing availability failed fundamentally.
        // Unblu API is not available
    }
});