Pour utiliser Blitzz Cobrowse sur votre propre site Web, vous devez ajouter le SDK Cobrowse à chaque site que vous voulez prendre en charge. Nous avons rendu l'opération aussi simple que possible : quelques lignes de code suffisent.
Une fois le SDK ajouté à votre application, les agents authentifiés peuvent se connecter aux appareils des utilisateurs entièrement à partir de leur navigateur Web, sans installation ni module d'extension.
Le SDK Cobrowse pour le Web est offert au moyen d'une balise
<script> par CDN.Remarque : le guide ci-dessous permet aux agents de se connecter aux visiteurs du site Web sans avoir à générer et à communiquer manuellement le code de session à 6 chiffres. Si vous voulez plutôt mettre en place la génération manuelle du code, cliquez ici.
Au moyen d'une balise script
Ajoutez cet extrait JavaScript au début de la section <head> de votre site Web.
<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>Créez un compte et générez votre clé de licence sur https://{{Domain}}.blitzz.co/cobrowse/settings/installation.
Les sessions de votre site Web seront ainsi associées à votre compte Blitzz.
Une fois l'extrait JavaScript et la clé de licence configurés, rendez-vous sur https://{{Domain}}.blitzz.co/cobrowse/ pour voir votre appareil dans la liste. Cliquez sur le bouton « Connect » pour lancer une session Cobrowse!
Remarque : Cobrowse doit pouvoir accéder à votre site Web; les adresses localhost ne sont donc pas recommandées pour les tests. Pour tester une version de développement locale, nous recommandons d'utiliser ngrok.
Cobrowse pour le Web prend en charge tous les principaux navigateurs, dont Chrome, Firefox, Safari, Opera, Edge et IE11.
Notre SDK Web offre un mode facultatif « appareil complet » qui permet à l'utilisateur de partager tout son bureau sans aucune installation. En raison des limites des navigateurs, cette fonctionnalité n'est pas offerte dans IE11 ni dans les navigateurs mobiles comme Chrome mobile et Safari mobile.
Les versions prises en charge sont Chrome 16+, Firefox 11+, Safari 7+, Opera 12.1+, Edge 12+ et IE11.
Suivez les étapes ci-dessous pour dépanner les problèmes sur le Web :
- vérifiez que toutes les étapes et exigences de cette documentation ont été respectées
- examinez la console de développement du côté de l'agent et du client pour repérer les messages d'erreur
- consultez les sections ci-dessous pour voir si elles correspondent aux messages d'erreur affichés
- envoyez une description, des captures d'écran et, au besoin, une vidéo de ce qui précède à support@blitzz.co!
Certaines ressources (p. ex. CSS) peuvent ne pas être exposées sur l'Internet public (p. ex. dans des environnements de préproduction comme l'UAT); ces éléments de votre page Web ne seront donc pas visibles par les agents.
Pour vérifier quelles ressources sont encodées, collez le code hexadécimal dans https://cryptii.com/pipes/hex-decoder.
Assurez-vous que ces ressources sont accessibles à notre serveur en les rendant publiques.
Si votre site Web utilise des CSP, elles peuvent bloquer le fonctionnement de Cobrowse. Lorsqu'une CSP bloque blitzz.co, une erreur semblable à celle-ci s'affiche dans la console JavaScript :
Refused to connect to https://blitzz.co/... because it violates the document's Content Security Policy.Pour régler le problème, vous devez autoriser les éléments suivants dans votre CSP :
directive connect-src :
connect-src blitzz.co *.blitzz.co wss://*.blitzz.co ;Si vous hébergez vous-même votre instance, remplacezblitzz.copar votre<your instance domain>dans chaque cas.
directive script-src :
script-src 'unsafe-inline' media.blitzz.co/sdk/;Si vous utilisez la version autohébergée du SDK Web au lieu demedia.blitzz.co, utilisez plutôt cette URL complète, p. ex.https://<your instance domain>/sdk-js/Cobrowse.js.
Si vous le souhaitez, vous pouvez remplacer unsafe-inline par le hachage de votre extrait. Il sera affiché dans la console JavaScript.
Si un même utilisateur a une ou plusieurs fenêtres de navigation privée ouvertes en même temps que sa fenêtre de navigateur habituelle, ces fenêtres privées apparaîtront comme des appareils distincts dans la liste des appareils.