Non classé 24 mai 2026

Widget vidéo pour Shopify : la confiance au service du commerce

Découvrez comment ajouter un widget vidéo à Shopify, personnaliser son affichage et vérifier les formulaires avant la mise en ligne.

Widget vidéo pour Shopify : la confiance au service du commerce

À retenir

  • L’installation se fait depuis l’App Store Shopify et ne demande généralement pas de coder.
  • Vous pouvez contrôler presque tous les détails visuels de votre bulle vidéo sans modifier le code.
  • Ouvrez votre boutique dans Chrome, Safari et Firefox et vérifiez l’apparition du widget de bulle vidéo.

Comment installer CompleteGreet sur Shopify ?

L’installation se fait depuis l’App Store Shopify et ne demande généralement pas de coder. L’application se connecte directement à votre boutique, sans modification manuelle des fichiers du thème.

Illustration du parcours d'installation de CompleteGreet sur Shopify

Commencez par rechercher « CompleteGreet » dans la section Applications de votre administration Shopify, puis cliquez sur Installer l’application. Une page d’autorisations vous demandera l’accès au thème et aux commandes de votre boutique. Cliquez sur Installer pour autoriser la connexion.

L’application vous redirige vers CompleteGreet pour créer un compte. Saisissez votre adresse électronique, choisissez un mot de passe et confirmez. Vous arrivez ensuite dans le tableau de bord.

Importez votre première vidéo d’accueil. Cliquez sur le bouton bleu Importer en haut à droite, sélectionnez votre fichier et attendez la fin du traitement. Choisissez un fichier assez léger pour préserver le temps de chargement de la boutique.

Configurez les réglages du widget de bulle vidéo :

  1. Définissez la position de la bulle. Le coin inférieur droit convient souvent aux boutiques Shopify dont les boutons du panier se trouvent en haut à droite.
  2. Choisissez les pages où le widget doit apparaître. Commencez par l’accueil et les pages produit.
  3. Rédigez le texte de votre appel à l’action. Utilisez une question concrète comme « Une question ? » plutôt qu’un libellé générique.
  4. Définissez vos horaires afin d’afficher une option de réservation lorsque votre équipe est indisponible.

Avec les thèmes Online Store 2.0, l’application ajoute automatiquement une section CompleteGreet à l’éditeur de thème. Faites-la glisser dans le pied de page et cliquez sur Enregistrer. Pour les thèmes plus anciens, copiez le code d’intégration depuis votre tableau de bord CompleteGreet, ouvrez Boutique en ligne, Thèmes et Modifier le code, puis collez le code dans theme.liquid juste avant la balise de fermeture balise.

Une boutique danoise de produits durables a mis en place cette configuration et a observé davantage de demandes pendant sa période de mesure. Vérifiez vos propres résultats avant de généraliser cette observation.

Cliquez sur Publier dans l’éditeur de thème ou enregistrez vos modifications de code. La bulle apparaît ensuite sur votre site public.

Que pouvez-vous personnaliser sur Shopify ?

Vous pouvez contrôler presque tous les détails visuels de votre bulle vidéo sans modifier le code. Placez-la en bas à gauche ou à droite, réglez sa taille et importez une miniature personnalisée qui montre votre visage plutôt qu’une icône de lecture générique. Testez le rendu sur mobile et sur ordinateur avec votre propre thème.

Illustration des options de personnalisation sur Shopify

Le ciblage des pages est souvent ce qui fait la différence pour les boutiques Shopify.

Affichez le widget uniquement sur les pages produit où l’intention d’achat est forte, ou masquez-le pendant le paiement pour éviter une distraction. Vous pouvez aussi régler un délai afin de laisser le temps de parcourir la page avant l’apparition de la bulle. Adaptez ces règles au parcours réel de vos visiteurs.

Formulaires et appels à l’action

Le générateur de formulaires intégré permet de recueillir le nom, l’adresse électronique, le téléphone ou des champs personnalisés comme « Quelle taille recherchez-vous ? ». Choisissez des questions utiles à votre activité et vérifiez le taux de réponse dans vos propres données.

