Installer le chatbot IA Rekruti sur votre site Web

1. Installation

Ajoutez la balise de script suivante juste avant la balise </body> de chaque page où le chatbot doit paraître.

<script src="https://cdn.rekruti.com/chatbot.v2.2.js"
        data-backend-url="wss://relay.rekruti.com/chatbot"
        data-client-key="VOTRE-CLE-CLIENT"
        data-agent-key="VOTRE-CLE-DE-CANAL-CHATBOT"
        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.

Vous n’avez pas à monter ce code vous-même : Rekruti met en place votre agent et son chatbot, et vous remet le code d’intégration avec vos clés déjà inscrites, prêt à coller.

2. Paramètres

À placer sur la balise de script.

3. Vos clés

Deux clés indiquent au relais qui répond :

• data-client-key — la clé de votre compte Rekruti, un GUID comme 3f2a7b10-9c4d-4e21-8a6f-1b2c3d4e5f60. C’est la même dans tous les widgets que vous installez.
• data-agent-key — la clé du canal chatbot de votre agent. Chaque canal d’un agent a sa propre clé : le chatbot, l’agent vocal et le formulaire de candidature d’un même agent ont chacun la leur, et une clé prise dans un widget ne fonctionne pas dans un autre.

Les deux viennent avec le code d’intégration que Rekruti vous remet ; vous n’avez rien à chercher. 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 ne sont pas reconnues, l’assistant répond « Invalid ai agent configuration » : vérifiez que le code de votre page est exactement celui que Rekruti vous a fourni.

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 bilingue, 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é « Placement Acme » :

<script src="https://cdn.rekruti.com/chatbot.v2.2.js"
        data-backend-url="wss://relay.rekruti.com/chatbot"
        data-client-key="VOTRE-CLE-CLIENT"
        data-agent-key="VOTRE-CLE-DE-CANAL-CHATBOT"
        data-language="fr"
        data-title="Placement 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; }

Le texte sur la couleur principale doit rester lisible : par défaut, le blanc sur #0c70a1 atteint le contraste WCAG AA de 4,5:1. Avec une couleur pâle à vous, 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 Rekruti. 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 — demandez à Rekruti d’essayer le chatbot avec vous avant qu’il aille sur votre site : vous le voyez 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 » — une clé est encore celle de l’exemple, ou n’est pas reconnue. Collez le code tel que Rekruti vous l’a remis.
• 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 non ws:// : les navigateurs bloquent un WebSocket non sécurisé sur une page sécurisée.
• Pas sur ce site — vos widgets ne fonctionnent que sur les sites Web que Rekruti a ajoutés à votre compte. Voir Sites Web de vos widgets.

9. Exemple complet

Un chatbot avec toutes ses options :

<script src="https://cdn.rekruti.com/chatbot.v2.2.js"
        data-backend-url="wss://relay.rekruti.com/chatbot"
        data-client-key="3f2a7b10-9c4d-4e21-8a6f-1b2c3d4e5f60"
        data-agent-key="VOTRE-CLE-DE-CANAL-CHATBOT"
        data-language="fr"
        data-title="Placement Acme"
        data-accent-color="#141056"
        data-accent-text-color="#FFFFFF"
        data-welcome="Bonjour! Comment puis-je vous aider aujourd'hui?"></script>