Documentation

Shopify

Installez le widget Agentkit dans un thème Shopify avec le code généré complet.

Ajoutez le widget Agentkit à votre boutique Shopify en plaçant le code d’intégration généré complet dans theme.liquid.

Dans Agentkit, ouvrez Canaux → Intégration au site web → Widget de chat, activez le canal et copiez le code complet. Il contient deux balises script : une initialisation intégrée et un chargement asynchrone. Gardez les deux. Shopify recommande de dupliquer le thème avant de modifier son code.

Méthode 1 : modifier theme.liquid

Ajoutez le widget sur tout le site en modifiant votre thème publié :

  1. Dans l’administration Shopify, accédez à Boutique en ligne → Thèmes.
  2. Sur la ligne de votre thème actif, cliquez sur le menu ... (Actions) → Modifier le code.
  3. Dans le dossier Layout à gauche, ouvrez theme.liquid.
  4. Faites défiler jusqu’en bas et collez votre code d’intégration juste avant la balise fermante </body>.
  5. Cliquez sur Enregistrer.

Collez le code copié sans le modifier. Après l’enregistrement, vérifiez que les deux balises <script> figurent dans le code source de la boutique affichée.

Le widget apparaît sur toutes les pages de la boutique : produit, collection, panier, accueil.

Méthode 2 : dupliquer d’abord, puis modifier (recommandé)

Si vous voulez pouvoir revenir en arrière en toute sécurité :

  1. Boutique en ligne → Thèmes.
  2. Sur votre thème actif, cliquez sur le menu ... (trois points) → Dupliquer. Une copie apparaît en bas de la liste des thèmes.
  3. Modifiez le fichier theme.liquid de la copie comme ci-dessus.
  4. Cliquez sur le menu ... de la copie → Aperçu pour tester.
  5. Une fois satisfait, cliquez sur le menu ... → Publier pour la mettre en ligne.

Installation sur une seule page

Pour afficher le widget sur une seule page, demandez à un développeur de limiter les deux balises générées à un modèle de page du thème. Vérifiez leur présence sur cette page et leur absence ailleurs. L’éditeur de texte enrichi de Pages n’est pas une méthode d’installation vérifiée pour ce widget.

Prérequis

  • Vous devez avoir accès au code du thème. Un thème payant en essai ne peut être modifié qu’après achat. Votre rôle doit disposer des autorisations Themes et Edit code. Consultez le guide Shopify sur le code du thème.
  • Laissez le canal Widget de chat d’Agentkit activé pendant le test de la boutique publique.
  • Si les restrictions de domaine sont activées, autorisez l’origine exacte de l’aperçu du thème et celle de la boutique en ligne. Retirez l’origine temporaire de l’aperçu après le test.

Après la publication

Si le widget n’apparaît pas dans la boutique publique :

  1. Actualisez la page en forçant le cache (⌘+Shift+R sur Mac, Ctrl+F5 sur Windows).
  2. Ouvrez le site dans une fenêtre de navigation privée.
  3. Vérifiez la console du navigateur pour repérer les erreurs.

Dépannage

Le widget n’apparaît pas.

  • Vérifiez que vous avez bien modifié le thème actif (ou publié la copie).
  • Vérifiez que les deux balises script générées se trouvent avant </body> dans le code source de la boutique.
  • Vérifiez que les restrictions de domaine Agentkit autorisent le domaine de votre boutique.

Le widget chevauche le chat ou le tiroir de panier de Shopify.

  • Ajustez la position du widget dans les paramètres Design de votre agent.

Le widget apparaît dans l’éditeur mais pas sur la boutique en ligne.

  • Vérifiez que vous avez bien cliqué sur Enregistrer après le collage — l’éditeur de code n’enregistre pas automatiquement.

Tests

  1. Ouvrez votre boutique dans une fenêtre de navigation privée.
  2. Repérez la bulle de discussion dans le coin.
  3. Cliquez pour l’ouvrir et envoyer un message de test.
  4. Vérifiez la présence des deux balises script générées dans le code source de la page.

Connecter une boutique pour la recherche de commandes et de produits

Intégrer le widget et connecter votre boutique sont deux choses distinctes. Le code d’intégration ci-dessus place le widget de chat sur votre boutique en ligne. Une connexion Shopify distincte — effectuée depuis l’onglet Actions → Intégrations de votre agent — permet en plus à l’agent de rechercher dans votre catalogue en direct et de consulter le statut d’une commande au sein de la conversation.

Vous pouvez utiliser l’une ou l’autre indépendamment. Utilisez le widget seul si l’agent doit répondre uniquement à partir de votre contenu d’entraînement, et ajoutez la connexion à la boutique lorsque vous voulez des données produits et commandes en direct.

Connecter la boutique fournit les identifiants mais n’active rien en soi : ensuite, ajoutez les actions Rechercher des produits et Statut de commande sous l’onglet Actions de votre agent, puis activez chacune que vous voulez que l’agent utilise.

Configurer les actions Shopify →

Étapes suivantes