Technology has enabled countless new ways for humans to connect from social networks to collaborative tools like CoBrowsing. In short, CoBrowsing consist of at least two people navigating a website together at the same time. OmniBrowse by SaleMove is a platform that enables you to connect with others by participating in context driven conversations via dual cursor CoBrowsing with an easy, out-of-the-box integration.

CoBrowsing in action OmniBrowse integration

Why you would like to CoBrowse with someone? There are times when you are trying to do some action online such as filling your taxes, making a claim to your insurance or simply trying to customize a product or service and you find yourself lost in the process or in the site. OmniBrowse enables businesses to provide the help that you so much need by guiding you through the processes and navigating the website together.

There are two sides to an OmniBrowse Engagement:

  • Visitor Side: This consists of the Visitor browsing the target website, whether that is public facing or behind authentication area of the site.
  • Operator Side: This is the representative from the company who is able to Observe the browsing session of the Visitor and further engage with the Visitor via full dual-cursor CoBrowsing. The Operator’s view can be embedded into other applications, such as Customer Relationship Management (CRM) applications.

This guide teaches how to integrate OmniBrowse into a site and how Operators can connect and help the site’s Visitors by engaging in a CoBrowsing session.

Visitor

Setting up OmniBrowse in the Site

In a previous post we went over how to Install SaleMove onto a site. In short, integrators just need to add a script element to anywhere in the site’s source or the pages where OmniBrowse will be enabled. The script will give access to SaleMove’s JS API, which later we be used to start the interactions between the Visitor and the Operator and also to provide information that is already known about the Visitor.

<script src="https://api.salemove.com/salemove_integration.js"></script>

Sending Visitor Information

There are times when a Visitor can be identified in a site, for example, after login into her online account to manage a bank account or a shopping basket. Typically, Visitors have a unique identifier or External ID within system such as CRMs that can be used to do look ups and find extra information about that Visitor. In OmniBrowse, that External ID can be used to start a Live Interaction via CoBrowsing.

First, the External ID needs to be shared by sending it to our platform via JavaScript or REST. Later when an Operator attempts to start a CoBrowsing session he can find the Visitor by the External ID that was shared with SaleMove. In this example we will use our JavaScript API, but there is the option to use SaleMove’s REST API as well.

var data = { externalId: "AC01986" };

sm.getApi({version: 'v1'}).then( salemove => {
  salemove.updateInformation(data).then(() => {
    console.log('success sending custom attribute to salemove');
  }).catch( error => {
    console.log('error sending custom attribute to salemove');
  });
});

In the code above, we are doing a couple of things. First, we get an instance of SaleMove (Line 3). Later, in Line 4 we call the method updateInformation and pass a JSON Object, defined in Line 1, as the parameter with the Visitor’s Information including the External ID.

There are scenarios where Visitor is unknown and cannot be identified beforehand, therefore an External ID cannot be set. Those unknown Visitors are assigned with a Visitor Code. A Visitor Code is a 5 digit code that the Visitor can display by pressing CTRL + Y. Later that Visitor Code can be used to start a CoBrowsing session. Naturally, the Visitor Code is a fallback for those scenarios where Visitor is unknown since it adds an extra step in the process because the Operator needs to ask the Visitor for her Visitor Code whereas when using the External ID the Visitor does not have to do anything and the experience is much more seamless.

At this point in time, the Visitor has landed in the page and her External ID & Visitor Code among other information have been registered in SaleMove. In the next steps we describe how Operators can use this information to start a live interaction with the Visitor.

Operators

CoBrowsing can be a powerful tool that Operators can use to help Visitors and improve their customer experience (CX). While being on the phone with a Visitor and having a Live CoBrowsing session the Operator can describe to the Visitor not just how to solve his problem but actually solve the problem together by Navigating the site.

Before starting a CoBrowsing session between the Operator and the Visitor the Visitor needs to be identified. Here is where the External ID is useful. An integrator can do a lookup for a Visitor using the External ID that has been previously set for that Visitor when the Visitor landed in the site.

The next snippet shows how to lookup for a Visitor by External ID. It queries for Visitors who are currently Online and who have the External ID as AC01986. An Online Visitor is a Visitor who is currently browsing the site. Similarly, an Offline Visitor is a Visitor who previously has visited the site but currently is not Online. More information about other OmniBrowse REST API Endpoints can be found in here.

