Widget sur le site, lien vers l'agent et application mobile
Comment installer l'agent sur votre site en une ligne, le fonctionnement du lien court pour les réseaux sociaux et les messageries, et comment le client installe votre agent sur son téléphone comme une application.
L'agent a deux visages. Sur le site, c'est une fenêtre dans le coin, qui s'ouvre via un bouton. Sur les réseaux sociaux et les messageries, c'est une page accessible via un lien court, qui fonctionne comme une petite boutique et s'installe sur le téléphone comme une application. Le catalogue, les conditions, les dialogues et les demandes sont communs : l'agent est unique.
Tout ce qui est décrit ci-dessous se trouve dans la section «Widget et lien».
Lien vers l'agent#
Une adresse courte du type comag.vibevox.pro/c/votre-boutique. Elle se place dans la bio de profil Instagram, TikTok ou Telegram, s'envoie sur WhatsApp, ou se met dans la description sous une vidéo YouTube.
Lors de l'envoi dans une messagerie, le lien se déploie en une carte : couverture, nom de la boutique et description. Ces trois champs sont configurables :
- Titre de l'aperçu — par défaut, le nom de la boutique.
- Description de l'aperçu — une courte phrase sur ce que l'on peut demander.
- Couverture — générée automatiquement à partir de votre couleur d'accentuation, de votre logo et des photos de vos produits. Vous pouvez en télécharger une personnalisée, de 1200 sur 630 pixels.
Pour vérifier l'apparence de l'aperçu, le plus simple est de vous envoyer le lien à vous-même sur Telegram.
Code pour le site web#
Une seule ligne à insérer avant la balise de fermeture </body> sur toutes les pages. Elle se copie via un bouton dans le tableau de bord.
Où l'insérer précisément sur les plateformes populaires :
| Plateforme | Où insérer |
|---|---|
| Tilda | Paramètres du site → Plus → Code HTML pour le body |
| Shopify | Thème → Modifier le code → theme.liquid, avant </body> |
| WordPress | Apparence → Éditeur de thème → footer.php, ou un plugin d'insertion de code |
| Wix | Paramètres → Code personnalisé → ajouter dans Body end |
| Votre propre site | Directement dans le template avant </body> |
Après l'insertion, un bouton apparaîtra dans le coin inférieur droit. La position peut être modifiée vers la gauche dans les paramètres, la couleur et le thème également.
Le widget se charge de manière asynchrone et ne ralentit pas la page. Si vous avez configuré une CSP stricte, autorisez le domaine comag.vibevox.pro dans script-src et connect-src.
Apparence#
Paramètres visibles par le client :
- Nom de la boutique et nom de l'assistant. Le second est la signature de l'interlocuteur dans l'en-tête du chat.
- Message de bienvenue. La première phrase. Un bon message de bienvenue promet un avantage, il ne se contente pas de saluer.
- Suggestions en début de dialogue. Jusqu'à quatre boutons avec des questions. Si vide, elles seront générées automatiquement à partir du catalogue.
- Ton de la conversation. À choisir dans une liste ou personnalisé : «chaleureux et concis», «expert, vouvoiement».
- Couleur d'accentuation. Une seule couleur définit le bouton, les liens et la mise en évidence des cartes.
- Logo. Il deviendra également l'icône de l'application sur le téléphone.
- Bouton microphone. Reconnaissance vocale dans le navigateur. Si le navigateur ne le prend pas en charge, le client enregistrera un message vocal, et Gemini le transcrira.
À droite, un aperçu en direct : il se met à jour pendant que vous tapez. Le bouton «Enregistrer» applique les modifications au site.
Thème clair et sombre#
Le chat dispose de deux apparences, et elles se basculent dans un seul champ de paramètres — «Thème».
| Valeur | Ce que voit le client |
|---|---|
| Comme chez le visiteur | Le thème s'adapte aux paramètres de son téléphone ou de son ordinateur : sombre la nuit, clair le jour |
| Clair | Fenêtre toujours claire, quel que soit l'appareil |
| Sombre | Fenêtre toujours sombre |
Par défaut, c'est «comme chez le visiteur», et dans la plupart des cas, c'est le bon choix : une personne avec un thème sombre sur son téléphone ne recevra pas un flash blanc en pleine figure, et celle habituée au thème clair verra une fenêtre familière.
Un thème fixe est nécessaire lorsque le site lui-même est conçu dans une seule tonalité. Une page de destination sombre avec un chat clair dans le coin ressemble à un patch, et vice versa. Dans ce cas, choisissez le même thème que celui du site, et le widget se fondra dans le design.
La couleur d'accentuation fonctionne par-dessus les deux thèmes : les boutons, les liens et la mise en évidence des cartes adoptent votre couleur de marque, tandis que l'arrière-plan et le texte changent avec le thème. Le plus simple pour vérifier les deux options est d'utiliser l'aperçu à droite — il se redessine instantanément pendant que vous changez la valeur.
Les fiches produits mènent à votre site#
L'agent ne répond pas par un texte continu, mais par des fiches : photo, nom, prix, bouton. Derrière le bouton se trouve toujours une adresse — la page du produit sur votre site ou le post original sur le réseau social, si la fiche en est issue.
À l'intérieur du widget sur le site, la transition se fait dans la même fenêtre pour ne pas multiplier les onglets. Sur la page de l'agent via le lien, la fiche s'ouvre dans un nouvel onglet, afin que le dialogue ne soit pas perdu.
Pour les boutiques sur Shopify et WooCommerce, il y a un détail appréciable : le bouton ne se contente pas d'ouvrir le produit, il l'ajoute au panier de la boutique via le mécanisme standard de la plateforme. Les détails se trouvent dans les articles sur Shopify et WordPress.
De plus : le widget lit le balisage du produit sur la page où il est ouvert, et le transmet à l'agent. Ainsi, la question «est-ce disponible en bleu ?» sur une fiche produit est comprise dans son contexte, sans qu'il soit nécessaire de préciser de quoi il s'agit.
Application sur le téléphone du client#
La page de l'agent peut s'installer comme une application. Le client ouvre le lien depuis son téléphone, voit une suggestion d'ajout à l'écran d'accueil et obtient une icône avec votre logo.
- Nom sous l'icône — un seul mot de 12 caractères maximum. Si vide, nous prendrons le premier mot du nom de la boutique.
- Icône — le logo téléchargé. S'il n'y a pas de logo, celui de Commerce Agents est utilisé.
- Sur iPhone, l'installation se fait via «Partager» → «Sur l'écran d'accueil», c'est une limitation de Safari, et l'agent indique les étapes lui-même.
Après l'installation, vous pouvez envoyer des notifications push au client depuis la section «Dialogues». Il donne lui-même l'autorisation en cliquant sur la cloche dans l'en-tête du chat.
Pièces jointes du client#
Le chat dispose d'une icône de trombone : photo, vidéo ou audio jusqu'à 20 mégaoctets. Si le navigateur ne prend pas en charge la reconnaissance vocale, maintenir le microphone enregistre un message vocal.
Gemini analyse le fichier : ce qui est montré, le texte sur l'image, ce qui est dit à voix haute. L'agent répond en se basant sur cette analyse, et vous voyez dans le dialogue à la fois le fichier et une brève description. C'est utile dans les domaines où il est plus simple de montrer que de décrire : pièces détachées, réparation, sélection par photo.
Pixel d'achat pour les sites avec panier#
Si le paiement se fait sur votre site et non dans le chat, insérez un court fragment depuis le tableau de bord sur la page «Merci pour votre commande», en y ajoutant le numéro de commande et le montant. L'achat sera lié au dialogue, et les statistiques montreront quelles conversations aboutissent à une vente.
Vérification#
Trois minutes à consacrer après la configuration :
- Ouvrez le site en mode incognito et cliquez sur le bouton du widget. Posez une question sur un produit.
- Ouvrez le lien de l'agent depuis votre téléphone. Vérifiez que l'installation est proposée.
- Envoyez le lien à vous-même dans une messagerie et regardez l'aperçu.
- Consultez « Dialogues » : les deux conversations devraient y apparaître.
Questions fréquentes#
Le widget sur le site et le lien : des agents différents ?#
C'est le même. Le catalogue, les conditions, les dialogues et les demandes sont communs. Seule la présentation diffère : sur le site, une fenêtre dans le coin ; par le lien, une page plein écran que l'on peut installer sur le téléphone.
Peut-on modifier l'adresse du lien ?#
L'adresse est générée à partir du nom de la boutique lors de la création de la vitrine. Si vous souhaitez une autre adresse, écrivez-nous sur Telegram : nous la modifierons manuellement afin de ne pas casser les liens déjà diffusés.
Le widget va-t-il ralentir le site ?#
Non. Le script est léger et se charge de manière asynchrone, après le contenu principal de la page. La fenêtre de chat elle-même ne se charge que lorsque le client clique sur le bouton.
Que voit le client si l'agent est désactivé ?#
Rien : le bouton n'apparaît pas, et la page via le lien indique que l'agent est indisponible. L'interrupteur se trouve dans la section « Widget et lien ».
Comment supprimer la mention « Propulsé par Commerce Agents » ?#
Pour l'instant, ce n'est pas possible : la signature reste visible sur tous les forfaits. Elle est cliquable et renvoie vers notre site — c'est une partie du prix qui permet au service de coûter 29 € au lieu d'un montant nettement plus élevé.