Ajouter un chatbot ChatLab à votre site Webflow permet aux visiteurs d'interagir avec votre assistant IA directement sur votre site. Ce guide présente les étapes pour récupérer votre code d'intégration depuis ChatLab et le coller dans Webflow.
Avant de commencer
Avant de commencer, créez votre chatbot et vérifiez que votre site ou espace de travail Webflow inclut l'accès au code personnalisé. Consultez les exigences relatives au code personnalisé de Webflow. Vous devez également disposer de l'autorisation de modifier et de publier le site web.
Étape 1 - Copier le code d'intégration depuis ChatLab
- Connectez-vous à ChatLab et sélectionnez le chatbot que vous souhaitez intégrer
- Cliquez sur l'onglet Deploy (Déployer), puis sélectionnez Webflow dans le panneau des plateformes à droite
- Choisissez Widget pour l'installation dans l'en-tête ci-dessous. Pour un chat toujours visible, choisissez Iframe et suivez les instructions relatives aux iframes plus bas. Consultez Quelle est la différence entre widget et iframe ? pour une comparaison
- Cliquez sur Copy to clipboard (Copier dans le presse-papiers)
Étape 2 - Ajouter le code à Webflow
Ajouter le code dans les paramètres du site (Site Settings) place le chatbot sur toutes les pages de votre site Webflow.
- Ouvrez votre projet dans le tableau de bord de Webflow (Webflow Dashboard)
- Rendez-vous dans Site settings > Custom code
- Collez le code copié dans la section Head Code (Code de l'en-tête)
- Cliquez sur Save Changes (Enregistrer les modifications)
- Cliquez sur Publish pour publier votre site afin que les modifications prennent effet
Ajouter à une seule page
Si vous souhaitez afficher le chatbot sur une page spécifique plutôt que sur l'ensemble du site :
- Ouvrez la page dans le Webflow Designer
- Cliquez sur l'icône d'engrenage pour ouvrir les paramètres de la page (Page Settings)
- Faites défiler jusqu'à la section Custom Code
- Collez le code dans le champ Head Code
- Enregistrez et publiez votre site
Ajouter un iframe toujours visible
Dans le Webflow Designer, placez un élément Code Embed (Intégration de code) à l'endroit où vous souhaitez intégrer le chatbot, collez l'extrait Iframe fourni par ChatLab, puis définissez sa largeur et sa hauteur selon votre mise en page. Enregistrez et publiez le site. L'iframe doit être placé dans le contenu de la page, et non dans le Head Code.
Vérifier l'installation
Après la publication, ouvrez votre site Webflow dans un navigateur. Vous devriez voir l'icône de chat apparaître dans le coin de la page (pour le mode widget) ou la fenêtre de chat intégrée directement sur la page (pour le mode iframe). Cliquez sur l'icône pour ouvrir le chat et envoyez un message de test pour confirmer que tout fonctionne correctement.