Sommaire
À retenir
- CompleteGreet s’ajoute dans Squarespace grâce à la section d’injection de code. Vérifiez que votre offre Squarespace actuelle donne accès à cette fonction.
- Après l’installation, vous pouvez configurer l’apparence, les pages ciblées et les actions depuis le tableau de bord CompleteGreet.
- Avant de publier, testez l’ordinateur, le mobile, les règles d’URL, les performances, l’accessibilité et le parcours complet de chaque action.
Ajoutez le code d’intégration CompleteGreet dans la section Squarespace prévue pour l’injection de code, puis testez le site publié.
CompleteGreet propose des offres avec des limites de visiteurs uniques. L’offre BUILD coûte environ 29 € par mois avec une facturation annuelle et comprend 5 000 visiteurs uniques ainsi que deux bulles vidéo.
L’accès à l’injection de code et aux scripts tiers dépend de l’offre Squarespace actuelle. Vérifiez la documentation officielle et votre modèle.
La durée de l’installation dépend de l’offre, de la vidéo, de l’apparence, des actions et des tests.
CompleteGreet propose aujourd’hui des bulles vidéo personnelles, des formulaires, le chat en direct, le rappel, la prise de rendez-vous, le Multivid et des vidéos shoppables.
Comment installer CompleteGreet sur Squarespace ?
Utilisez le code d’intégration et la section prévue par Squarespace pour l’injection de code. Il n’est pas possible de garantir la même durée d’installation sur tous les sites.

Une bulle vidéo est un petit élément placé dans un coin du site. Elle présente un message de votre équipe et peut guider le visiteur vers une action. Notre présentation de la technologie des bulles vidéo explique le fonctionnement de cet élément vidéo flottant.
Voici les étapes :
1. Créez une nouvelle bulle dans le tableau de bord CompleteGreet et donnez-lui un nom facile à reconnaître.
2. Enregistrez votre vidéo ou importez-la dans un format pris en charge. Vérifiez les limites actuelles directement dans le tableau de bord.
3. Réglez l’apparence de la bulle. Choisissez la vignette, la position, les couleurs et le texte du bouton. Vous pourrez modifier ces choix plus tard depuis le tableau de bord, sans toucher de nouveau au code.
4. Publiez la bulle et copiez l’intégralité du code d’intégration.
5. Ouvrez l’administration Squarespace dans un nouvel onglet. Accédez aux réglages avancés, puis à la section d’injection de code. Squarespace utilise cette zone pour les scripts tiers qui doivent se charger sur le site. La documentation officielle de Squarespace décrit l’emplacement prévu pour ces scripts et la procédure actuellement recommandée.
6. Collez l’intégralité du code CompleteGreet dans la zone indiquée par les instructions actuelles. Ne le répartissez pas entre plusieurs champs et vérifiez qu’aucune partie du code n’a été supprimée pendant le collage.
7. Enregistrez les modifications.
8. Ouvrez le site publié dans une fenêtre de navigation privée. Vérifiez que la bulle apparaît, qu’elle s’ouvre et que ses actions fonctionnent. Si elle n’apparaît pas, rechargez entièrement la page et contrôlez le cache ainsi que le consentement aux scripts.
L’accès à l’injection de code peut être réservé à certaines offres Squarespace et ces conditions peuvent évoluer. Consultez la présentation actuelle des offres et la documentation Squarespace avant l’installation. Vérifiez aussi que votre modèle et vos réglages de sécurité autorisent le chargement du script.
Les consultations répétées de la même personne ne sont pas comptées comme de nouveaux visiteurs uniques. Les limites de l’offre choisie s’appliquent.
Que peut-on personnaliser sur Squarespace ?
Vous pouvez configurer l’apparence, le comportement et les actions suivantes. Les options disponibles dépendent de l’offre actuelle. Les outils de bulle vidéo diffèrent beaucoup par leurs règles d’URL, leurs actions, leur personnalisation et leurs limites.

