Le chatbot Netcoder est un widget léger qui s'ajoute à n'importe quel site Web avec une seule balise HTML. Il place un bouton de clavardage flottant dans le coin de vos pages ; vos visiteurs cliquent dessus pour parler à votre agent IA. Tout le traitement se fait sur les serveurs de Netcoder : vous n'intégrez que le script, et il fonctionne sur n'importe quel domaine.
1. Installation
Ajoutez la balise de script suivante juste avant la balise </body> de chaque page où
le chatbot doit paraître. Remplacez les valeurs d'exemple par celles de votre compte (voir la
section 3).
<script src="https://cdn.netcoder.com/chatbot.v2.2.js"
data-backend-url="wss://relay.netcoder.ca/chatbot"
data-client-key="YOUR-CLIENT-GUID"
data-agent-key="YOUR-AGENT-GUID"
data-language="fr"></script>C'est tout. Le bouton, la fenêtre de clavardage, le style et la conversation sont fournis par le script ; rien d'autre n'est à installer sur votre serveur.
Le plus simple est de le prendre dans l'application Netcoder : ouvrez votre agent IA, puis Tester et déployer, Code d'intégration. Le code y est donné avec vos clés, prêt à copier.
2. Paramètres
À placer sur la balise de script.
| Attribut | Obligatoire | Description | Par défaut |
|---|---|---|---|
data-backend-url | Oui | Adresse du relais Netcoder : wss://relay.netcoder.ca/chatbot | |
data-client-key | Oui | Votre clé client | |
data-agent-key | Oui | La clé de votre agent IA | |
data-language | en, fr ou es | en | |
data-title | Titre de la fenêtre de clavardage | Assistant Netcoder | |
data-accent-color | Couleur principale | #D97955 | |
data-accent-text-color | Couleur du texte sur la couleur principale | #FFFFFF | |
data-welcome | Message d'accueil | Celui de la langue |
3. Obtenir vos clés
La clé client et la clé de l'agent sont des GUID qui identifient votre compte et l'agent IA qui
répond, par exemple 3f2a7b10-9c4d-4e21-8a6f-1b2c3d4e5f60. Les deux sont dans
l'application Netcoder, sur la page de votre agent IA, sous Tester et déployer,
Code d'intégration, chacune avec un bouton pour la copier.
Si une clé manque ou est mal formée, le widget affiche une erreur de configuration et ne contacte pas le serveur. Si les clés sont valides mais inconnues, l'assistant répond « Invalid ai agent configuration » : vérifiez les valeurs dans l'application.
4. Langue
L'attribut data-language fixe le message d'accueil, le texte indicatif du champ de saisie
et la langue dans laquelle l'agent IA répond :
en— anglais (par défaut).fr— français.es— espagnol.
Sans l'attribut, ou avec une autre valeur, le widget est en anglais. Sur un site multilingue, donnez à
chaque page sa langue : data-language="fr" sur vos pages françaises et
data-language="en" sur vos pages anglaises.
5. Image de marque
Agencez le widget à votre marque avec le titre et les deux attributs de couleur :
data-title— le titre de l'en-tête.data-accent-color— la couleur principale de votre marque.data-accent-text-color— la couleur du texte et des icônes posés sur la couleur principale.
Exemple, un assistant bleu nommé « Soutien Acme » :
<script src="https://cdn.netcoder.com/chatbot.v2.2.js"
data-backend-url="wss://relay.netcoder.ca/chatbot"
data-client-key="YOUR-CLIENT-GUID"
data-agent-key="YOUR-AGENT-GUID"
data-language="fr"
data-title="Soutien Acme"
data-accent-color="#0057B8"
data-accent-text-color="#FFFFFF"></script>6. Personnaliser en CSS
Au-delà du titre et des deux couleurs, personnalisez le widget depuis votre propre feuille de style. Ses styles se chargent après les vôtres : commencez vos sélecteurs par body pour l'emporter, plutôt que d'utiliser !important.
body #nc-chat-button { right: 32px; bottom: 96px; }| Sélecteur | Ce que c'est |
|---|---|
--nc-accent | Variable : la couleur principale, de data-accent-color |
--nc-on-accent | Variable : le texte posé dessus, de data-accent-text-color |
#nc-chat-button | Le bouton flottant, 60 × 60 px |
#nc-chat-window | La fenêtre, 340 × 480 px ; nc-open une fois ouverte |
#nc-chat-header | La barre d'en-tête |
#nc-chat-messages | Les messages ; .nc-msg avec .nc-user ou .nc-bot |
#nc-chat-form | Le champ de saisie et le bouton d'envoi |
Un texte blanc sur #D97955, la couleur par défaut, est sous le contraste WCAG AA de 4,5:1 : foncez la couleur, ou prenez un texte foncé comme #1B1B1B.
7. Comment ça fonctionne
Quand un visiteur envoie un message, le widget l'envoie par une connexion WebSocket au relais Netcoder. Le relais le transmet à votre agent IA et renvoie la réponse sur la même connexion dès qu'elle est prête, habituellement en quelques secondes. La conversation est suivie par un identifiant du visiteur gardé dans un témoin (cookie) : le contexte est conservé d'un message à l'autre pendant la visite.
Une réponse n'a pas de limite de temps : le widget garde sa connexion ouverte et reçoit la réponse dès qu'elle arrive. Si la connexion tombe, il se reconnecte seul, à intervalles croissants, et ce qui a été tapé entre-temps est envoyé dès son retour. Les erreurs — un relais injoignable, une demande refusée — s'affichent dans une bulle rouge, pour qu'on ne les prenne jamais pour une réponse.
8. Essais et dépannage
- Essayez avant d'installer — dans l'application Netcoder, Tester et déployer, sur la page de votre agent IA, ouvre le chatbot tel que vos visiteurs le verront.
- Videz le cache — après un changement du code, rechargez la page sans cache (Ctrl+Maj+R) pour que le navigateur prenne la nouvelle configuration.
- « Invalid ai agent configuration » — la clé client ou la clé de l'agent est encore celle de l'exemple, ou n'est pas reconnue. Copiez les clés depuis l'application.
- Une bulle d'erreur rouge — l'assistant n'a pas pu être joint, ou la connexion est tombée avant la réponse. Vérifiez les clés et l'adresse WebSocket, puis réessayez.
- Rien ne se passe sur une page https:// — l'adresse doit commencer par
wss://et nonws://: les navigateurs bloquent un WebSocket non sécurisé sur une page sécurisée. - Tous les domaines fonctionnent — le chatbot s'installe sur n'importe quel site Web ; rien n'est à configurer sur votre serveur.
9. Exemple complet
Un chatbot avec toutes ses options :
<script src="https://cdn.netcoder.com/chatbot.v2.2.js"
data-backend-url="wss://relay.netcoder.ca/chatbot"
data-client-key="3f2a7b10-9c4d-4e21-8a6f-1b2c3d4e5f60"
data-agent-key="a1b2c3d4-e5f6-4788-9a0b-1c2d3e4f5a6b"
data-language="fr"
data-title="Assistant Netcoder"
data-accent-color="#D97955"
data-accent-text-color="#FFFFFF"
data-welcome="Bonjour! Comment puis-je vous aider aujourd'hui?"></script>Besoin d'aide, ou d'un agent IA bien à vous ? Prenez rendez-vous ou écrivez-nous.