Comment intégrer Blitzz à votre site Web avec le widget iFrame

Ajoutez un bouton flottant de session vidéo à votre site Web, à votre portail ou à votre application Web grâce au widget iFrame de Blitzz. Cette intégration légère permet à votre équipe de lancer des appels vidéo directement depuis n'importe quelle page Web, sans quitter le site ni changer d'onglet.

Le widget iFrame est idéal pour :

• Portails de soutien à la clientèle : permettez aux agents de lancer des sessions de soutien vidéo tout en consultant les renseignements du client
• Sites Web libre-service : laissez les clients demander une assistance vidéo en un clic
• Applications de service sur le terrain : donnez aux techniciens un accès instantané aux outils de collaboration vidéo
• Tableaux de bord internes : intégrez les sessions vidéo à vos systèmes de GRC ou de gestion des billets
• Portails de partenaires et de fournisseurs : offrez des options de communication vidéo simples

Fonctionnement

Le widget ajoute un bouton flottant personnalisable à votre page Web. Lorsqu'on clique dessus, il s'agrandit pour afficher l'interface complète de session Blitzz, ce qui permet aux utilisateurs d'inviter des invités et de lancer des appels vidéo sans quitter votre site.

Démo en direct

Voyez le widget en action : https://blitzz.co/iframe

Fonctionnalités clés

• Bouton flottant : un bouton discret qui reste visible pendant le défilement
• Apparence personnalisable : adaptez le texte et les couleurs du bouton à votre marque
• Aucun rechargement de page : le widget s'ouvre dans la page sans perturber l'expérience utilisateur
• Toutes les fonctionnalités : accédez à toutes les fonctionnalités de Blitzz, y compris les invitations par texto, par courriel et par WhatsApp
• Conception adaptative : fonctionne dans les navigateurs d'ordinateur et de tablette

Installation

Ajoutez le widget iFrame de Blitzz à votre site Web en deux étapes simples :

Étape 1 : Configurer le widget

Personnalisez le texte et la couleur du bouton selon votre image de marque :

<script>
var config = {
    title: "Start Video Session",  // Button text - customize this
    color: "#387bf7"               // Button color - use your brand color
}
</script>

Étape 2 : Ajouter le code du widget

Copiez et collez l'extrait de code complet ci-dessous juste avant la balise </body> de chaque page où le bouton doit apparaître :

<script>
var config = {
    title: "Start Video Session",
    color: "#387bf7"
}
function f(){if(window.jQuery)loadfloating();else{var e=document.createElement("script");e.src="https://code.jquery.com/jquery-2.2.4.min.js",e.onload=function(){jQuery.noConflict(),loadfloating()},document.head.appendChild(e)}}function loadfloating(){jQuery(function(){var e={title:"Invite via Blitzz",color:"#3366cc"};"undefined"!=typeof config&&(config.title?e.title=config.title:e.title="Invite via Blitzz",config.color?e.color=config.color:e.color="#3366cc");var t=document.createElement("style");t.type="text/css",t.innerHTML+=".click-to-open{padding: 5px;position: fixed;bottom: 0px;right: 10px;background-color:"+e.color+";color: #ffffff;display: flex;justify-content: center;align-items: center;font-size: 16px;width: auto;height: 35px;overflow: hidden;box-shadow: 0 0 3px rgba(0 , 0 , 0, 1);border-radius: 4px;cursor: pointer;border: none;}.open-weblite-width{  opacity: 1; transition: opacity 0.5s; width: 400px;height: 630px;position: fixed;bottom: 50px;right: 15px;overflow:hidden;box-shadow:0 0 10px rgb(232, 232, 232);}.open-weblite-width.hide{opacity: 0}.click-to-open i {border: solid #F5F5F5;  border-width: 0 3px 3px 0;  display: inline-block;  padding: 3px;}.click-to-open .up {  transform: rotate(-135deg);  -webkit-transform: rotate(-135deg);margin:0px 6px -2px 3px}.click-to-open .down {  transform: rotate(45deg);  -webkit-transform: rotate(45deg);display:none;margin:0px 6px 2px 3px}.inner-website-wdith{width:calc(100%);height:100%}.inner-website-wdith iframe{width:100%;height:100%}",document.getElementsByTagName("head")[0].appendChild(t);var i=document.createElement("div");i.innerHTML='<button type="button" onclick=toggleframe()><i></i><i></i><span>'+e.title+'</span></button><div ><div><iframe src="https://web.blitzz.co/" width="100%"  frameBorder="0" scrolling="yes"  marginwidth="0" marginheight="0"></iframe></div></div>',document.querySelector("body").appendChild(i)})}function toggleframe(){document.getElementById("click-to-open").classList.toggle("active");var e=document.getElementById("open-weblite-width");e.classList.contains("hide")?(e.classList.remove("hide"),document.getElementsByClassName("up")[0].style.display="none",document.getElementsByClassName("down")[0].style.display="block"):(e.classList.add("hide"),document.getElementsByClassName("up")[0].style.display="block",document.getElementsByClassName("down")[0].style.display="none")}f();
</script>

Options de personnalisation

Exemples de configuration

Soutien à la clientèle (bleu) :

var config = {
    title: "Need Help? Start Video Chat",
    color: "#3498DB"
}

Service sur le terrain (vert) :

var config = {
    title: "Remote Assistance",
    color: "#27AE60"
}

Inspections de bâtiments (orange) :

var config = {
    title: "Start Virtual Inspection",
    color: "#E67E22"
}

Exigences d'authentification

Le widget iFrame exige que les utilisateurs se connectent avec leurs identifiants Blitzz. Pour une expérience optimale, nous recommandons l'une des options d'authentification suivantes :

Compatibilité des navigateurs

Le widget iFrame de Blitzz fonctionne dans tous les navigateurs modernes :

• Google Chrome (recommandé)
• Microsoft Edge
• Mozilla Firefox
• Safari

Dépannage

Le widget ne s'affiche pas?

• Assurez-vous que le script est placé juste avant la balise de fermeture </body>
• Recherchez les erreurs JavaScript dans la console de développement de votre navigateur
• Vérifiez qu'il n'y a aucun conflit avec d'autres scripts de votre page

Problèmes de style du bouton?

• Assurez-vous que la valeur de couleur est un code hexadécimal valide (p. ex. #387bf7)
• Vérifiez que le CSS de votre site ne remplace pas les styles du widget

Intégration avancée

Pour mieux contrôler l'intégration Blitzz, envisagez ces options supplémentaires :

• Intégration par paramètres d'URL : lancez des sessions avec des données préremplies provenant de votre GRC
• API REST : créez et gérez des sessions par programmation
• API intégrée : contrôle total de l'expérience vidéo dans votre application

Besoin d'aide?

Notre équipe est prête à vous aider avec votre intégration. Pour la configuration de l'authentification unique (SSO), les configurations personnalisées ou toute question, veuillez communiquer avec notre équipe de soutien.

Ressources connexes

• Documentation de l'API REST
• Configuration de l'authentification unique (SSO)
• Intégration par paramètres d'URL
• Intégration Zapier de Blitzz