Règles liées aux pages et aux visiteurs
Choisissez précisément les pages où la bulle apparaît. Vous pouvez par exemple la montrer sur l’accueil et la masquer sur une page où elle gênerait une action importante. Vérifiez dans votre offre les options actuelles concernant le délai, les groupes de visiteurs et l’affichage selon l’appareil.
Le ciblage selon l’appareil mérite un contrôle séparé, car les mises en page Squarespace diffèrent entre ordinateur et mobile. Ajustez la taille ou l’affichage de la bulle afin qu’elle ne couvre jamais le menu, un bouton essentiel, un formulaire ou la bannière de cookies.
Appels à l’action et formulaires
Un bouton peut mener vers une prise de rendez-vous, un formulaire, une fiche produit ou une autre adresse adaptée.
CompleteGreet propose des formulaires de collecte. Utilisez uniquement les champs nécessaires et respectez la protection des données ainsi que le consentement.
Identité visuelle et apparence
Adaptez les couleurs de la bulle à la palette de votre site Squarespace. Choisissez aussi la vignette, la position et les marges. Laissez assez d’espace autour d’un éventuel chat, de la bannière de cookies et des boutons fixes déjà présents.
Choisissez une taille suffisamment visible pour être remarquée, mais assez discrète pour ne pas masquer le contenu. Il n’existe pas de valeur idéale pour tous les modèles. Testez donc la vignette sur plusieurs pages et sur de vrais appareils.
Après un changement de vidéo ou de vignette, le cache peut encore afficher l’ancienne image. Rechargez entièrement la page.
#cg-ig-PL4 {
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-PL4 .cg-accent-bar {
height: 4px;
background: #3D5ACE;
}
#cg-ig-PL4 .cg-content {
padding: 24px;
}
#cg-ig-PL4 .cg-title {
font-size: 20px;
font-weight: 700;
color: #1a1a2e;
margin: 0 0 8px 0;
line-height: 1.3;
}
#cg-ig-PL4 .cg-subtitle {
font-size: 14px;
color: #7a7a96;
margin: 0 0 24px 0;
line-height: 1.5;
}
#cg-ig-PL4 .cg-steps {
display: flex;
flex-direction: column;
gap: 0;
}
#cg-ig-PL4 .cg-step {
display: flex;
gap: 16px;
position: relative;
padding-bottom: 24px;
}
#cg-ig-PL4 .cg-step:last-child {
padding-bottom: 0;
}
#cg-ig-PL4 .cg-step:not(:last-child)::before {
content: ”;
position: absolute;
left: 15px;
top: 32px;
width: 2px;
height: calc(100% – 16px);
background: #e2e2ea;
}
#cg-ig-PL4 .cg-step-num {
width: 32px;
height: 32px;
border-radius: 50%;
background: #3D5ACE;
color: #ffffff;
font-size: 14px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
position: relative;
z-index: 1;
}
#cg-ig-PL4 .cg-step-content {
flex: 1;
padding-top: 4px;
}
#cg-ig-PL4 .cg-step-title {
font-size: 15px;
font-weight: 600;
color: #1a1a2e;
margin: 0 0 6px 0;
line-height: 1.4;
}
#cg-ig-PL4 .cg-step-desc {
font-size: 13px;
color: #4a4a68;
margin: 0 0 12px 0;
line-height: 1.5;
}
#cg-ig-PL4 .cg-code-box {
background: #1a1a2e;
border-radius: 8px;
padding: 12px 16px;
position: relative;
}
#cg-ig-PL4 .cg-code-label {
font-size: 11px;
color: #7a7a96;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
display: block;
}
#cg-ig-PL4 .cg-code-text {
font-family: “SF Mono”, Monaco, “Cascadia Code”, “Roboto Mono”, Consolas, monospace;
font-size: 12px;
color: #E48333;
margin: 0;
line-height: 1.6;
word-break: break-all;
}
#cg-ig-PL4 .cg-code-note {
font-size: 11px;
color: #7a7a96;
margin-top: 8px;
font-style: italic;
}
#cg-ig-PL4 .cg-path-box {
background: #ffffff;
border: 1px solid #e2e2ea;
border-radius: 6px;
padding: 10px 14px;
display: flex;
align-items: center;
gap: 8px;
}
#cg-ig-PL4 .cg-path-icon {
width: 16px;
height: 16px;
background: #3D5ACE;
border-radius: 3px;
flex-shrink: 0;
}
#cg-ig-PL4 .cg-path-text {
font-size: 13px;
color: #4a4a68;
margin: 0;
}
#cg-ig-PL4 .cg-path-arrow {
color: #7a7a96;
font-size: 12px;
}
#cg-ig-PL4 .cg-cta {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid #e2e2ea;
}
#cg-ig-PL4 .cg-cta-btn {
display: block;
width: 100%;
background: #3D5ACE;
color: #ffffff;
text-decoration: none;
text-align: center;
padding: 14px 20px;
border-radius: 8px;
font-size: 15px;
font-weight: 600;
transition: background 0.2s ease;
}
#cg-ig-PL4 .cg-cta-btn:hover {
background: #2f4aa8;
}
#cg-ig-PL4 .cg-source {
margin-top: 16px;
font-size: 11px;
color: #7a7a96;
text-align: center;
}
#cg-ig-PL4 .cg-source a {
color: #7a7a96;
text-decoration: underline;
}
#cg-ig-PL4 .sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@media (max-width: 480px) {
#cg-ig-PL4 .cg-content {
padding: 16px;
}
#cg-ig-PL4 .cg-title {
font-size: 18px;
}
#cg-ig-PL4 .cg-step {
gap: 12px;
}
#cg-ig-PL4 .cg-step-num {
width: 28px;
height: 28px;
font-size: 13px;
}
#cg-ig-PL4 .cg-step:not(:last-child)::before {
left: 13px;
top: 28px;
}
}
Installer CompleteGreet sur Squarespace
Ajouter une bulle vidéo grâce à l’injection de code.
Préparer le compte CompleteGreet
Créez votre bulle vidéo, puis choisissez son apparence et ses actions.
Copier le code d’intégration
Ouvrez la section d’installation et copiez l’intégralité du code.
<code d’intégration CompleteGreet à coller dans Squarespace>
Ajoutez ce code dans la section Squarespace prévue à cet effet.
Ouvrir les réglages d’injection de code
Ouvrez la section d’injection de code dans l’administration Squarespace.
Réglages › Avancé › Injection de code
Ajouter le code
Collez le code CompleteGreet à l’emplacement prévu.
Enregistrer et publier
Enregistrez, puis contrôlez la bulle sur le site publié.
See the static HTML data above for the full breakdown.
Que vérifier avant la publication ?
Avant la publication, consacrez quelques minutes à une liste de contrôle complète. Elle permet de repérer les erreurs de position, de lecture, de ciblage ou de formulaire avant que les visiteurs ne les rencontrent.
Commencez sur ordinateur dans une fenêtre privée. Regardez le chargement de la bulle, sa position et la netteté de la vignette. Ouvrez ensuite la vidéo afin de vérifier la lecture, le son, les commandes et chaque action proposée.
Lancez la vidéo et vérifiez que l’image, le son et les commandes fonctionnent comme prévu.
Contrôlez ensuite l’affichage mobile. Le widget de bulle vidéo se comporte différemment sur un petit écran. Vérifiez sa position, l’ouverture de la vidéo et la taille du bouton de fermeture. L’utilisateur doit pouvoir ouvrir et fermer la bulle facilement avec le pouce, sans masquer la navigation.
Un formulaire qui paraît simple sur ordinateur peut devenir trop serré sur mobile. Limitez les champs au strict nécessaire, vérifiez le clavier affiché pour chaque champ et testez l’envoi complet depuis un téléphone.
Les règles d’URL sont une source fréquente d’erreurs. Testez plusieurs vraies pages Squarespace et confirmez que la bulle apparaît uniquement là où elle apporte une aide utile. Vérifiez également les pages qui doivent être exclues.
Une présentation personnelle peut convenir à l’accueil, aux tarifs ou aux services, mais elle n’est pas automatiquement utile sur le paiement ou les pages juridiques.
Surveillez aussi les performances. Une bulle vidéo ajoute un script et des ressources à la page. Mesurez le site avant et après l’installation sur ordinateur et mobile afin de repérer un ralentissement, un déplacement de mise en page ou une interaction retardée.
Comparez vos données avec les recommandations de Google sur les Web Vitals et recherchez les déplacements de mise en page ou les interactions retardées.
N’oubliez pas de tester avec une connexion mobile plus lente, pas seulement avec le réseau rapide du bureau. Contrôlez le temps d’ouverture, la lecture de la vidéo et les commandes dans des conditions proches de celles de vos visiteurs.
Envoyez enfin la page à une personne qui ne connaît pas le projet. Demandez-lui de parcourir le site, d’ouvrir la vidéo et d’utiliser l’action proposée. Son retour peut révéler des difficultés que l’équipe ne remarque plus.
Un regard neuf repère souvent des problèmes devenus invisibles pour l’équipe.
Vous pouvez publier lorsque l’apparence, les actions, les performances et l’utilisation sont correctes.
Une bulle vidéo peut rendre un site Squarespace plus personnel sans remplacer sa hiérarchie visuelle.
Vérifiez tout de même chaque modèle et chaque affichage mobile pour repérer les conflits.
Un chargement asynchrone ne supprime pas automatiquement tout effet sur les performances. Mesurez le site réellement publié.
Accessibilité
Respectez la préférence de réduction des mouvements, ajoutez des sous-titres et tenez compte des règles des navigateurs concernant la lecture automatique. La fermeture, la lecture et le focus doivent fonctionner au clavier.
Les recommandations d’accessibilité du W3C aident à contrôler le clavier, le focus, les lecteurs d’écran, le contraste et les alternatives aux médias.
Testez Safari sur iOS et Chrome sur Android, car le modèle et la largeur de l’écran peuvent modifier la position.
Questions fréquentes
Combien coûte CompleteGreet pour le site d’une petite entreprise ?
L’offre BUILD coûte environ 29 € par mois avec une facturation annuelle et comprend 5 000 visiteurs uniques ainsi que deux bulles vidéo. Vérifiez la page des tarifs actuelle.
Quelles plateformes sont compatibles avec CompleteGreet ?
Shopify utilise une application, tandis que WordPress et WooCommerce utilisent une extension. Squarespace et d’autres plateformes peuvent recevoir un code d’intégration si le code personnalisé est autorisé.
Combien de temps faut-il pour installer CompleteGreet sur Shopify ?
La durée dépend de la vidéo, de l’apparence, des actions et des tests. Shopify utilise l’application CompleteGreet au lieu d’une modification manuelle du thème.
Que se passe-t-il lorsque la limite de visiteurs est atteinte ?
CompleteGreet compte les visiteurs uniques selon l’offre choisie. Vérifiez les conditions actuelles et le comportement du widget lorsque la limite est atteinte.
CompleteGreet convient-il aux retours clients ou seulement aux présentations ?
CompleteGreet propose des formulaires classiques et en plusieurs étapes, ainsi que d’autres actions. Un outil spécialisé peut mieux convenir à une enquête très complexe.
Des frais sont-ils appliqués en cas de pic de trafic ?
Les offres comportent des limites de visiteurs uniques. Vérifiez les conditions actuelles et les éventuels changements d’offre sur la page des tarifs ou dans le tableau de bord.
