Web
Javascript SDK for Web

Installation

The Cobrowse SDK for web is available either using a <script> tag via CDN, or can be included in your build via NPM.
Script
NPM
Add this javascript snippet to the top of the <head> section of your website.
1
<script>
2
(function(w,t,c,p,s,e){p=new Promise(function(r){w[c]={client:function(){if(!s){
3
s=document.createElement(t);s.src='https://js.cobrowse.io/CobrowseIO.js';s.async=1;
4
e=document.getElementsByTagName(t)[0];e.parentNode.insertBefore(s,e);s.onload=function()
5
{r(w[c]);};}return p;}};});})(window,'script','CobrowseIO');
6
7
CobrowseIO.license = "put your license key here";
8
CobrowseIO.client().then(function(){
9
CobrowseIO.start();
10
});
11
</script>
Copied!
First install the Cobrowse SDK for web via NPM:
1
> npm install cobrowse-sdk-js --save
Copied!
Then you can initialise the SDK:
1
import CobrowseIO from 'cobrowse-sdk-js'
2
3
CobrowseIO.license = 'your license key here'
4
CobrowseIO.start()
Copied!

Add your license key

Please register an account and generate your free License Key at https://cobrowse.io/dashboard/settings.
This will associate sessions from your website with your Cobrowse.io account.

Try it out

Once you have your Javascript snippet and license key set up, navigate to https://cobrowse.io/dashboard to see your device listed. You can click the "Connect" button to initiate a Cobrowse session!
Note: Cobrowse needs to be able to access your website, so localhost addresses are not recommenced for testing. To test on a local development version, we recommend using ngrok.

Minimum browser requirements

Cobrowse.io for Web supports all major browsers including Chrome, Firefox, Safari, Opera, Edge, and IE11.
Our Web SDK has an optional "full-device" mode which enables the user to share their entire desktop without any installation. Due to browser limitations, this feature is not available on IE11, or in the mobile browsers such as Mobile Chrome and Mobile Safari. Please see our native Android and iOS SDKs for full device capabilities on mobile.
The specific browser versions supported are Chrome 16+, Firefox 11+, Safari 7+, Opera 12.1+, Edge 12+, and IE11.

Advanced configuration

Non-public resources (e.g. CSS)

In pre-production environments (such as UAT), certain resources (e.g. CSS) may not be exposed to the public internet and so these elements of your webpage will not appear in sessions. Make sure these resources are accessible to our server by whitelisting requests from *.cobrowse.io.
In production environments, these assets are always available and so there is no problem! We also support local testing advise exposing your webpage using ngrok (or similar) for end-to-end testing.

Content Security Policies (CSPs)

If you have CSPs on your website then they may block the functionality of Cobrowse.io. When a CSP is blocking Cobrowse.io, then there will be an error in the javascript console stating:
Refused to connect to https://cobrowse.io/... because it violates the document's Content Security Policy.
To solve this, you will need to enable the following in your CSP:
connect src of: connect-src cobrowse.io *.cobrowse.io wss://*.cobrowse.io;
script-src of: script-src 'unsafe-inline' js.cobrowse.io;
You should be able to replace the unsafe-inline with the hash of your snippet if you wish. This will be available in the javascript console.

Incognito/private browser windows

If the same user has an incognito window (or multiple) running at the same time as their usual browser window, then the incognito windows will be separate devices in the device listing.
Any questions at all? Please email us at [email protected].