Comment ajouter un chatbot IA à Webflow (en 5 minutes)

Nexoply est un assistant IA que vous créez dans son propre tableau de bord et que vous ajoutez à un site Webflow avec une balise script. Webflow ne contient que cette ligne ; les connaissances, l’apparence et le comportement de l’assistant se gèrent dans Nexoply, sans code et sans clé d’IA, car c’est Nexoply qui fait tourner l’IA. Concrètement :

• Il connaît l’entreprise. Ajoutez les services et prix, FAQ, politiques, horaires d’ouverture et zones d’intervention, ou importez-les depuis les pages publiques du site Webflow (15 par analyse avec l’offre gratuite). Rien n’est ajouté avant que vous ne l’approuviez.
• Il répond uniquement à partir de ces informations. Il a pour consigne de dire quand il ne sait pas au lieu de deviner, et chaque conversation est disponible dans le tableau de bord pour relecture.
• Il s’intègre au design. Bouton de message ou onglet latéral, couleurs, polices et logo, modèles prêts à l’emploi, apparence distincte sur mobile, règles par page pour certaines pages, et boutons d’écran d’accueil comme Réserver, Appeler ou WhatsApp.
• Il répond en 12 langues. Les visiteurs qui écrivent dans une autre langue prise en charge reçoivent des réponses dans cette langue.
• Ce qu’il n’est pas. Ce n’est pas une messagerie de chat en direct pour des agents humains, et il ne prend lui-même ni réservations ni paiements ; ses boutons envoient les visiteurs vers une page de réservation, un téléphone ou WhatsApp.

L’offre gratuite comprend 50 conversations par mois ; les offres payantes commencent à 19 $ par mois, voir la page des tarifs. Vous créez des sites Webflow pour des clients ? Chaque entreprise a son propre compte Nexoply et un seul chatbot : configurez-le donc avec les informations de votre client. Pour la liste complète des options, consultez les fonctionnalités du chatbot.

Vérifiez d’abord ces trois points :

• Un compte Nexoply. Inscrivez-vous gratuitement : l’offre gratuite comprend 50 conversations par mois, sans carte bancaire.
• Les informations sur l’entreprise dans Nexoply : services et prix, FAQ, politiques, horaires d’ouverture et zones d’intervention. Le plus rapide est d’entrer l’adresse du site Webflow et de laisser Nexoply importer ses pages publiques, y compris celles construites en JavaScript. Vous vérifiez les suggestions ; rien n’est ajouté avant que vous ne l’approuviez.
• Un accès aux réglages du projet Webflow, et un forfait qui autorise le code personnalisé. Si les réglages Custom code ne vous sont pas accessibles, vérifiez votre forfait ou demandez au propriétaire du site.

Dans votre tableau de bord Nexoply, ouvrez la page Chatbot (cliquez sur Créer le chatbot si ce n’est pas encore fait) et copiez le code d’installation. Il ressemble à ceci :

<script src="https://nexoply.com/widget.js" data-chatbot="YOUR-KEY" async></script>

YOUR-KEY est remplacé par la clé de votre chatbot, que la page Chatbot renseigne pour vous. Cette clé est publique : ce n’est pas un mot de passe et elle ne donne aucun accès à votre compte. Vous voulez voir l’assistant avant de toucher à Webflow ? Cliquez sur Ouvrir une page de test avec votre chatbot pour l’essayer sur une page d’exemple.

1. 1

   Ouvrez Project settings

   Dans Webflow, ouvrez les Project settings du projet.

2. 2

   Allez dans Custom code

   Ouvrez la section Custom code. Le code placé ici est commun à tout le site : il s’exécute sur chaque page du projet.

3. 3

   Collez-le dans Footer code

   Collez votre code Nexoply dans Footer code. Le Footer code est placé juste avant la fin de chaque page, là où le script doit se trouver.

4. 4

   Enregistrez

   Enregistrez les modifications dans Project settings.

5. 5

   Publiez

   Publiez le site. Le code personnalisé n’est ajouté qu’au site publié : c’est donc cette étape qui fait apparaître le bouton de chat.

Ouvrez le site publié dans une nouvelle fenêtre de navigation privée, pour le voir comme un visiteur. Un bouton de chat apparaît dans le coin inférieur. Posez une vraie question, comme « Acceptez-vous de nouveaux patients ? » ou « Que dois-je apporter à mon premier rendez-vous ? » (d’autres exemples dans le guide du chatbot IA pour cliniques). En quelques secondes, la conversation apparaît sous Conversations dans votre tableau de bord Nexoply. Ensuite, les modifications faites dans le tableau de bord arrivent sur le site en une minute environ, sans avoir à republier dans Webflow.

• Site non publié. Enregistrer les Project settings ne suffit pas : publiez le site, puis rechargez-le.
• Vérification dans le Designer. Vérifiez le site publié dans une fenêtre de navigation privée, pas dans le Designer.
• Mauvais champ ou code incomplet. Rouvrez Custom code et vérifiez que le code se trouve dans Footer code, complet et inchangé, de <script à </script>.
• Forfait ou droits. Si vous ne pouvez pas enregistrer de code personnalisé, vérifiez que votre forfait Webflow l’autorise, ou que votre rôle dans le projet vous permet de modifier les Project settings.
• Domaines autorisés. Si vous avez rempli Autoriser uniquement sur ces sites web sur la page Chatbot, indiquez chaque adresse sur laquelle le site est publié (par exemple maclinique.com, ou *.maclinique.com pour les sous-domaines).
• Content-Security-Policy. Si le site envoie une Content-Security-Policy, autorisez https://nexoply.com dans script-src, connect-src et img-src.
• Chatbot désactivé ou bloqueurs de publicité. Vérifiez que l’interrupteur Chatbot activé est allumé. Plus rarement, une extension de navigateur bloque les widgets de chat ; essayez un autre navigateur.

Le design se règle dans votre tableau de bord Nexoply, pas dans Webflow. Sous Chatbot → Personnaliser, vous pouvez choisir l’icône du bouton de message (votre propre image ou un code SVG collé), son texte, sa forme, sa taille, ses couleurs, sa bordure, son ombre et sa position, ou utiliser à la place un onglet latéral au bord de l’écran (par exemple « Aide »). Vous pouvez définir une apparence différente sur mobile et utiliser des règles par page pour la modifier sur certaines pages (par exemple /services/*). Accordez la fenêtre de chat aux polices et couleurs du site, ajoutez un logo ou partez d’un modèle prêt à l’emploi. Un écran d’accueil peut afficher vos propres boutons, comme Réserver, Appeler ou WhatsApp.

Pour ouvrir le chat depuis l’un de vos propres boutons Webflow, un court script peut appeler window.dispatchEvent(new Event("nexoply:open-chat")) ; pour l’ouvrir dès le chargement de la page, ajoutez data-open="true" à la balise script. Relisez ensuite régulièrement les conversations : les questions auxquelles l’assistant n’a pas pu répondre sont listées et peuvent devenir des FAQ en un clic. Lisez comment fonctionne Nexoply pour avoir une vue d’ensemble, ou consultez comment ajouter un chatbot IA à n’importe quel site web pour les autres plateformes.