Aller au contenu
intoCHAT

Intégration VTEX

Chatbot IA pour votre boutique VTEX

Connectez votre storefront VTEX pour que l'agent cherche produits et prix à jour via l'Intelligent Search publique de VTEX, puis ajoutez le chat avec Google Tag Manager ou dans le code de votre storefront. Aucune app key nécessaire.

Créer votre agent gratuitement

Dernière mise à jour:

Comment intoCHAT fonctionne avec VTEX

intoCHAT repère votre compte VTEX à partir de votre storefront et cherche les produits via l'Intelligent Search publique de VTEX, la même recherche que celle de votre boutique. Cela fonctionne aussi bien pour les boutiques Store Framework que pour les storefronts headless. La bulle de chat s'ajoute avec un court script, via Google Tag Manager ou dans le code de votre storefront. L'agent ne lit que des données publiques du catalogue : ni commandes, ni paniers, ni paiement, ni comptes clients.

Configurer intoCHAT sur VTEX

  1. Créez et entraînez votre agent

    Inscrivez-vous, créez un agent et saisissez l'adresse de votre boutique dans l'onglet Knowledge pour qu'il apprenne vos pages livraison, retours et aide. Vous pouvez aussi importer des fichiers ou ajouter des questions-réponses.

  2. Connectez votre boutique

    Dans l'onglet Actions, choisissez Connect your website et collez l'adresse que visitent vos clients, même s'il s'agit d'une storefront sur mesure. intoCHAT détecte votre compte VTEX et ajoute l'action Search products.

  3. Créez une balise Custom HTML dans Google Tag Manager

    Si votre boutique utilise l'app Google Tag Manager de VTEX, ouvrez votre conteneur GTM et allez dans Balises > Nouvelle > Configuration de la balise > HTML personnalisée. Collez le code ci-dessous et remplacez YOUR_AGENT_ID par l'identifiant de l'onglet Share.

  4. Déclenchez-la sur toutes les pages

    Ajoutez à la balise un nouveau déclencheur de type DOM prêt sur tous les événements, pour que le body de la page existe quand le widget démarre, puis enregistrez la balise. Vérifiez-la en mode aperçu, puis envoyez et publiez le conteneur.

  5. Vérifiez votre boutique

    Ouvrez votre boutique. La bulle de chat apparaît dans le coin inférieur, avec les couleurs et la position définies dans l'onglet Appearance.

Le code pour une balise Custom HTML dans GTM

<script>
  (function () {
    if (document.getElementById('intochat-embed')) return;
    var s = document.createElement('script');
    s.id = 'intochat-embed';
    s.src = 'https://www.intochat.ai/api/embed.js';
    s.setAttribute('data-chatbot-id', 'YOUR_AGENT_ID');
    document.body.appendChild(s);
  })();
</script>

Google Tag Manager supprime les attributs data des balises script placées dans Custom HTML : la simple balise script se chargerait sans l'identifiant de l'agent. Cette version définit l'attribut en JavaScript. Le même code fonctionne dans le body.html d'une app pixel ou dans un template du CMS.

Ce que fait l'agent dans votre boutique VTEX

  • Cherche dans le catalogue en direct

    Chaque recherche passe par VTEX Intelligent Search pour votre compte et renvoie jusqu'à cinq produits avec nom, marque, prix, catégories et spécifications SKU.

  • Affiche des fiches produits

    Les réponses contiennent des fiches avec l'image, le prix et un lien construit sur le format des URL produits de votre storefront.

  • Annonce le prix réellement payé

    L'agent distingue le prix de vente du prix catalogue avant remise : il annonce ce que le client paie vraiment, dans la devise de votre boutique.

  • Fonctionne avec les storefronts headless

    Collez l'adresse que visitent vos clients. intoCHAT lit le format des liens produits sur vos pages, pour que les liens mènent à votre storefront.

  • Répond au-delà du catalogue

    Entraînez-le sur vos pages ou fichiers livraison, retours et FAQ. Les questions-réponses passent avant les autres sources.

  • Collecte des leads

    Un formulaire dans le chat demande un e-mail ou un numéro de téléphone selon vos règles, et chaque nouveau lead déclenche une alerte par e-mail.

Questions fréquentes

Que lit intoCHAT dans ma boutique VTEX ?

Les données publiques du catalogue issues de VTEX Intelligent Search pour votre compte : noms de produits, marques, prix, catégories et spécifications SKU, ainsi que la devise de la boutique tirée de son canal de vente public. Aucune app key n'est nécessaire, et l'agent ne voit ni commandes, ni paniers, ni paiement, ni comptes clients.

L'agent peut-il suivre les commandes ?

Non. Consulter une commande exige des identifiants privés de la boutique et la preuve que la commande appartient au visiteur, ce qu'une connexion publique ne peut pas fournir. L'agent répond aux questions de livraison et de retour à partir de vos pages et recueille un e-mail ou un numéro de téléphone pour que votre équipe recontacte le client.

Comment ajouter le chat sans Google Tag Manager ?

Sur Store Framework, un développeur peut placer le même code dans le fichier body.html d'une app pixel, qui s'exécute dans le body de chaque page de la boutique ; n'utilisez pas head.html. Sur une boutique en Legacy CMS, allez dans Storefront > Layout > CMS > HTML Templates et collez-le juste avant la balise de fermeture du body de chaque template utilisé par vos pages. Sur FastStore ou une autre storefront headless, demandez à votre développeur de l'ajouter au code de la storefront pour qu'il s'exécute sur chaque page.

Pourquoi ne pas coller la simple balise script dans Google Tag Manager ?

GTM supprime les attributs data des balises script dans les balises Custom HTML : le script se chargerait sans l'identifiant de votre agent et aucun chat n'apparaîtrait. Le code de cette page crée l'élément script en JavaScript et définit lui-même l'attribut. Là où vous modifiez directement le HTML, comme dans un template du CMS, la balise script d'une ligne de l'onglet Share fonctionne aussi.

Est-ce compatible avec une storefront headless sur VTEX ?

Oui. Connectez l'adresse que visitent vos clients. intoCHAT reconnaît le compte VTEX grâce aux adresses des ressources présentes sur vos pages, comme vtexassets.com, et construit les liens produits au format de votre storefront.

Le chat ralentit-il ma boutique ?

Via Google Tag Manager, le script est inséré une fois que la page a commencé à se charger : il ne retarde pas votre contenu. La fenêtre de chat tourne dans son propre iframe servi par intoCHAT, son code reste donc séparé de votre storefront.

Voyez-le répondre à partir de votre site

Collez l’adresse de votre site et discutez avec un agent créé à partir de vos pages. Cela prend environ une minute.

Créer votre agent gratuitement

Offre gratuite, sans carte bancaire.