Intégrez le chat IA sur votre site web

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.

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.

1. 1

   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.
2. 2

   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.
3. 3

   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).

   Astuce : 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.
4. 4

   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.
5. 5

   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.

   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.

   HTMLCopier

   <script>
     window.gnosariConfig = { agentUri: 'your-agent-uri' };
   </script>
   <script src="https://app.gnosari.com/gnosari-chat-widget-advanced.js"></script>

6. 6

   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.

   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 !

• WordPressApparence, puis Éditeur de fichiers du thème, puis footer.php, juste au-dessus de la balise body fermante. Sur un thème en blocs, un bloc HTML personnalisé dans le modèle de pied de page fait la même chose sans PHP.Lire le guide
• ShopifyBoutique en ligne, puis Thèmes, puis Modifier le code, puis theme.liquid. Collez avant la balise body fermante pour que le widget se charge aussi bien sur les pages produit, collection et panier.Lire le guide
• WixParamètres, puis Code personnalisé, puis Ajouter du code personnalisé. Choisissez « Body - fin » et appliquez à toutes les pages.
• WebflowParamètres du projet, puis Code personnalisé, puis Code de pied de page. Publiez le site pour que la modification soit en ligne.
• SquarespaceParamètres, puis Avancé, puis Injection de code. Collez dans le champ Pied de page, qui s'applique à tout le site.
• HTML / JSCollez-le juste avant la balise body fermante de votre modèle ou de votre fichier de mise en page, pour qu'il se charge sur toutes les pages qui l'incluent.

• Mode bulleUn 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éraleLe 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 pushComme 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 tiroirLe 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.

• Thèmes de couleursChoisissez parmi plus de 10 magnifiques palettes de couleurs ou créez vos propres couleurs de marque.
• Expérience d'accueilConfigurez des fenêtres modales d'accueil, des messages de bienvenue et des expériences pour les nouveaux visiteurs.
• Suggestions de conversationAjoutez des suggestions de démarrage et des propositions de suivi pour guider les conversations.
• Motifs d'arrière-planAjoutez des motifs subtils, comme WhatsApp, pour rendre votre chat unique et à votre image.

1. 1

   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.

2. 2

   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 !

3. 3

   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.

   Astuce : Les fenêtres modales d'accueil sont idéales pour expliquer ce que votre chatbot peut faire. La première impression compte !

4. 4

   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.

5. 5

   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.

6. 6

   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.

• Code d'intégration en une ligneIl 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'affichageBulle (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 marqueAdaptez 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 directVisualisez 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 rapideScript 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.

• Chatbot IA pour votre site webAjoutez un support client intelligent 24/7 à votre site web en quelques minutes. Répondez automatiquement aux questions des visiteurs, générez davantage de prospects par la conversation et réduisez vos coûts de support grâce à l'IA.Lire le guide
• Chatbot IA WordPressAjoutez un chat IA à WordPress en 60 secondes. Aucun plugin nécessaire - il suffit de copier-coller un seul code d'intégration. Compatible avec WooCommerce, Elementor, Divi et tous les thèmes.Lire le guide
• Cas d'usage des chatbots IA - Plus de 100 exemples et solutions par secteurExplorez plus de 100 cas d'usage de chatbots IA dans le support client, l'e-commerce, la santé, l'immobilier et plus de 12 autres secteurs. Trouvez votre solution IA dès aujourd'hui.Lire le guide