Sommaire
À retenir
- Une installation simple d’un widget vidéo sur Webflow peut être rapide, mais la durée dépend du forfait Webflow, du consentement et des tests.
- CompleteGreet permet de régler qui voit la bulle, son apparence et l’action proposée après un clic.
- Avant de publier, suivez une courte liste de vérifications afin de repérer les erreurs souvent oubliées.
La méthode consiste à ajouter le script associé à votre site dans les réglages de code personnalisé Webflow, puis à publier et tester la vraie page. Les règles d’affichage se configurent ensuite dans CompleteGreet.
Vous n’avez normalement pas besoin de modifier chaque page dans le Designer. Le délai dépend néanmoins du projet, des règles et des contrôles.
CompleteGreet propose des forfaits liés aux visiteurs selon les conditions actuelles. Vérifiez les prix, seuils et règles de dépassement avant de comparer, surtout si le trafic peut varier pendant un lancement.
La disponibilité du code personnalisé dépend du forfait Webflow et de ses fonctions actuelles. Vérifiez votre projet avant l’installation.
Vous pouvez adapter les couleurs, la position et les appels à l’action depuis CompleteGreet, puis contrôler le résultat sans écrire de CSS supplémentaire.
CompleteGreet est centré sur les accueils vidéo et la confiance. Si votre site exige des enquêtes complexes, un outil spécialisé peut être plus adapté.
Comment installer CompleteGreet sur Webflow ?
Ajouter un widget de bulle vidéo à Webflow consiste à copier le code fourni et à l’insérer au bon endroit. Vérifiez d’abord que votre forfait Webflow permet le code personnalisé sur le domaine concerné.

