To use Blitzz Cobrowse in your own website, you'll need to add the Cobrowse SDK for each website you want to support. We've made this as simple as possible, with just a few lines of code.
Once SDK is added to your app, authenticated agents can connect to user devices entirely through their web browser - no installs or plugins needed.
The Cobrowse SDK for the web is available using a
<script> tag via CDN.Note: The below guide is for allowing agents to connect to the website visitors without needing to generate and share the 6-digit session code manually. If you want to implement manual code generation then please click here.
Via Script tag
Add this javascript snippet to the top of the <head> section of your website.
<script>
let blitzz;
let st = document.createElement("script");
st.src = "https://media.blitzz.co/sdk/blitzzcobrowse.min.js";
st.async = 1;
let tx = document.getElementsByTagName("script")[0];
tx.parentNode.insertBefore(st, tx);
st.onload = function () {
if (!blitzz) {
blitzz = new BlitzzCobrowse({});
blitzz.initialize({
license:"your license key",
});
}
};
</script>Please register an account and generate get your License Key at https://{{Domain}}.blitzz.co/cobrowse/settings/installation.
This will associate sessions from your website with your Blitzz account.
Once you have your Javascript snippet and license key set up, navigate to https://{{Domain}}.blitzz.co/cobrowse/ 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 ngrok.
Cobrowse 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 mobile browsers such as Mobile Chrome and Mobile Safari.
The specific browser versions supported are Chrome 16+, Firefox 11+, Safari 7+, Opera 12.1+, Edge 12+, and IE11.
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
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.
You can check which assets are encoded by pasting the hex code into https://cryptii.com/pipes/hex-decoder.
Make sure these assets are accessible to our server by making them public.
If you have CSPs on your website then they may block the functionality of Cobrowse. When a CSP is blocking blitzz.co, then there will be an error in the javascript console stating:
Refused to connect to https://blitzz.co/... 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 blitzz.co *.blitzz.co wss://*.blitzz.co ;If you self-host your instance, then replaceblitzz.cowith your<your instance domain>in each case.
script-src of:
script-src 'unsafe-inline' media.blitzz.co/sdk/;If you use the self-hosted version of the web SDK instead ofmedia.blitzz.co, then you should use that full URL instead, e.g.https://<your instance domain>/sdk-js/Cobrowse.js.
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.
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.