Comment ajouter un chatbot IA à votre site web (toutes plateformes, étape par étape)

Ajouter un chatbot IA à un site web se fait en deux temps : créer l’assistant, puis le placer sur le site. Avec Nexoply, la première partie se passe dans le tableau de bord Nexoply, sans code et sans clé d’IA, car c’est Nexoply qui fait tourner l’IA. La seconde partie tient en une ligne de code. Il vous faut :

• Un compte Nexoply. Inscrivez-vous gratuitement : l’offre gratuite comprend 50 conversations par mois, sans carte bancaire. Les offres payantes commencent à 19 $ par mois, voir la page des tarifs.
• Un accès à l’endroit où votre site accepte du code personnalisé : un réglage de code de pied de page dans votre créateur de sites, les fichiers de votre thème ou vos templates HTML. Sur les créateurs de sites hébergés, vérifiez que votre forfait autorise le code personnalisé.
• Environ cinq minutes, plus le temps de vérifier les informations sur votre entreprise.

Un chatbot IA pour le site d’une petite entreprise n’est utile que par ce qu’il sait. Dans Nexoply, vous lui donnez vos services et prix, FAQ, politiques, horaires d’ouverture et zones d’intervention. Le plus rapide est l’import du site web : entrez l’adresse de votre site et Nexoply lit vos pages publiques (15 par analyse avec l’offre gratuite, 40 avec Starter, 100 avec Business, 200 avec Pro), y compris les pages construites en JavaScript, puis suggère des services avec leurs prix, des FAQ, des politiques, des horaires et des coordonnées. Vous vérifiez les suggestions ; rien n’est ajouté avant que vous ne l’approuviez.

Dès lors, l’assistant 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 votre tableau de bord pour relecture. Les visiteurs peuvent écrire dans l’une des 12 langues prises en charge et reçoivent des réponses dans la leur. Nexoply 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 peuvent envoyer les visiteurs vers votre page de réservation, votre téléphone ou WhatsApp. Consultez comment fonctionne Nexoply pour avoir une vue d’ensemble.

Ouvrez la page Chatbot de votre tableau de bord (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 ; elle indique seulement au widget à quelle entreprise il appartient. Pour voir l’assistant avant de modifier votre site, cliquez sur Ouvrir une page de test avec votre chatbot.

Sur un site que vous modifiez sous forme de fichiers HTML, collez le code sur une ligne à part, juste au-dessus de la balise de fermeture </body> :

    <!-- …le contenu de votre page… -->
    <script src="https://nexoply.com/widget.js" data-chatbot="YOUR-KEY" async></script>
  </body>
</html>

1. 1

   Trouvez votre pied de page commun

   Si vos pages partagent un template ou un include de pied de page (courant sur les sites PHP et les générateurs de sites statiques), collez-y le code une seule fois. Sinon, collez-le dans chaque page où le bouton de chat doit apparaître.

2. 2

   Collez-le une fois par page

   Un seul exemplaire par page suffit. Le script se charge de manière asynchrone : en le plaçant en fin de page, votre contenu s’affiche en premier.

3. 3

   Mettez en ligne ou déployez

   Enregistrez les fichiers, puis mettez-les en ligne ou déployez-les comme vous mettez habituellement votre site à jour.

Chaque créateur de sites et chaque framework prévoit un endroit pour le code commun à tout le site. Collez-y la même ligne ; les guides par plateforme détaillent chaque cas étape par étape.

• Aucun paquet npm nécessaire. Le widget est toujours la même balise script. Il fonctionne aussi lorsque la balise est ajoutée depuis le code, à condition qu’elle conserve l’attribut data-chatbot et un src contenant widget.js.
• Applications monopages. Il se monte une seule fois sur la page, en dehors de l’élément racine de votre application, conserve la conversation pendant la navigation et revérifie les règles par page quand l’URL change. Le charger deux fois est sans conséquence.
• Rendu côté serveur. Il ne s’exécute que dans le navigateur et ne touche pas au balisage de votre framework : aucun problème d’hydratation.
• Content-Security-Policy. Si votre site en envoie une, autorisez https://nexoply.com dans script-src, connect-src et img-src.
• Tests en local. Si vous remplissez Autoriser uniquement sur ces sites web, ajoutez votre hôte de développement local avec son port (par exemple localhost:3000), ou laissez la liste vide pendant vos tests.

Ouvrez votre site en ligne dans une nouvelle fenêtre de navigation privée. Un bouton de chat apparaît dans le coin inférieur. Posez une vraie question, comme « Intervenez-vous en urgence le week-end ? » ou « Quelles zones couvrez-vous ? » (d’autres exemples dans le guide du chatbot IA pour plombiers). 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 votre site en une minute environ, sans modifier à nouveau le code.

• Code pas encore en ligne. Vérifiez que la modification est enregistrée et publiée ou déployée, puis rechargez le site en ligne dans une fenêtre de navigation privée. Les aperçus des éditeurs de sites n’exécutent pas toujours le code personnalisé.
• Code modifié ou incomplet. Vérifiez que la ligne est complète, de <script à </script>, avec data-chatbot et votre clé inchangés.
• Code personnalisé non autorisé. Sur les créateurs de sites hébergés, le code personnalisé peut dépendre de votre forfait (par exemple, Wix exige un forfait premium avec un domaine connecté, et Squarespace le forfait Business ou supérieur).
• Domaines autorisés. Si vous avez rempli Autoriser uniquement sur ces sites web sur la page Chatbot, vérifiez que chaque adresse de votre site y figure exactement (par exemple monentreprise.com, ou *.monentreprise.com pour les sous-domaines).
• Content-Security-Policy. Une politique stricte bloque le script tant que https://nexoply.com n’est pas autorisé 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, jamais dans le code de votre site. Sous Chatbot → Personnaliser, vous pouvez choisir l’icône du bouton de message (ou votre propre image ou SVG), 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 modifier ou masquer le bouton sur certaines pages (par exemple /services/*). Accordez la fenêtre de chat à vos polices et couleurs, ajoutez votre 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. Le widget utilise un Shadow DOM : le CSS de votre site ne l’affecte pas.

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, et les statistiques montrent les sujets, les heures les plus chargées et les pages où le chat a été ouvert. Pour la liste complète des options, consultez les fonctionnalités du chatbot ; pour comparer les outils d’abord, lisez les meilleurs chatbots IA pour les petites entreprises.