Bulle vidéo HTML : installation sur n’importe quel site

Comment installer CompleteGreet en HTML ?

Ajouter un widget de bulle vidéo à un site HTML simple demande généralement un court script. La méthode convient aux sites statiques, aux applications monopage et à toute page qui sert directement du HTML.

Voici la séquence exacte :

1. Créer votre compte et ouvrir le tableau de bord: Inscrivez vous sur CompleteGreet et ouvrez le tableau de bord principal. Repérez le bouton bleu « Nouveau widget » en haut à droite et cliquez dessus. Le générateur s’ouvre avec un modèle vierge et un bouton d’enregistrement vidéo.
2. Enregistrer ou importer votre message: Cliquez sur le bouton d’enregistrement pour filmer directement dans le navigateur, ou importez un fichier MP4 depuis votre ordinateur. L’aperçu montre l’apparence de la bulle sur ordinateur et mobile. Gardez un message court pour préserver la vitesse de la page.
3. Configurer l’apparence: Utilisez la barre latérale pour choisir la position de la bulle, sa couleur avec le sélecteur hexadécimal et la photo de profil. L’avatar apparaît dans la bulle avant la lecture de la vidéo.
4. Définir l’appel à l’action: Ouvrez l’onglet Interactions pour ajouter un texte de bouton et une URL. Vous pouvez aussi activer un formulaire de collecte d’adresse électronique qui recueille les demandes avant la lecture de la vidéo.
5. Copier le code d’installation: Cliquez sur « Enregistrer et obtenir le code » en haut. Une fenêtre s’ouvre avec une seule balise script. Copiez-la et collez-la juste avant la balise de fermeture dans votre fichier HTML. Le script se charge de manière asynchrone afin de limiter le blocage du rendu.

C’est tout le processus. Le widget apparaît au prochain chargement de page sans configuration supplémentaire.

Si vous utilisez un générateur de site statique comme Jekyll, Hugo ou Eleventy, collez le même script dans votre modèle de base. Pour une application monopage créée avec React ou Vue, le code fonctionne de la même manière puisqu’il s’attache au DOM après le montage. Aucun paquet npm n’est nécessaire.

Un détail souvent oublié est l’attribut data widget id de la balise script, qui relie l’installation à votre widget. Si vous créez plusieurs widgets pour différentes pages, chacun reçoit son propre identifiant. Le tableau de bord permet de dupliquer un widget pour réutiliser le même message sur plusieurs URL.

Testez l’installation dans une fenêtre privée. La bulle doit apparaître dans un coin après le chargement de la page. Si elle n’apparaît pas, consultez la console du navigateur pour rechercher une erreur de script et vérifiez que le widget est réglé sur Actif dans le tableau de bord.

Que pouvez-vous personnaliser en HTML ?

Les sites HTML offrent des possibilités proches des plateformes gérées. La principale différence est que vous contrôlez le ciblage des pages avec votre propre logique plutôt qu’avec un sélecteur du tableau de bord.

Le ciblage des pages HTML se fait selon l’URL.

Vous pouvez afficher le widget uniquement sur certains chemins en ajoutant un attribut de données simple au code d’intégration. Beaucoup d’équipes s’en servent pour montrer des messages différents sur une page de tarifs et sur un article. Dans une application monopage, il faut déclencher le widget manuellement lors des changements de route avec l’API JavaScript. C’est la principale différence avec l’installation d’une application Shopify.

Appels à l’action et formulaires

Les boutons d’appel à l’action du widget sont entièrement modifiables. Vous pouvez les relier à Calendly, à un paiement Stripe ou à un lien mailto. De nombreuses équipes utilisent un bouton pour réserver un appel et un autre pour regarder une démonstration.

La personnalisation des champs est souvent la partie la plus utile.

Vous choisissez les champs à afficher : nom, adresse électronique, téléphone ou question personnalisée sur le budget et le calendrier. Le formulaire peut apparaître avant la vidéo pour demander un renseignement, ou après pour recueillir les demandes déjà intéressées. Les sites HTML peuvent aussi envoyer les données directement vers leur propre point de terminaison et leur CRM interne.

Image de marque et positionnement

La couleur, la taille et la position de la bulle se règlent depuis le tableau de bord. En HTML, vous pouvez aussi les remplacer avec du CSS si la palette de votre marque n’existe pas dans les options prédéfinies. Le placement par défaut est en bas à droite avec un léger décalage. Sur une page produit très fréquentée, le côté gauche peut parfois mieux éviter un widget de chat. La plupart des outils de bulle vidéo imposent leur marque dans les forfaits gratuits. CompleteGreet permet de retirer le logo selon les conditions du forfait choisi.

Un autre détail qui pose problème dans les installations HTML est l’indice de superposition.

