L'ajout de ChatLab à votre site web permet à vos visiteurs d'interagir directement avec votre chatbot IA sur votre site. Ce guide vous explique comment obtenir le code d'intégration et l'ajouter à votre site web.
Avant de commencer
Créez et entraînez votre chatbot avant de le partager avec vos clients. Pour l'installation, vous avez également besoin des autorisations pour modifier et publier le site web. Consultez Comment créer votre premier chatbot ChatLab.
Ouvrir l'onglet Deploy
Sélectionnez votre chatbot depuis le tableau de bord principal, puis cliquez sur l'onglet Deploy (Déployer).
Choisir votre plateforme
Le panneau Select Platform (Sélectionner la plateforme) sur la droite liste les destinations prises en charge réparties en deux groupes : Website (Site web), pour placer le chatbot sur les pages que vous contrôlez, et Messaging channels (Canaux de messagerie), pour le connecter à un compte de messagerie existant. Cliquez sur l'élément correspondant à l'endroit où vous souhaitez faire apparaître le chatbot pour afficher les instructions adaptées.
Plateformes prises en charge :
- HTML Code - fonctionne avec n'importe quel site web dont vous pouvez modifier le code HTML
- WordPress - via l'extension officielle ChatLab ou par insertion manuelle de code
- Wix - via Settings > Custom Code (Paramètres > Code personnalisé)
- Webflow - via Site settings > Custom code (Paramètres du site > Code personnalisé), avec l'accès au code personnalisé activé pour votre site ou votre espace de travail
- PrestaShop - via le module ChatLab PrestaShop ou par insertion manuelle de code
- Shopify - via le fichier theme.liquid
- WooCommerce - via l'extension WordPress ou par insertion manuelle de code
- Abicart - via Store design > Themes > Site header (Design de la boutique > Thèmes > En-tête du site)
- CS-Cart - via Design > Layouts > Custom HTML code (Design > Mises en page > Code HTML personnalisé)
Canaux de messagerie :
- WhatsApp Business - répond sur un compte WhatsApp Business, consultez WhatsApp for Business
- Facebook Messenger - répond aux messages de votre page Facebook, consultez Intégration avec Facebook Messenger
- Instagram - répond aux messages directs Instagram, consultez Intégration avec Instagram
Les canaux de messagerie n'utilisent pas le code d'intégration ci-dessous. Ils sont connectés à un compte que vous possédez déjà, aucun code n'est donc à coller sur un site web.
Chaque plateforme affiche des instructions détaillées étape par étape, propres à cette intégration. Pour les plateformes disposant d'un article d'aide dédié, un lien View full instructions (Voir les instructions complètes) apparaît en bas.
Ajouter via HTML Code
L'option HTML Code fonctionne avec n'importe quel site web dont vous avez accès au code source. Deux options d'intégration s'offrent à vous : Widget et Iframe.
Mode Widget
L'onglet Widget affiche le code qui ajoute une icône de chat à votre site web. Lorsque les visiteurs cliquent sur l'icône, une fenêtre contextuelle de chat s'ouvre.
- Cliquez sur l'onglet Widget
- Cliquez sur Copy to clipboard (Copier dans le presse-papiers) pour copier le code
- Localisez la section
<head>de votre site web - Collez le code comme dernier élément dans la section
<head> - Actualisez votre navigateur pour vérifier que l'icône du chatbot apparaît
Mode Iframe
L'onglet Iframe affiche le code qui intègre le chatbot directement dans le contenu de votre page. Le chatbot est toujours visible et peut être entouré d'autres éléments de la page.
- Cliquez sur l'onglet Iframe
- Cliquez sur Copy to clipboard (Copier dans le presse-papiers) pour copier le code
- Collez le code n'importe où dans le code HTML de votre site web à l'endroit où vous souhaitez faire apparaître le chatbot
- Ajustez les attributs
widthetheightpour correspondre à votre mise en page
Vous hésitez sur le choix à faire ? Lisez Quelle est la différence entre un widget et un iframe ? pour une comparaison détaillée.
Ajouter via WordPress ou WooCommerce
Les plateformes WordPress et WooCommerce proposent deux méthodes d'installation : Plugin Installation (Installation par extension, recommandée) et Manual Installation (Installation manuelle).
Installation par extension (recommandée)
- Cliquez sur Get the plugin on WordPress.org (Obtenir l'extension sur WordPress.org), puis installez et activez l'extension ChatLab.
- Ouvrez ChatLab dans WordPress. Pour une boutique WooCommerce, laissez l'option WooCommerce integration (Intégration WooCommerce) sélectionnée afin de connecter également les données de la boutique.
- Cliquez sur Continue (Continuer), connectez-vous à ChatLab et sélectionnez votre chatbot.
- Finalisez la connexion, ouvrez votre site web publié et envoyez un message de test.
Installation manuelle
Basculez sur Manual Installation et copiez le code du Widget dans l'en-tête de votre site à l'aide d'une extension d'insertion de code. Pour Iframe, utilisez un bloc HTML dans le contenu de la page autorisant le code HTML iframe. Publiez la page et testez le chat. Installez le widget une seule fois, soit via l'extension, soit avec un extrait de code manuel.
Pour plus de détails, consultez Comment ajouter votre chatbot à un site web WordPress.
Ajouter via d'autres plateformes
Pour Shopify, Wix, Webflow, PrestaShop, Abicart et CS-Cart, sélectionnez la plateforme dans le panneau Select Platform. Chaque plateforme présente :
- Le code d'intégration avec les options Widget et Iframe
- Des instructions de collage pas à pas spécifiques à la plateforme
- Un lien View full instructions vers le guide complet de la plateforme
Conformité RGPD
Si vous devez faire en sorte que votre chatbot se charge uniquement après l'obtention du consentement aux cookies, consultez Configurer ChatLab pour la conformité RGPD pour des guides d'intégration couvrant CookieBot, Usercentrics et Google Tag Manager.
Content Security Policy (CSP)
Si votre site web utilise des en-têtes Content Security Policy, vous devez autoriser les domaines ChatLab pour que le chatbot fonctionne. Les directives requises dépendent de l'utilisation du mode Widget ou Iframe.
Mode Widget
Le widget charge un script sur votre page qui crée l'interface de chat. Fusionnez les origines ChatLab suivantes dans vos directives CSP existantes ; ne remplacez pas la politique du reste de votre site web :
script-src https://script.chatlab.com;
style-src https://script.chatlab.com https://fonts.googleapis.com 'unsafe-inline';
connect-src https://api.chatlab.com wss://api.chatlab.com;
font-src https://fonts.gstatic.com;
Par défaut, le widget injecte certains styles en ligne (inline). Votre politique doit également autoriser le script de configuration en ligne, par exemple avec un nonce ou un hash CSP. Autorisez les origines d'images utilisées par votre bot et les cartes de produits dans img-src ; l'audio et d'autres fonctionnalités activées peuvent nécessiter des origines supplémentaires. Pour un domaine d'agence, utilisez les domaines de votre extrait généré.
Mode sécurisé CSP - éviter unsafe-inline
Si la politique de sécurité de votre site web n'autorise pas 'unsafe-inline' dans style-src, vous pouvez activer le CSP Safe Mode. Cela permet de charger la feuille de style du conteneur du widget depuis un fichier CSS externe. Cela n'autorise pas votre script de configuration en ligne et ne garantit pas que chaque style personnalisé ou fonctionnalité activée respecte votre politique.
Pour l'activer, ajoutez window.aichatbotCspSafe = true; avant la balise de script ChatLab :
<script>
window.aichatbotApiKey = "YOUR_API_KEY";
window.aichatbotCspSafe = true;
</script>
<script src="https://script.chatlab.com/aichatbot.js" defer></script>
Une fois le CSP Safe Mode activé, testez une politique de feuille de style sans 'unsafe-inline'. Un point de départ est :
script-src https://script.chatlab.com;
style-src https://script.chatlab.com https://fonts.googleapis.com;
connect-src https://api.chatlab.com wss://api.chatlab.com;
font-src https://fonts.gstatic.com;
Mode Iframe
La page parente doit autoriser l'origine de l'URL copiée de l'iframe. Pour l'hébergement ChatLab standard, ajoutez ceci à la politique existante :
frame-src https://api.chatlab.com;