Cobrowse.io Docs
  • Getting started
  • SDK Installation
    • Web
    • iOS
    • Android
    • React Native
    • Flutter
    • .NET Mobile
    • macOS
    • Windows
  • SDK Features
    • Account config
    • Identify your devices
    • Use 6-digit codes
    • Redact sensitive data
    • Viewing PDFs
    • Universal Cobrowse
    • Customize the interface
      • Active session controls
      • 6-digit code screen
      • User consent dialog
      • Remote control consent dialog
      • Full device consent dialog
      • Localization / translation
    • Initiate sessions with push
    • Listening for events
    • Full device capabilities
      • Full device screen sharing
      • Full device remote control
      • Managing full device mode
    • Advanced configuration
      • Starting and stopping the SDK
      • Declaring capabilities
      • Intercepting mobile SDK network requests
      • Web
        • IFrames support
        • IE 11 polyfills
        • Cross-domain session support
        • Ignore Views
      • iOS
        • Alternate render method
        • Custom touch handling
      • Android
        • Backporting TLS to older Android versions
  • Agent-side integrations
    • Agent-side overview
    • Platform integrations
      • Zendesk
      • Salesforce
        • Migrating from legacy to v2
        • Salesforce (Legacy)
      • Genesys
        • Genesys Cloud
        • Engage Workspace Web Edition (WWE)
        • Engage Workspace Desktop Edition (WDE)
      • Intercom
      • Freshworks
      • Talkdesk
      • NICE
    • Custom integrations
    • Agent SDK
      • API Reference
      • Sample code snippets
    • Authentication (JWTs)
      • JWT Policies
    • Authentication (SAML 2.0)
    • IFrame embeds
  • Enterprise self-hosting
    • Self-hosting overview
    • Docker Compose
    • Helm chart
      • Image Pull Secret
      • Environment Variables
      • Optional recording components
      • Pod Annotations
    • AWS terraform
      • AWS metrics configuration
    • Azure terraform
      • Azure metrics configuration
    • GCP terraform
      • GCP metrics configuration
    • Sizing guidelines
    • Running your instance
      • Adding a superuser
      • Limiting account creation
      • Limiting magic link recipients
      • Configuring SMTP
      • Managing your deployment
    • Monitoring your instance
      • Available metrics
      • Self-Hosted Prometheus
    • Advanced configuration
      • Air gap configuration
      • Pin web SDK version
      • L7 firewall configuration
      • Docker proxy configuration
    • Troubleshooting
Powered by GitBook
On this page
  • Installation
  • Add your license key
  • Try it out
  • Minimum browser requirements
  • IFrames support
  • IE 11 support
  • Cross-domain support
  • Something not working?
  • Non-public resources (e.g. CSS)
  • Content Security Policies (CSPs)
  • Incognito/private browser windows

Was this helpful?

  1. SDK Installation

Web

Javascript SDK for Web

PreviousGetting startedNextiOS

Last updated 21 days ago

Was this helpful?

Installation

The Cobrowse SDK for web is available either using a <script> tag via CDN, or can be included in your build via NPM.

Add this javascript snippet to the top of the <head> section of your website.

<script>
    (function(w,t,c,p,s,e){p=new Promise(function(r){w[c]={client:function(){if(!s){
    s=document.createElement(t);s.src='https://js.cobrowse.io/CobrowseIO.js';s.async=1;s.crossOrigin='anonymous';
    e=document.getElementsByTagName(t)[0];e.parentNode.insertBefore(s,e);s.onload=function()
    {r(w[c]);};}return p;}};});})(window,'script','CobrowseIO');

    CobrowseIO.license = "put your license key here";    
    CobrowseIO.client().then(function(){
        CobrowseIO.start();
    });
</script>

First install the Cobrowse SDK for web via NPM:

npm install cobrowse-sdk-js --save

Then you can initialise the SDK:

import CobrowseIO from 'cobrowse-sdk-js'

CobrowseIO.license = 'your license key here'
CobrowseIO.start()

Add your license key

Please register an account and generate your free License Key at .

This will associate sessions from your website with your Cobrowse.io account.

Try it out

Minimum browser requirements

Cobrowse.io for Web supports all major browsers including Chrome, Firefox, Safari, Opera, Edge, and IE11.

The specific browser versions supported are Chrome 16+, Firefox 11+, Safari 7+, Opera 12.1+, Edge 12+, and IE11.

IFrames support

IE 11 support

Cross-domain support

Something not working?

Please use the following steps to troubleshoot issues on web:

  • check that all steps of these docs and requirements have been followed

  • inspect the developer console on the agent and client-side to see any error messages

  • check the below sections to see if they match the error messages you can see

Non-public resources (e.g. CSS)

Certain resources (e.g. CSS) may not be exposed to the public internet (e.g. pre-production environments such as UAT) and so these elements of your webpage will not appear to agents.

Make sure these assets are accessible to our server by making them public.

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 allow access to Cobrowse APIs you will need to enable the following in your CSP:

connect src of: connect-src cobrowse.io *.cobrowse.io wss://*.cobrowse.io;

If you self-host your instance, then replacecobrowse.io with your <your instance domain> in each case.

To load the JS SDK and the script tag at the top of this page:

script-src of: script-src js.cobrowse.io 'nonce-2726c7f26c';

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.

Once you have your Javascript snippet and license key set up, navigate to 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 recommended for testing. To test on a local development version, we recommend using .

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 and SDKs for on mobile.

check whether the issues persist when using directly

send a description, screenshots, and optionally a video of the above to !

You will see error messages in the developer console relating to https://cobrowse.io/proxy/1/assets/<hex encoded asset> . You can check which assets are encoded by pasting the hex code into .

Note this is using a nonce source which must also be present on the script tag which adds the Cobrowse SDK to your page. The value 2726c7f26c represents the random value that should be dynamically generated and unique for each request. Read more about .

If you use the self-hosted version of the web SDK instead of js.cobrowse.io, e.g. , then you should use that full URL instead, e.g. https://<your instance domain>/sdk-js/CobrowseIO.js.

Any questions at all? Please email us at .

https://cobrowse.io/dashboard/settings
https://cobrowse.io/dashboard
ngrok
Android
iOS
full device capabilities
IFrames support
IE 11 polyfills
Cross-domain session support
https://cobrowse.io/dashboard
hello@cobrowse.io
https://cryptii.com/pipes/hex-decoder
CSP nonces here
following this
hello@cobrowse.io