Intégrez le chat IA sur votre site web
Ajoutez un chatbot IA intelligent à n'importe quel site web en quelques minutes. Copiez une seule ligne de code, collez-la, et regardez votre site web prendre vie avec une assistance client intelligente 24h/24 et 7j/7. Aucune compétence en programmation requise.
Qu'est-ce que l'intégration de widget ?
Imaginez que vous placez un assistant intelligent sur votre site web. Lorsque des visiteurs arrivent sur votre site, ils voient un bouton de chat convivial. Ils cliquent dessus et, instantanément, ils discutent avec votre chatbot IA qui sait tout sur votre entreprise. Découvrez des cas d'usage concrets dans tous les secteurs ou commencez gratuitement.
Vous créez un chatbot
Créez un assistant IA qui connaît vos produits, vos services et votre FAQ. Cela prend environ 5 minutes.
Copiez le code d'intégration
Nous vous fournissons une seule ligne de code simple. Elle ressemble à ceci : <script src="...">
Collez-la sur votre site web
Ajoutez ce code dans le code HTML de votre site web. Le widget de chat apparaît instantanément. Vos visiteurs peuvent désormais discuter avec votre IA !
Aucune compétence technique requise
Si vous savez copier-coller du texte, vous savez intégrer notre widget de chat. Nous l'avons conçu pour que tout le monde — même les débutants complets — puisse ajouter un chat IA à son site web. La plupart des gens terminent en moins de 10 minutes.
4 façons d'afficher votre widget de chat
Choisissez comment le chat apparaît sur votre site web. Chaque style convient le mieux à différentes situations — choisissez celui qui correspond au design de votre site.
Mode bulle
Un bouton de chat flottant dans le coin de votre page. Cliquez dessus et la fenêtre de chat s'ouvre. C'est le style classique que l'on voit sur la plupart des sites web — familier et facile à utiliser.
Mode barre latérale
Le chat apparaît sur le côté sous forme de panneau. Idéal pour les sites web où les clients ont besoin de discuter tout en naviguant. Le chat reste visible à côté de votre contenu.
Mode push
Comme la barre latérale, mais il décale réellement le contenu de votre site web pour faire de la place. Rien n'est masqué — votre page s'ajuste pour afficher le chat et le contenu côte à côte.
Mode tiroir
Le chat apparaît depuis le bas comme un tiroir. Parfait pour les sites web mobiles où l'espace à l'écran est précieux. Naturel sur les téléphones et les tablettes.
Comment intégrer votre widget de chat (5 minutes)
Suivez ces étapes simples pour ajouter un chat IA à votre site web. Aucune expérience en programmation nécessaire — si vous savez copier-coller, vous pouvez le faire !
Créez votre chatbot IA
Tout d'abord, il vous faut un chatbot à intégrer. Utilisez notre assistant simple pour en créer un — donnez-lui simplement un nom, ajoutez l'URL de votre site web (afin qu'il découvre votre entreprise) et choisissez un modèle de personnalité. L'ensemble du processus prend environ 5 minutes.
Astuce : Conseil de pro : ajoutez votre sitemap.xml pour une couverture complète de toutes vos pages. Votre chatbot apprendra automatiquement à partir de tout le contenu de votre site.
Ouvrez le configurateur de widget
Une fois votre chatbot créé, accédez à sa page et cliquez sur le bouton « Widget ». Cela ouvre notre configurateur visuel où vous pouvez voir exactement à quoi ressemblera votre chat sur votre site web — en temps réel !
Astuce : Le configurateur affiche un aperçu en direct sur le côté droit. Chaque modification que vous apportez apparaît instantanément, ce qui vous permet d'expérimenter librement.
Choisissez votre mode d'affichage
Choisissez comment vous souhaitez que le chat apparaisse sur votre site web. Le mode bulle affiche un bouton flottant (le plus populaire). La barre latérale apparaît sur le côté. Le mode push décale votre contenu pour faire de la place. Le tiroir apparaît depuis le bas (idéal pour le mobile).
Display Modes:
• Bubble - Floating chat button in corner
• Sidebar - Slide-in panel from left/right
• Push - Pushes your page content aside
• Drawer - Pulls up from the bottomAstuce : Vous ne savez pas lequel choisir ? Commencez par le mode bulle — c'est le format le plus familier pour les visiteurs et il fonctionne parfaitement sur ordinateur comme sur mobile.
Personnalisez l'apparence
Adaptez le chat à votre marque ! Choisissez votre couleur de marque (utilisée pour le bouton et les accents), choisissez la position (en bas à droite est la plus courante) et ajustez la largeur de la barre latérale si vous utilisez les modes correspondants.
Astuce : Vous voulez encore plus de personnalisation ? Créez un thème de chat pour ajouter des fenêtres modales d'accueil, des suggestions de démarrage, des motifs d'arrière-plan et bien plus. Les thèmes peuvent être réutilisés sur plusieurs chatbots.
Obtenez votre code d'intégration
Cliquez sur le bouton « Obtenir le code d'intégration ». Vous verrez une balise de script simple qui ressemble à peu près à ceci. Il vous suffit de la copier dans votre presse-papiers.
<script>
window.gnosariConfig = {
agentUri: 'your-agent-uri',
apiUrl: 'https://gnosari.com',
displayMode: 'bubble',
position: 'bottom-right'
};
</script>
<script src="https://gnosari.com/widget.js"></script>Astuce : Le code d'intégration inclut tous vos paramètres de personnalisation. Si vous modifiez les paramètres ultérieurement, vous devrez mettre à jour le code sur votre site web.
Collez-le sur votre site web
Ajoutez le code d'intégration à votre site web. Collez-le juste avant la balise de fermeture </body>. Pour WordPress, utilisez une extension comme « Insert Headers and Footers » ou ajoutez-le dans le personnalisateur de votre thème. Pour Shopify, ajoutez-le dans theme.liquid. Pour Wix, utilisez l'élément Embed HTML.
<!DOCTYPE html>
<html>
<head>...</head>
<body>
<!-- Your website content -->
<!-- Paste embed code here -->
<script>window.gnosariConfig = {...};</script>
<script src="https://gnosari.com/widget.js"></script>
</body>
</html>Astuce : Terminé ! Actualisez votre site web et vous verrez le widget de chat. Cliquez dessus pour tester — votre chatbot IA est désormais en ligne et prêt à aider vos visiteurs 24h/24 et 7j/7 !
Créez des thèmes de chat réutilisables
Concevez l'apparence de votre chat une seule fois, puis appliquez-la à tous vos chatbots. Les thèmes de chat vous permettent de personnaliser les couleurs, les messages de bienvenue, les suggestions de conversation et bien plus encore — le tout au même endroit.
Thèmes de couleurs
Choisissez parmi plus de 10 magnifiques palettes de couleurs ou créez vos propres couleurs de marque.
Expérience d'accueil
Configurez des fenêtres modales d'accueil, des messages de bienvenue et des expériences pour les nouveaux visiteurs.
Suggestions de conversation
Ajoutez des suggestions de démarrage et des propositions de suivi pour guider les conversations.
Motifs d'arrière-plan
Ajoutez des motifs subtils, comme WhatsApp, pour rendre votre chat unique et à votre image.
Thème Support client
Violet + fenêtre modale d'accueil
Thème Assistant commercial
Vert + suggestions de démarrage
Thème Centre d'apprentissage
Bleu + motif d'arrière-plan
Comment créer un thème de chat
Concevez de belles expériences de chat à votre image en quelques clics. Visualisez les changements instantanément grâce à notre aperçu en direct.
Accédez aux thèmes de chat
Accédez aux thèmes de chat dans la barre latérale de votre tableau de bord. Cliquez sur « Créer un thème » pour commencer à concevoir votre expérience de chat personnalisée.
Astuce : Les thèmes sont réutilisables — créez-en un une fois et appliquez-le à plusieurs chatbots. Parfait si vous avez plusieurs chatbots qui doivent tous avoir la même apparence.
Choisissez votre palette de couleurs
Choisissez un thème de couleurs qui correspond à votre marque. Nous proposons plus de 10 magnifiques palettes prédéfinies, ou vous pouvez créer une couleur personnalisée. La couleur affecte les boutons, les liens, les accents et les dégradés dans tout le chat.
Astuce : Visualisez votre couleur appliquée instantanément dans l'aperçu en direct sur le côté droit de l'écran !
Concevez l'expérience d'accueil
Configurez ce que voient les visiteurs lorsqu'ils ouvrent le chat pour la première fois. Ajoutez une fenêtre modale d'accueil avec un titre et un appel à l'action, définissez un message de bienvenue de l'IA et personnalisez l'état vide avant l'envoi de tout message.
Welcome Options:
• Welcome Modal - Attention-grabbing intro
• Typewriter Effect - Animated headline
• Greeting Message - AI says hello first
• Empty State - Title and descriptionAstuce : Les fenêtres modales d'accueil sont idéales pour expliquer ce que votre chatbot peut faire. La première impression compte !
Ajoutez des suggestions de conversation
Aidez les visiteurs à démarrer des conversations grâce à des suggestions. Ce sont des questions cliquables qui apparaissent dans le chat — les visiteurs cliquent sur l'une d'elles et l'IA répond immédiatement. Idéal pour mettre en valeur ce que votre chatbot peut faire.
Astuce : Ajoutez 3 à 4 suggestions de démarrage couvrant vos questions les plus fréquentes. Cela aide les visiteurs qui ne savent pas quoi demander.
Ajoutez un motif d'arrière-plan (facultatif)
Rendez votre chat unique avec un motif d'arrière-plan subtil — comme les arrière-plans de chat de WhatsApp. Choisissez parmi des points, des vagues, une grille ou d'autres motifs. Ajustez l'intensité pour le garder subtil.
Astuce : Les motifs ajoutent de la personnalité, mais gardez-les subtils — vous ne voulez pas qu'ils détournent l'attention de la conversation.
Enregistrez et appliquez
Donnez un nom et une description à votre thème, puis cliquez sur Créer un thème. Vous pouvez désormais appliquer ce thème à n'importe lequel de vos chatbots. Lorsque vous mettez à jour le thème, tous les chatbots qui l'utilisent se mettent à jour automatiquement !
Astuce : Créez des thèmes à des fins différentes : « Support client » avec une fenêtre modale d'accueil, « Assistant commercial » avec des suggestions de produits, etc.
Tout ce qu'il vous faut pour une intégration parfaite
Notre système de widget est conçu pour fonctionner de manière fluide sur n'importe quel site web tout en vous donnant un contrôle total sur l'apparence et le comportement.
Code d'intégration en une ligne
Il suffit de copier-coller une seule balise de script. Aucun paquet npm, aucune étape de compilation, aucune configuration complexe. Fonctionne sur tout site web prenant en charge JavaScript.
4 modes d'affichage
Bulle (bouton flottant), barre latérale (panneau coulissant), push (décale le contenu) et tiroir (feuille du bas). Chaque mode est entièrement adaptatif et optimisé pour le tactile.
Personnalisation complète de la marque
Adaptez parfaitement le chat à votre site web grâce à des couleurs, un positionnement et un dimensionnement personnalisés. Créez des thèmes réutilisables pour une image de marque cohérente sur tous vos chatbots.
Aperçu en direct
Visualisez exactement à quoi ressemblera votre chat au fur et à mesure que vous le configurez. Chaque modification apparaît instantanément dans l'aperçu — sans deviner, sans surprise.
Léger et rapide
Script de moins de 50 Ko. Se charge de manière asynchrone afin de ne jamais ralentir votre site web. Diffusion via un CDN mondial pour un chargement rapide partout dans le monde.
Contrôles de confidentialité
Contrôlez qui peut accéder à votre chatbot. Définissez-le comme public, protégé par mot de passe ou privé. Conforme au RGPD avec des paramètres de collecte de données facultatifs.
Fonctionne sur toutes les plateformes de site web
Que vous ayez créé votre site avec WordPress, Shopify, Wix ou du code personnalisé — notre intégration fonctionne partout.
WordPress
Shopify
Wix
Webflow
Squarespace
HTML/JS
Vous ne voyez pas votre plateforme ? Pas d'inquiétude — notre intégration fonctionne sur tout site web prenant en charge JavaScript.
Consultez le guide d'intégration completFAQ sur l'intégration
Questions fréquentes sur l'intégration de votre chat IA sur n'importe quel site web.
Vous avez encore des questions ?
Notre équipe est là pour vous aider à démarrer.
Créez votre chatbot à l'aide de notre assistant (5 minutes), ouvrez le configurateur de widget, choisissez votre mode d'affichage et vos couleurs, cliquez sur « Obtenir le code d'intégration », puis collez la balise de script dans le code HTML de votre site web avant la balise de fermeture body.
Prêt à intégrer le chat IA sur votre site web ?
Créez votre chatbot, personnalisez le design et mettez-le en ligne en quelques minutes. Vos visiteurs vous remercieront pour ces réponses instantanées et utiles.
Utilisez Gnosari pour propulser votre assistance client