Si la barre de navigation ou une fenêtre modale possède un indice élevé, la bulle vidéo peut passer dessous. Ajoutez une règle CSS qui définit un indice de superposition élevé pour le conteneur du widget. Comme le script se charge de manière asynchrone, placez cette règle dans votre feuille de style principale plutôt que dans le code d’intégration.

Copiez le script CompleteGreet fourni par le tableau de bord.

Placez le script CompleteGreet avant la fermeture du corps de la page. Gardez le contenu existant au-dessus du script.

See the static HTML data above for the full breakdown.

Que vérifier avant la mise en ligne ?

Ouvrez votre site dans Chrome, Safari et Firefox et observez le widget de bulle vidéo apparaître. Il doit rester dans un coin sans recouvrir la navigation ni les boutons du pied de page.

Le mobile est particulièrement important.

Une grande partie de vos visiteurs verra le widget sur un téléphone. Chargez votre site avec Safari sur iOS et Chrome sur Android. La bulle doit se redimensionner sans forcer la lecture en plein écran, et le bouton de fermeture doit rester facile à atteindre. Si elle recouvre le menu mobile ou le bouton de paiement, ajustez sa position dans le tableau de bord.

Vérifiez que les règles de ciblage fonctionnent. Visitez des pages où le widget ne doit pas apparaître et confirmez qu’il reste masqué. Vérifiez aussi qu’il ne se charge que sur les URL prévues dans votre configuration.

Lancez un test de vitesse avec Google PageSpeed Insights après l’installation. Les ressources vidéo ajoutent du poids. Si votre indicateur LCP baisse, vérifiez que le script se charge de manière asynchrone et que le fichier vidéo est adapté à la page. Mesurez les effets dans votre propre environnement.

Testez les envois de formulaire de bout en bout. Remplissez le formulaire de contact dans le widget, envoyez-le et confirmez que la demande arrive dans votre boîte de réception ou votre CRM. Un formulaire qui échoue peut nuire à la confiance.

Utilisez le script du widget affiché dans le tableau de bord.

Questions fréquentes

Comment ajouter CompleteGreet à un site HTML sans modifier les fichiers de code ?

Une installation HTML nécessite d’ajouter le script à la page, mais de nombreux créateurs de sites proposent un bloc HTML ou une section de code personnalisé. Copiez le code d’intégration CompleteGreet et collez-le dans cette zone avant la balise de fermeture de votre fichier HTML. La bulle apparaît ensuite sur la page publique.

Où dois-je coller exactement le script CompleteGreet dans mon HTML ?

Collez le script CompleteGreet juste avant la balise de fermeture sur chaque page où la bulle doit apparaître. Cette position laisse le reste de la page se charger en premier. Le script est léger et asynchrone. Si vous souhaitez afficher le widget sur certaines pages seulement, ajoutez-le dans les fichiers HTML concernés ou utilisez les règles de ciblage du tableau de bord.

Pourquoi ma bulle vidéo ne s’affiche-t-elle pas dans le mode aperçu HTML ?

La bulle peut être masquée dans un aperçu à cause des règles de sécurité du navigateur ou d’une iframe isolée. Vérifiez votre site public plutôt que l’aperçu de l’éditeur. Certains éditeurs HTML retirent le JavaScript pour des raisons de sécurité. Publiez la page et ouvrez-la dans un onglet normal. Si le widget reste absent, vérifiez que le script n’est pas dans un commentaire ou entouré de balises qui empêchent son exécution.

Puis-je afficher CompleteGreet uniquement sur certaines pages HTML, comme ma page de tarifs ?

Oui. Ajoutez le script uniquement aux fichiers HTML où vous voulez afficher la bulle. Vous pouvez aussi l’installer sur tout le site et utiliser les règles d’URL du tableau de bord CompleteGreet pour afficher ou masquer le widget selon le chemin. Cette méthode convient aux sites HTML statiques et évite de modifier le code à chaque changement de règle.

CompleteGreet ralentit-il un site HTML ?

Le script se charge de manière asynchrone et s’initialise après le contenu principal. Le résultat dépend de votre page, de la vidéo et des autres ressources. Mesurez la vitesse avec vos outils habituels et placez le script en bas du body si vous souhaitez réduire encore son influence sur le premier affichage.

Comment tester la bulle vidéo sur mobile pour mon site HTML ?

Ouvrez votre page publiée sur un vrai téléphone ou utilisez le mode appareil de Chrome DevTools. La bulle doit s’adapter à l’écran et rester dans un coin sans recouvrir le contenu. Appuyez dessus pour tester la lecture et l’envoi du formulaire. Vérifiez que le bouton de fermeture est facile à toucher et que les éléments importants restent accessibles.

Combien coûte CompleteGreet par mois ?

Le prix dépend du forfait actuel, du nombre de visiteurs et des fonctions incluses. Consultez la page des tarifs CompleteGreet pour connaître les niveaux disponibles et les éventuelles limites. Vérifiez les informations affichées au moment de l’inscription.