Le texte du bouton compte davantage que ne le pensent de nombreuses équipes. Un libellé comme « Envoyer un message » peut être moins clair qu’une invitation à poser une question. La couleur doit correspondre à votre marque tout en restant suffisamment contrastée. La plupart des outils de bulle vidéo proposent des palettes prédéfinies, mais l’intégration au thème Shopify permet d’utiliser les codes hexadécimaux de votre design.

La qualité de l’enregistrement distingue souvent une présentation amateur d’une présentation professionnelle. Utilisez une lumière naturelle venant du côté, plutôt que des néons au plafond qui créent des ombres sous les yeux. La clarté du son compte plus que la résolution vidéo. Un microphone externe simple peut améliorer le résultat, mais un message compréhensible reste la priorité.

#cg-ig-PL5 {
max-width: 600px;
margin: 0 auto;
background: #f7f7fb;
border: 1px solid #e2e2ea;
border-radius: 12px;
border-top: 4px solid #3D5ACE;
padding: 24px;
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif;
}
#cg-ig-PL5 .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;
}
#cg-ig-PL5 .ig-header {
text-align: center;
margin-bottom: 24px;
}
#cg-ig-PL5 .ig-title {
font-size: 22px;
font-weight: 700;
color: #1a1a2e;
margin: 0 0 8px 0;
}
#cg-ig-PL5 .ig-subtitle {
font-size: 14px;
color: #7a7a96;
margin: 0;
}
#cg-ig-PL5 .step-container {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 24px;
}
#cg-ig-PL5 .step-item {
display: flex;
gap: 16px;
align-items: flex-start;
background: #ffffff;
padding: 16px;
border-radius: 8px;
border: 1px solid #e2e2ea;
}
#cg-ig-PL5 .step-number {
width: 32px;
height: 32px;
background: #3D5ACE;
color: #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 14px;
flex-shrink: 0;
}
#cg-ig-PL5 .step-content {
flex: 1;
}
#cg-ig-PL5 .step-title {
font-size: 15px;
font-weight: 600;
color: #1a1a2e;
margin: 0 0 4px 0;
}
#cg-ig-PL5 .step-desc {
font-size: 13px;
color: #4a4a68;
margin: 0;
line-height: 1.5;
}
#cg-ig-PL5 .code-block {
background: #1a1a2e;
border-radius: 6px;
padding: 12px;
margin-top: 8px;
position: relative;
}
#cg-ig-PL5 .code-text {
font-family: “SF Mono”, Monaco, “Cascadia Code”, monospace;
font-size: 12px;
color: #e2e2ea;
margin: 0;
word-break: break-all;
}
#cg-ig-PL5 .copy-btn {
position: absolute;
top: 8px;
right: 8px;
background: #3D5ACE;
color: #ffffff;
border: none;
border-radius: 4px;
padding: 4px 10px;
font-size: 11px;
font-weight: 600;
cursor: default;
}
#cg-ig-PL5 .stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 20px;
}
#cg-ig-PL5 .stat-box {
background: #ffffff;
padding: 16px 8px;
border-radius: 8px;
text-align: center;
border: 1px solid #e2e2ea;
}
#cg-ig-PL5 .stat-number {
font-size: 24px;
font-weight: 700;
color: #3D5ACE;
margin: 0 0 4px 0;
}
#cg-ig-PL5 .stat-label {
font-size: 11px;
color: #7a7a96;
margin: 0;
line-height: 1.3;
}
#cg-ig-PL5 .case-study {
background: #ffffff;
border-left: 3px solid #E48333;
padding: 12px 16px;
border-radius: 0 8px 8px 0;
margin-bottom: 20px;
}
#cg-ig-PL5 .case-label {
font-size: 12px;
font-weight: 600;
color: #E48333;
margin: 0 0 4px 0;
}
#cg-ig-PL5 .case-text {
font-size: 12px;
color: #4a4a68;
margin: 0;
line-height: 1.5;
}
#cg-ig-PL5 .cta-button {
display: block;
width: 100%;
background: #3D5ACE;
color: #ffffff;
text-align: center;
padding: 14px 20px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
font-size: 15px;
margin-bottom: 16px;
}
#cg-ig-PL5 .source-line {
font-size: 11px;
color: #7a7a96;
text-align: center;
margin: 0;
}
@media (max-width: 480px) {
#cg-ig-PL5 {
padding: 16px;
}
#cg-ig-PL5 .ig-title {
font-size: 18px;
}
#cg-ig-PL5 .stats-grid {
grid-template-columns: 1fr;
}
#cg-ig-PL5 .step-item {
padding: 12px;
}
}

