Non classé 20 mai 2026

Widget vidéo pour Magento et Adobe Commerce : installation et personnalisation

Découvrez comment installer un widget vidéo sur Magento et Adobe Commerce, personnaliser son affichage et vérifier ses performances avant la mise en ligne.

Widget vidéo pour Magento et Adobe Commerce : installation et personnalisation

À retenir

  • L’installation prend généralement quelques minutes sur une boutique Magento standard. Vérifiez toutefois la méthode adaptée à votre thème et à votre configuration.
  • CompleteGreet vous permet de choisir quand le widget apparaît, ce qu’il propose aux visiteurs et la manière dont il s’intègre à votre boutique.
  • Testez votre site dans Chrome, Safari et Firefox avant de l’annoncer afin de vérifier que l’affichage reste cohérent.

Comment installer CompleteGreet sur Magento ?

L’installation sur une boutique Magento 2 standard consiste à ajouter un script dans le pied de page. Aucun téléchargement d’extension ni paquet Composer n’est généralement nécessaire. Le script se charge de manière asynchrone sur les pages concernées.

Illustration du parcours d'installation de CompleteGreet sur Magento

Voici le parcours exact dans l’administration Magento.

  1. Connectez-vous au tableau de bord CompleteGreet et copiez le code d’intégration depuis la section d’installation. Il s’agit d’une balise script contenant l’identifiant unique de votre site.
  2. Dans l’administration Magento, ouvrez Contenu, puis Design et Configuration. Vous verrez la liste des vues de boutique et de leurs thèmes actifs.
  3. Cliquez sur Modifier pour le thème actuellement utilisé par votre boutique. Si vous gérez plusieurs vues, commencez par celle où vous souhaitez afficher le widget.
  4. Faites défiler jusqu’à la section Pied de page et développez-la. Repérez le champ HTML divers, dans lequel Magento injecte du code avant la balise body de fermeture.
  5. Collez votre script CompleteGreet dans ce champ. N’ajoutez pas de balises div ou script autour du code, car l’extrait est déjà complet.
  6. Enregistrez la configuration, puis videz le cache Magento depuis Système et Gestion du cache. Actualisez complètement votre boutique pour vérifier que la bulle apparaît dans le coin choisi.

Avec Adobe Commerce Cloud, le processus peut différer. Le système de fichiers est généralement en lecture seule en production, vous ne pouvez donc pas modifier directement le thème depuis l’administration. Ajoutez le script dans default.xml ou créez un bloc CMS référencé dans le XML de mise en page, puis déployez via le pipeline Cloud. Le même script peut être utilisé, mais le déploiement dépend de votre processus.

Les configurations multiboutiques demandent un choix. Vous pouvez installer le widget pour toutes les vues en modifiant le thème par défaut, ou cibler certaines boutiques dans leurs configurations respectives. Commencez avec une seule vue pour vérifier l’affichage avant d’étendre la configuration au catalogue complet.

Consultez le code source de la page après l’installation. Le script doit apparaître juste avant la balise body de fermeture sur chaque page où le widget est actif. S’il manque, vérifiez que votre thème ne remplace pas le modèle de pied de page et ne supprime pas la sortie HTML divers. Certains thèmes personnalisés nécessitent un ajout manuel dans footer.phtml.

Que pouvez-vous personnaliser sur Magento ?

CompleteGreet vous permet de choisir quand le widget apparaît, ce qu’il propose aux visiteurs et la manière dont il s’intègre à votre boutique. Ces règles se configurent dans le tableau de bord et sont ensuite appliquées à votre site Magento.

Illustration des options du widget vidéo pour Magento et Adobe Commerce

Ciblage et déclenchement

