Javascript

Move past screen sharing and add a new dimension of Interactivity in your web apps with Sariska’s multi-user SDK for a collaborative world

With our SDK, you can create a co-browsing experience for any web page with a 95% smaller payload than screen sharing, allowing for multiple cursors. Co-browsing annotates both parties' cursors as you navigate the website together with your team.

Note: Please checkout Setup Section to get our chrome extension.

Generate API Key

In order to get started with using the Co-Browsing SDK, you will need your API key which you generated in console.sariska.io. For more details, follow this link.

Integration

In order to integrate Sariska's Co-Browsing SDK into your website, you can either import the SDK from the npm registry or get the bundled file from our CDN. Both methods are described below.

NPM:

npm i sariska-cobrowsing

If you are facing dependency conflict related issues, add --legacy-peer-deps as follows: $ npm i sariska-cobrowsing --legacy-peer-deps

CDN:

You could also install the Sariska Co-Browsing library by adding the following script to your website's HTML head tag. Now you can access Co-Browsing API through the CoBrowse global object. This enables you to use the SDK from the browser. The script needs to be added at the bottom of your index.html file in order to work. 

<script src="https://sdk.sariska.io/main.bundle.js"></script>

Import SDK​

To import the SDK, add the following command to your code.

import {coBrowsing} from 'sariska-cobrowsing';

Pass your API key or JWT Token through Window Object:

To initiate co-browsing, you need to provide either your API Key or JWT Token. Please provide different JWT tokens as Sariska utilizes JWT ID tokens for user authentication and verification.

window["SARISKA_API_KEY"] = "your-api-key" 

or 

window["SARISKA_JWT_TOKEN"] = "your-jwt-token"

Start CoBrowsing

In order to start co-browsing, call its startCoBrowsing method as shown below. Following parameters can be passed.

Please ensure that the sessionName or roomName consists of alphanumeric characters without using hyphens."


coBrowsing.startCoBrowsing("userName", "sessionName", "userId", "mouseColor");

userName: Optional 

sessionName: Required

userId: Optional

mouseColor: Optional

Stop CoBrowsing

In order to stop co-browsing, call its stopCoBrowsing method as shown below.

coBrowsing.stopCoBrowsing();

Using the SDK from your Browser

In order to quickly test the SDK on your website, you can add the bundle file into your html head tab from our CDN. Once your website is running on a local or remote server, you can do the following to start co-browsing.

  1. Open the console on your browser and write the following command

 window.startCoBrowsing("user1", "room");

"user1" is the name of the first user and "room" is the room name for them to co-browse together. You'd see the following response in your console.

  1. On a second tab or window, do the same operation again, for a second user.

window.startCoBrowsing("user2", "room");

"user2" is the name of the first user and "room" is the room name for them to co-browse together. You'd see the following response in your console.

  1. Once both sessions are connected, you'd be able to see both mouse pointers on your webpage as shown.

Refer to sample apps

With CDN: https://github.com/SariskaIO/sariska-co-browsing-sample-app-with-cdn

With NPM: https://github.com/SariskaIO/sariska-co-browsing-sample-app-with-npm

Hosted Demo: https://cobrowse.sariska.io/

Last updated