Intégration Shopify
Ajoutez les chatbots IA ChatReact, les formulaires de contact et les accordéons FAQ à votre boutique Shopify avec l'application officielle ChatReact pour Shopify.
Installation
- Installez l'application ChatReact depuis le Shopify App Store
- Ouvrez l'application dans votre panneau d'administration Shopify
Aucune connexion de compte séparée n'est nécessaire — vous liez l'application à vos chatbots et formulaires en collant leurs IDs depuis le tableau de bord ChatReact.
Fonctionnalités
L'application Shopify fournit trois types de widgets :
| Widget | Description | Emplacement |
|---|---|---|
| Chat Widget | Chatbot IA avec assistance en direct | Sur l'ensemble du site ou pages spécifiques via App Embed |
| Form Widget | Formulaires de contact avec protection anti-spam | Inline via App Block dans l'éditeur de thème |
| FAQ Widget | Affichage FAQ en accordéon | Inline via App Block dans l'éditeur de thème |
Configuration du Chat Widget
La configuration du chat widget se fait en deux étapes : créez une affectation de widget dans l'application ChatReact, puis activez l'App Embed dans votre thème.
Étape 1 : Créer une affectation de widget
- Ouvrez l'application ChatReact dans votre administration Shopify
- Dans l'onglet Chat Widget, cliquez sur Add Assignment
- Saisissez votre Chatbot ID (trouvable dans le tableau de bord ChatReact sous Settings → Embed)
- Cliquez sur Save Assignment
Étape 2 : Activer l'App Embed
- Allez dans Online Store → Themes → Edit theme
- Cliquez sur l'icône App embeds (pièce de puzzle) dans la barre latérale en bas à gauche
- Basculez ChatReact Chat Widget sur ON
- Cliquez sur Save
Vous n'avez besoin d'activer l'App Embed qu'une seule fois. Après cela, vous gérez entièrement l'emplacement d'apparition du widget depuis l'application ChatReact.
Le chat widget apparaît sur chaque page couverte par une de vos affectations de widget.
Affectations de widget
Chaque affectation lie un chatbot à votre vitrine. Il existe deux types d'affectation :
- Everywhere : le widget apparaît sur toutes les pages (par défaut). Vous pouvez éventuellement ajouter des Exclude URLs — un chemin par ligne, avec des jokers
*pris en charge (par ex./blogs/*) - Specific Page : le widget n'apparaît que sur le chemin de page que vous saisissez (par ex.
/pages/about)
Si une page possède sa propre affectation Specific Page, ce chatbot y est affiché à la place du chatbot Everywhere.
Ajout des widgets Form et FAQ
Les widgets Form et FAQ sont ajoutés en tant que App Blocks dans l'éditeur de thème :
- Allez dans Online Store → Themes → Edit theme
- Naviguez vers la page où vous souhaitez placer le widget
- Cliquez sur Add block et recherchez "ChatReact"
- Choisissez ChatReact Form ou ChatReact FAQ
- Saisissez l'ID du formulaire ou le Chatbot ID dans les paramètres du bloc
Intégration manuelle (Liquid)
Si vous préférez modifier les templates directement, vous pouvez aussi ajouter les widgets à n'importe quel template Liquid :
<!-- Form widget -->
<div id="chatreact-form"></div>
<script src="https://www.chatreact.ai/embed/form.js"
data-form-id="YOUR_FORM_ID"
data-container="chatreact-form"
async></script>
<!-- FAQ widget -->
<div id="chatreact-faq"></div>
<script src="https://www.chatreact.ai/embed/faq-widget.js"
data-chatbot-id="YOUR_CHATBOT_ID"
data-container="chatreact-faq"
async></script>
Style du Form Widget
Personnalisez l'apparence du formulaire dans l'éditeur de thème :
| Paramètre | Options |
|---|---|
| Alignment | Left, Center, Right |
| Max Width | 200–1200px |
| Font Size | 12–28px |
| Margin Bottom | 0–120px |
| Language | Détection automatique (par défaut) ou une des 24 langues |
Style du FAQ Widget
| Paramètre | Options |
|---|---|
| Categories | Slugs de catégories optionnels séparés par des virgules (par ex. general,pricing) pour n'afficher que les catégories FAQ sélectionnées |
| Font Size | 12–28px |
| Margin Bottom | 0–120px |
| Language | Détection automatique (par défaut) ou une des 24 langues |
Gestion des widgets
L'application ChatReact dans votre administration Shopify fournit trois onglets :
- Chat Widget — Créez et gérez les affectations de widget qui contrôlent les pages affichant le chat widget
- Forms — Instructions d'intégration étape par étape, le fragment Liquid manuel et l'endroit où trouver votre Form ID
- FAQ Widget — Instructions d'intégration pour le widget FAQ et l'endroit où trouver votre Chatbot ID
La sélection du Form et du FAQ se fait dans l'éditeur de thème : saisissez le Form ID ou le Chatbot ID dans les paramètres du bloc.
Support des langues
L'application prend en charge les 24 langues de l'UE :
- Le chat widget détecte automatiquement la langue du navigateur de chaque visiteur et la met en correspondance avec les langues prises en charge par votre chatbot, en revenant à la langue principale du chatbot si nécessaire
- Les blocs Form et FAQ disposent chacun de leur propre paramètre Language dans l'éditeur de thème — il est réglé par défaut sur Auto-detect et peut être remplacé par bloc
Désinstallation
Lorsque vous désinstallez l'application ChatReact, toutes les configurations de widgets et les données stockées sont automatiquement supprimées de votre boutique Shopify.