Les règles par page permettent d’afficher le widget uniquement là où il est pertinent. Vous pouvez cibler des modèles d’URL comme /products/* ou /cart, ou exclure entièrement le paiement. Le délai peut être réglé selon votre contenu, notamment sur les articles où les visiteurs doivent lire avant de voir la bulle. L’affichage mobile dispose de son propre réglage.

Le positionnement compte sur les boutiques Magento qui utilisent des éléments flottants. La bulle apparaît normalement en bas à droite, mais vous pouvez la placer en bas à gauche si cela évite un bouton de chat ou une bannière de cookies. Un léger décalage vertical suffit souvent à éviter une barre de navigation fixe.

Boutons d’action et formulaires de collecte

Chaque message vidéo se termine par un bouton d’appel à l’action que vous rédigez vous même. Vous pouvez par exemple proposer de réserver une démonstration, de demander un devis ou de parler à l’équipe commerciale. Le clic peut ouvrir un agenda, afficher un formulaire ou envoyer une demande à votre boîte de réception.

Le générateur de formulaires intégré permet d’ajouter les champs utiles, comme le nom, l’adresse électronique, l’entreprise et le téléphone. Vous pouvez relier ces champs à votre CRM via un webhook afin de transmettre les demandes à HubSpot, Salesforce ou à un autre point de terminaison. CompleteGreet comptabilise les visiteurs uniques du mois selon le forfait choisi. Consultez les intégrations prises en charge pour connaître la liste actuelle.

Image de marque et positionnement

Les couleurs se règlent avec des codes hexadécimaux pour rapprocher la bulle de votre identité visuelle. L’arrière plan, le bouton de lecture et les accents du formulaire utilisent cette palette. Vous pouvez importer votre logo pour l’en tête du widget, tandis que la miniature vidéo provient de votre message d’accueil.

Un détail souvent oublié est la couleur du bouton de fermeture. Sur un pied de page sombre, une bulle sombre peut rendre le X difficile à distinguer. Choisissez une couleur claire ou un contraste suffisant dans l’onglet avancé afin que les visiteurs identifient facilement le bouton.

Le son est désactivé par défaut, ce qui convient généralement aux sites professionnels consultés pendant les heures de travail. Vous pouvez autoriser la lecture automatique, mais il est souvent préférable de laisser les visiteurs activer le son eux mêmes.

Que vérifier avant la mise en ligne ?

Testez votre site dans Chrome, Safari et Firefox avant de l’annoncer. La bulle vidéo doit rester dans un coin sans recouvrir la navigation fixe ni les boutons du pied de page.

Les boutiques Magento utilisent souvent des en têtes fixes dont la hauteur change pendant le défilement. Faites défiler la page vers le bas, puis remontez. Le widget doit rester dégagé de la navigation à chaque position. S’il la recouvre, ajustez le décalage vertical dans le tableau de bord.

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 au minimum l’accueil, une page produit et le panier.

Le ciblage des pages doit aussi être vérifié. Par défaut, le widget peut apparaître partout, alors que la plupart des boutiques Magento préfèrent l’exclure pendant le paiement. Ajoutez des règles qui le masquent sur /checkout/, /cart/ et /onepage/. Gardez le widget actif sur les pages produit, les catégories et l’accueil lorsque ces pages accompagnent la décision d’achat.

Effectuez un contrôle avec les recommandations Google Web Vitals 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é à votre page. Mesurez le résultat dans votre propre environnement avant la mise en ligne.

Remplissez le formulaire de contact dans le widget et envoyez une demande. Confirmez qu’elle arrive bien 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.

Une fois tout vérifié, vous pouvez créer un compte gratuit et mettre le widget en ligne.

Les boutiques Magento et Adobe Commerce utilisent souvent des images et du texte pour présenter leur offre. Un widget vidéo ajoute une présence humaine directement dans la boutique, sans rediriger les visiteurs vers un lecteur externe.

Les sections suivantes présentent les étapes techniques pour ajouter CompleteGreet à une instance Magento.

Conditions de mise en œuvre

Ajouter CompleteGreet à Magento nécessite un accès aux fichiers du thème ou la possibilité de modifier des blocs CMS depuis l’administration. Le widget se charge avec un seul extrait JavaScript placé dans le pied de page afin de pouvoir s’exécuter sur chaque page.

Avant d’activer le widget, vérifiez que le certificat SSL est actif sur tous les domaines de la boutique et que les en têtes de votre politique de sécurité du contenu autorisent les scripts provenant de completegreet.com.

CompleteGreet se connecte à Magento avec une intégration par script direct plutôt qu’avec une extension native. Cette approche peut limiter les conflits de version lors des mises à jour Adobe Commerce, mais testez toujours votre propre thème.

Les tarifs du forfait Build indiquent que le coût annuel dépend du forfait, du nombre de visiteurs et des fonctions choisies. Consultez la page des tarifs pour connaître le prix et les limites applicables à votre domaine.

Les widgets vidéo doivent respecter les préférences de confidentialité et les normes d’accessibilité. La mise en œuvre de recommandations d’accessibilité de la W3C favorise la navigation au clavier et la compatibilité avec les lecteurs d’écran pour le bouton qui ouvre le widget.

Les boutiques qui ajoutent une présence vidéo humaine sur des pages importantes peuvent observer des changements dans le comportement des visiteurs. Le widget fonctionne indépendamment des blocs natifs Magento et peut donc être retiré ou mis à jour sans modifier la base du catalogue. Vérifiez toutefois le résultat avec vos propres données.

Pour les déploiements Adobe Commerce sur une infrastructure Cloud, placez le script CompleteGreet dans la section inlineScripts du XML de mise en page afin qu’il se charge après le DOM. Cela aide à éviter que la bulle ne s’affiche avant l’application des feuilles de style.

Questions fréquentes

Comment installer CompleteGreet sur Magento sans toucher aux fichiers du thème ?

Installez CompleteGreet depuis l’administration Magento en ajoutant une balise script dans la configuration prévue. Ouvrez Contenu, Design et Configuration, sélectionnez le thème actif et collez le code d’intégration dans le champ de scripts autorisé. Le widget se charge de manière asynchrone après l’actualisation du cache. Aucun accès FTP ni éditeur de fichiers n’est nécessaire avec cette méthode.

Pourquoi ma bulle vidéo CompleteGreet n’apparaît-elle pas dans l’aperçu Magento Page Builder ?

Les aperçus Magento Page Builder utilisent une iframe isolée qui peut bloquer les scripts externes pour des raisons de sécurité. La bulle vidéo s’affiche sur la boutique publique, lorsque le contexte de page et les scripts sont chargés normalement. Publiez la page, puis vérifiez le site réel.

Puis-je cibler CompleteGreet sur certaines pages produit Magento uniquement ?

Oui. Utilisez les règles d’URL du tableau de bord CompleteGreet pour cibler des pages produit selon leur chemin ou leur catégorie. Ajoutez des conditions comme /products/ ou /catalog/product/view/ pour limiter l’affichage aux fiches produit. Excluez le panier et le paiement avec des règles négatives pour /checkout/ ou /cart/.

L’ajout de CompleteGreet affecte-t-il la vitesse du site Magento ou les Core Web Vitals ?

CompleteGreet charge le script de manière asynchrone après le contenu principal afin de limiter le blocage du rendu. Le résultat dépend aussi de la vidéo, du thème et des autres scripts. Mesurez la vitesse et les Web Vitals sur votre boutique après l’installation.

CompleteGreet fonctionne-t-il avec les thèmes Magento personnalisés et les configurations headless ?

CompleteGreet peut fonctionner avec les thèmes Magento qui autorisent l’injection de HTML, notamment Hyva, Porto et les développements personnalisés. Pour une boutique headless utilisant React ou Vue, ajoutez le script au composant de mise en page racine. Testez le positionnement avec votre propre framework CSS.

Combien coûte CompleteGreet pour une boutique Magento qui reçoit 10 000 visiteurs par mois ?

Le prix dépend du forfait actuel, du volume de visiteurs et des fonctions incluses. Consultez les tarifs CompleteGreet pour voir la limite correspondant à votre audience et les éventuels niveaux supérieurs. Vérifiez les conditions de comptage avant de comparer avec une facturation à l’interaction ou à la minute.

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.