Voici la procédure :
-
Dans CompleteGreet, créez ou choisissez le widget, ajoutez la vidéo et réglez son comportement initial.
-
Ouvrez ensuite la section qui fournit le code du site et copiez le script complet. Utilisez uniquement le code actuel de votre propre compte.
-
Dans Webflow, ouvrez les réglages du projet puis la section de code personnalisé. Collez le script à l’emplacement recommandé par la documentation actuelle, sans le dupliquer.
-
Enregistrez les réglages et publiez le site. Le Designer ne reproduit pas toujours l’exécution du code personnalisé.
Le code personnalisé Webflow s’exécute sur le site publié, pas nécessairement dans l’aperçu. Le centre d’aide officiel de Webflow explique ce comportement. Contrôlez donc l’adresse publiée ou le sous-domaine de test.
Après la publication, rechargez la page comme un nouveau visiteur et videz les caches concernés si nécessaire.
La bulle doit apparaître à la position choisie sans masquer le contenu ni imposer le son.
Que peut-on personnaliser sur Webflow ?
Vous pouvez régler le public, les pages, les actions et l’apparence du widget. Vérifiez chaque option dans le tableau de bord actuel.
Ciblage des pages et du public
Les règles d’URL permettent d’afficher l’accueil sur certaines pages et de le masquer ailleurs. Commencez par quelques pages importantes et testez les inclusions comme les exclusions.
Les messages destinés aux nouveaux visiteurs ou aux visiteurs réguliers dépendent des fonctions et des données réellement disponibles.
Le ciblage par source de trafic peut être utile lorsqu’il est pris en charge et correctement mesuré. Évitez toutefois de créer des segments que vous ne pouvez pas vérifier.
Appels à l’action et formulaires
Un bouton peut ouvrir un calendrier, un téléchargement ou une autre page. Choisissez un texte clair et mesurez l’action réelle plutôt que de présumer qu’une formulation fonctionne mieux.
Comparez les variantes avec suffisamment de trafic et un seul changement à la fois.
Les formulaires intégrés peuvent recueillir des informations sans quitter la page. Limitez-vous aux champs nécessaires et vérifiez le consentement.
Contrôlez que les données sont enregistrées dans l’emplacement prévu.
Vérifiez aussi les notifications avant la mise en ligne, sans envoyer de vraie demande externe sans autorisation.
Identité visuelle et position
Adaptez le logo, les couleurs, la miniature et la position selon les options actuelles. La bulle doit rester distincte du chat, de la bannière de cookies et des commandes du site.
Gardez le texte initial court et testez-le sur un petit écran. Une limite fixe ne remplace pas un contrôle visuel réel.
Le comportement mobile doit être réglé séparément. Choisissez une taille et un mode qui ne couvrent pas le menu ou un bouton important, en vous fondant sur vos vrais points de rupture.
Un widget bien ciblé et cohérent avec le design paraît plus naturel. Consultez notre comparatif de widgets vidéo pour évaluer les autres critères.
max-width: 600px;
margin: 0 auto;
background: #f7f7fb;
border: 1px solid #e2e2ea;
border-radius: 12px;
overflow: hidden;
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif;
}
#cg-ig-PL2 .cg-accent-bar {
height: 4px;
background: #3D5ACE;
}
#cg-ig-PL2 .cg-header {
padding: 24px 24px 16px;
text-align: center;
}
#cg-ig-PL2 .cg-header h2 {
margin: 0 0 8px;
font-size: 22px;
font-weight: 700;
color: #1a1a2e;
line-height: 1.3;
}
#cg-ig-PL2 .cg-header p {
margin: 0;
font-size: 14px;
color: #7a7a96;
line-height: 1.5;
}
#cg-ig-PL2 .cg-steps {
padding: 0 24px 24px;
}
#cg-ig-PL2 .cg-step {
display: flex;
gap: 16px;
margin-bottom: 20px;
}
#cg-ig-PL2 .cg-step:last-child {
margin-bottom: 0;
}
#cg-ig-PL2 .cg-step-number {
flex-shrink: 0;
width: 36px;
height: 36px;
background: #3D5ACE;
color: #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: 700;
}
#cg-ig-PL2 .cg-step-content {
flex: 1;
padding-top: 6px;
}
#cg-ig-PL2 .cg-step-title {
font-size: 15px;
font-weight: 600;
color: #1a1a2e;
margin: 0 0 6px;
}
#cg-ig-PL2 .cg-step-desc {
font-size: 13px;
color: #4a4a68;
margin: 0 0 10px;
line-height: 1.5;
}
#cg-ig-PL2 .cg-code-block {
background: #1a1a2e;
border-radius: 8px;
padding: 12px 14px;
position: relative;
margin-top: 8px;
}
#cg-ig-PL2 .cg-code-block code {
display: block;
font-family: “SF Mono”, Monaco, “Cascadia Code”, monospace;
font-size: 12px;
color: #e2e2ea;
line-height: 1.6;
word-break: break-all;
}
#cg-ig-PL2 .cg-code-label {
position: absolute;
top: 8px;
right: 10px;
font-size: 10px;
color: #7a7a96;
text-transform: uppercase;
letter-spacing: 0.5px;
}
#cg-ig-PL2 .cg-copy-btn {
position: absolute;
top: 8px;
right: 10px;
background: #3D5ACE;
color: #ffffff;
border: none;
border-radius: 4px;
padding: 4px 10px;
font-size: 11px;
font-weight: 500;
cursor: pointer;
}
#cg-ig-PL2 .cg-cta {
padding: 0 24px 24px;
text-align: center;
}
#cg-ig-PL2 .cg-cta a {
display: inline-block;
background: #3D5ACE;
color: #ffffff;
text-decoration: none;
padding: 14px 28px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
transition: background 0.2s ease;
}
#cg-ig-PL2 .cg-cta a:hover {
background: #2f48a8;
}
#cg-ig-PL2 .cg-source {
padding: 0 24px 20px;
text-align: center;
font-size: 11px;
color: #7a7a96;
}
#cg-ig-PL2 .cg-source a {
color: #3D5ACE;
text-decoration: none;
}
#cg-ig-PL2 .cg-highlight {
color: #E48333;
font-weight: 600;
}
@media (max-width: 480px) {
#cg-ig-PL2 .cg-header,
#cg-ig-PL2 .cg-steps,
#cg-ig-PL2 .cg-cta,
#cg-ig-PL2 .cg-source {
padding-left: 16px;
padding-right: 16px;
}
#cg-ig-PL2 .cg-header h2 {
font-size: 18px;
}
#cg-ig-PL2 .cg-step {
gap: 12px;
}
#cg-ig-PL2 .cg-step-number {
width: 32px;
height: 32px;
font-size: 13px;
}
}
Ajouter une bulle vidéo à Webflow
Quatre étapes pour installer CompleteGreet sur votre site Webflow
Récupérer le code d’intégration
Connectez-vous à CompleteGreet et copiez le code associé à votre widget et votre site.
Exemple de code d’intégration CompleteGreet associé à votre site Ouvrir les réglages du projet
Dans le tableau de bord Webflow, choisissez le projet puis ouvrez les Réglages du projet dans le menu.
Ajouter le code personnalisé
Ouvrez l’onglet Code personnalisé puis collez le script CompleteGreet dans la zone recommandée par la documentation actuelle.
Commentaire indiquant l’intégration de la bulle vidéo CompleteGreet
Code associé à votre site Enregistrer et publier
Cliquez sur Enregistrer les modifications, puis publiez le site et vérifiez la bulle sur les pages ciblées.
See the static HTML data above for the full breakdown.
Que faut-il vérifier avant la mise en ligne ?
Avant de publier, testez le site sur plusieurs appareils et navigateurs. Vérifiez que le widget de bulle vidéo apparaît au bon endroit, se lit après interaction et ne masque ni la navigation ni les appels à l’action.
Ne supposez pas que la majorité du trafic est mobile. Consultez vos propres données, mais testez toujours le widget sur téléphone.
Ouvrez le site sur iOS et Android. La bulle doit se redimensionner, rester facile à fermer et respecter les règles de lecture du navigateur. Adaptez sa position si elle couvre le menu ou le paiement.
Vérifiez ensuite le ciblage des pages.
Contrôlez chaque règle d’URL sur les pages publiées. Excluez les pages où le widget gêne une action ou n’apporte aucune aide.
Mesurez aussi les performances. Les fichiers vidéo peuvent alourdir la page. Consultez les recommandations de Google sur les Web Vitals et comparez la page avant et après. Compressez les médias selon les besoins réels sans appliquer une limite universelle.
Testez les formulaires de bout en bout avec des données adaptées. Confirmez l’enregistrement et la livraison prévue avant de considérer le parcours terminé.
Lorsque tous les contrôles sont satisfaisants, publiez la configuration Webflow ciblée.
Une bulle vidéo peut donner un visage humain à un site Webflow sans rompre son design, à condition d’être bien placée et mesurée.
Personnaliser l’apparence
Après l’intégration, réglez la taille, la position et le message dans CompleteGreet selon les fonctions disponibles. Contrôlez toujours le résultat avec le CSS, les menus et les éléments flottants du site.
Les règles d’affichage peuvent cibler des pages précises et retarder l’apparition lorsque cette option est disponible. Testez l’effet au lieu de présumer qu’un délai est préférable.
Relier les formulaires et les appels à l’action
Le raccordement à un formulaire Webflow ou à un outil de messagerie dépend des intégrations actuelles. Vérifiez le champ, le consentement, la destination et la notification avec des données de test.
Tester avant de publier
Essayez la bulle sur ordinateur et mobile. Le son ne doit pas être imposé et les commandes doivent rester accessibles. Suivez aussi les recommandations du W3C en matière d’accessibilité afin que les personnes utilisant le clavier ou un lecteur d’écran puissent contrôler ou ignorer le widget.
Questions fréquentes
Combien coûte CompleteGreet par mois et que comprend l’offre ?
Le prix, les visiteurs, le nombre de bulles et les fonctions incluses dépendent du forfait actuel. Consultez la page des tarifs et les conditions avant de choisir.
CompleteGreet fonctionne-t-il avec Shopify, WordPress et les sites React personnalisés ?
CompleteGreet peut fonctionner sur les principales plateformes et sur les sites acceptant son code. La méthode, les fonctions et l’impact doivent être vérifiés sur chaque installation.
Combien de temps faut-il pour configurer CompleteGreet ?
La durée dépend de la vidéo, de la plateforme, du design, du consentement, des règles et des tests. Une configuration simple peut être rapide, mais aucun délai n’est garanti.
Quelles entreprises devraient choisir CompleteGreet plutôt qu’un chat en direct ?
Les entreprises qui veulent présenter une vraie personne avant le contact peuvent y trouver un intérêt. Si une conversation immédiate avec un agent est essentielle, le chat en direct peut être plus adapté. Mesurez le résultat sur votre site.
Comment CompleteGreet compte-t-il les visiteurs uniques pour la facturation ?
Le comptage suit la définition et les règles du forfait actuel. Vérifiez les visites répétées, les vues, la bande passante et les seuils dans votre compte et les tarifs.
Quelles limites faut-il connaître avant de s’inscrire ?
CompleteGreet est centré sur les accueils vidéo, pas sur les enquêtes complexes, les longs formulaires conditionnels ou le chat bidirectionnel en temps réel. Choisissez un outil spécialisé si ces parcours sont essentiels.