Guide d’installation étape par étape du widget vidéo CompleteGreet sur Shopify, avec quatre étapes de configuration et des repères issus de boutiques clientes. Vérifiez les résultats dans vos propres études avant de présenter une évolution des demandes ou des conversions comme une garantie.

Installer CompleteGreet sur Shopify

Assistant de configuration en quatre étapes, sans code

1

Installer depuis l’App Store Shopify

Recherchez « CompleteGreet » dans la section Applications de votre administration Shopify et cliquez sur Installer.

2

Connecter votre compte

Connectez vous à votre compte CompleteGreet ou créez en un, puis autorisez l’accès à Shopify.

3

Importer votre vidéo d’accueil

Enregistrez ou importez une courte vidéo d’accueil directement dans le tableau de bord.

4

Ajouter le code du widget, facultatif

Pour un emplacement personnalisé, collez cet extrait avant la balise de fermeture </body> :

<script src="https://app.completegreet.com/widget.js"></script> Copier

70 %

Plus de demandes

21 %

Temps passé sur le site ↑

17 %

Conversion ↑

Étude de cas Merchshark.dk

Une boutique danoise d’articles personnalisés a observé une évolution des demandes et du taux de conversion avec un widget vidéo.

Installer CompleteGreet sur Shopify en quelques minutes

See the static HTML data above for the full breakdown.

Que vérifier avant la mise en ligne ?

Ouvrez votre boutique dans Chrome, Safari et Firefox et observez le widget de bulle vidéo apparaître. Il doit rester dans un coin sans recouvrir le menu, le bouton du panier ni le parcours de paiement. Si la bulle recouvre un élément important, ajustez son décalage dans les réglages avant de l’annoncer.

Le trafic mobile est particulièrement important pour les boutiques Shopify.

Testez la boutique avec Safari sur iOS et Chrome sur Android, sur de vrais appareils plutôt que dans un émulateur. 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 la barre d’ajout au panier, ajustez sa position.

Le ciblage des pages est un point où les équipes se trompent souvent.

Vérifiez que vos règles d’affichage correspondent à votre objectif. Une vidéo d’accueil convient à la page d’accueil, pas à la page de paiement où elle peut ajouter de la friction. Les messages spécifiques à un produit doivent apparaître uniquement sur les pages concernées, et non sur tout le site.

Lancez un test avec Google PageSpeed Insights après l’installation. Les ressources vidéo ajoutent du poids et les thèmes Shopify contiennent déjà de nombreux scripts. Si votre indicateur LCP baisse, vérifiez le chargement asynchrone du script et la taille du fichier vidéo. Mesurez les effets dans votre 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 plus vite qu’une absence de formulaire.

Faites une dernière visite comme un client. Ouvrez un produit, ajoutez-le au panier et commencez le paiement. Le widget doit aider sans devenir intrusif. Si l’équilibre est bon, il peut soutenir la conversation avec vos visiteurs.

Les widgets vidéo transforment une boutique Shopify statique en expérience interactive, où les visiteurs voient une personne plutôt qu’une icône de chat automatisée. Le chargement asynchrone limite le blocage du rendu, conformément aux recommandations Google Web Vitals pour préserver des interactions rapides.

La mise en œuvre demande l’installation d’un script, puis une configuration dans un tableau de bord visuel.