var siteId = "20dd0b91-00f0-4421-b713-5764b1e2e310";
var externalId="AC01986";
var url = "https://omnibrowse.salemove.com/sites/" + siteId +"/visitors?external_id=" + externalId;
var token = "";
fetch(url, {
    method: 'get',
    headers: {
      'Content-type': 'application/x-www-form-urlencoded',
      'Authorization': 'Token '+ token
    }
  }
)
.then( response => {
  if (response.status >= 200 && response.status < 300) {
    return Promise.resolve(response);
  } else {
    return Promise.reject(new Error(response.statusText));
  }
})
.then(response => response.json())
.then(data => { data.map( visitor => console.log(visitor)) })
.catch(error => console.log(error))

Starting a CoBrowsing Session

To start, an integrator needs two pieces of information:

  • Operator API Token: It is a 22 character string that it is used for Authentication against our REST API.
  • Site ID: It is a 36 character string (UUID) that is unique for a site.

Please contact SaleMove’s success management or support teams for acquiring any of those items.

The first step to start a CoBrowsing session is to obtain a Launch Token. The Launch Token can be obtained via OmniBrowse REST API. For security purposes, OmniBrowse uses a different Launch Token for each session, which means that a new Launch Token needs to be requested every time a new CoBrowsing session starts.

var url = "https://omnibrowse.salemove.com/auth/token";
var token = "8YnZYgCWR5pcqEYmPxnlxw";
fetch(url, {
  method: 'post',
  headers: {
    'Content-type': 'application/x-www-form-urlencoded'
  },
  body: ('api_token=' + token)
})
.then(response => {
  if (response.status >= 200 && response.status < 300) {
    return Promise.resolve(response);
  } else {
    return Promise.reject(new Error(response.statusText));
  }
})
.then(response => response.json())
.then(launchToken => console.log(launchToken))
.catch(error => console.log(error))

Once the Launch Token has been acquired it is straight forward to launch the CoBrowsing session. All the integrator needs to do is to contruct a Launch URL including the Launch Token, Site ID, and External ID or Visitor Code and load such a Launch URL within an Iframe.

To start a CoBrowsing session using the External ID, the Launch URL should look like:

https://omnibrowse.salemove.com/auth/{Launch Token}/{Site ID}/external_id/{External ID}

To start a CoBrowsing session using the Visitor Code, the Launch URL should look like:

https://omnibrowse.salemove.com/auth/{Launch Token}/{Site ID}/visit_id/{Visitor Code}

Putting it all together

To recap OmniBrowse enables to start CoBrowsing sessions between two parties namely Visitor & Operator. The Visitor is typically a customer whose information, including an external unique ID, is known and shared with SaleMove. These information can be sent to SaleMove via JS or REST. Later, that information can be used to connect an Operator with that particular Visitor. If the Visitor does not have an external ID then SaleMove assigns a unique Visitor Code to every visitor that can be also used to start a CoBrowsing session between the Visitor and the Operator.

The Operator can start the CoBrowsing session by requesting a Launch Token and then use that Token in combination with the site ID and Visitor External ID or Code to construct a Launch URL that will be load within an Iframe. The Iframe loads and synchronizes the Visitor Session.

There are running examples of the Operator Side in here and for the Visitor in here.

Conclusion

In this article we described how to integrate OmniBrowse into any website and enable live interactions between two participants, Visitors and Operators. The scenarios and benefits of integrating these kind of tools into online commerse are numberless.

On one hand the experience for customers navigating a site can be significantly improved by providing help and assistance at the right time in the right place and truly providing a great customer experience (CX), resulting in more happy and loyal customers and possibly an increase in Sales. On the other hand, CoBrowsing can be used as a tool to reduce the time that Operators spend helping customers either in support or sales scenarios, therefore, reducing costs or optimizing the efficiency of any engagement center.

These scenarios relate to SaleMove’s vision, meet and exceed the in-person customer experience online but there are many other scenarios where CoBrowsing can be a powerful tool. Take remote peer programing, one could have an online editor, plug in OmniBrowse and have a remote co-pilot. Another scenario can be training, say one comes up with a new all shiny product and one needs to train remotly the new users, one can hook the site up with OmniBrowse and use the tool to remotly guide users through.

What others can you think of?