CompleteGreet diffuse la vidéo avec un extrait JavaScript léger qui s’initialise après le chargement du contenu. Le script est ajouté une fois au thème, puis les réglages destinés aux visiteurs se gèrent depuis le tableau de bord externe sans modifier à nouveau les fichiers Liquid.

  1. Connectez vous au tableau de bord CompleteGreet et choisissez Ajouter un domaine dans le menu du site.
  2. Saisissez l’URL de la boutique Shopify et copiez le script d’installation généré.
  3. Dans Shopify, ouvrez Boutique en ligne, Thèmes, puis Actions et Modifier le code.
  4. Ouvrez le fichier theme.liquid et collez le script juste avant la balise head de fermeture.
  5. Enregistrez le fichier, puis retournez dans CompleteGreet pour vérifier l’état de la connexion.

Le script peut charger la vidéo via un point de diffusion externe afin de laisser les ressources du navigateur disponibles pour le panier et le paiement. Les boutiques qui utilisent déjà beaucoup d’images ou de scripts doivent vérifier ce comportement avec leurs propres outils.

Les demandes peuvent évoluer après la mise en ligne d’un widget, mais le délai dépend du trafic, du message et du ciblage. Consultez la page des tarifs pour connaître le forfait actuel et les fonctions incluses, puis mesurez la rentabilité avec vos données.

Les tests mobiles restent indispensables, car les thèmes Shopify ne gèrent pas tous la fenêtre d’affichage de la même façon. Vérifiez que la bulle ne masque pas le bouton de paiement sur les petits écrans avant de l’activer sur toutes les pages produit.

Questions fréquentes

Comment ajouter CompleteGreet à ma boutique Shopify sans modifier le code ?

Installez l’application CompleteGreet depuis l’App Store Shopify. Elle ajoute le script à l’emplacement prévu après votre autorisation. La plupart des boutiques peuvent afficher une bulle vidéo après avoir accordé les permissions, importé ou enregistré un message et enregistré la configuration. Vérifiez toujours le site public après l’installation.

Pourquoi ma bulle vidéo ne s’affiche-t-elle pas dans l’aperçu du thème Shopify ?

L’aperçu du thème Shopify fonctionne dans un environnement isolé qui peut bloquer certains scripts tiers pour des raisons de sécurité. La bulle vidéo peut s’afficher normalement sur la boutique publique. Ouvrez votre boutique dans une nouvelle fenêtre privée ou sur un téléphone pour vérifier le résultat réel.

Puis-je afficher CompleteGreet uniquement sur les pages produit Shopify ?

Oui. Configurez des règles de ciblage dans le tableau de bord CompleteGreet afin d’inclure uniquement les chemins contenant /products/. Vous pouvez aussi exclure certaines pages produit avec leurs identifiants. Vérifiez la structure d’URL de votre boutique et testez les règles sur plusieurs appareils.

CompleteGreet ralentit-il ma boutique Shopify ?

Le script se charge de manière asynchrone afin de limiter le blocage du rendu initial. Le résultat dépend toutefois de la vidéo, du thème et des autres scripts présents sur la boutique. Mesurez la vitesse et les Core Web Vitals après l’installation, puis comparez avec vos valeurs de référence.

Combien coûte CompleteGreet pour une boutique Shopify qui reçoit 5 000 visiteurs 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 le niveau adapté à votre boutique Shopify, les conditions de facturation et les éventuelles limites. Vérifiez les informations affichées au moment de l’inscription.

Puis-je utiliser CompleteGreet sur plusieurs boutiques Shopify avec un seul compte ?

Chaque forfait CompleteGreet peut couvrir un site selon les conditions actuelles. Si vous gérez plusieurs boutiques Shopify, consultez les options disponibles pour plusieurs domaines ou marques. Vérifiez les limites et les fonctions incluses avant de choisir une formule.

Azad Habib

Azad Habib

CEO & Founder of CompleteGreet

Azad Habib is the founder of CompleteGreet. With a background in ecommerce and user experience, he works at the intersection of trust, clarity, and conversion to help businesses make their websites feel more human from the first click.