Installer l’agent vocal IA Rekruti sur votre site Web

1. Installation

Ajoutez la balise de script suivante juste avant la balise </body> de chaque page où l’agent vocal doit paraître.

<script src="https://cdn.rekruti.com/voicebot.v1.3.js"
        data-backend-url="wss://relay.rekruti.com/voice"
        data-client-key="VOTRE-CLE-CLIENT"
        data-agent-key="VOTRE-CLE-DE-CANAL-VOCAL"
        data-language="fr"></script>

C’est tout. Un bouton de téléphone flottant apparaît dans le coin inférieur droit de la page ; la carte d’appel, le son, le style et la conversation sont fournis par le script, et rien d’autre n’est à installer sur votre serveur.

Rekruti vous remet ce code avec vos clés déjà inscrites. Deux conditions : la page doit être servie en HTTPS, car les navigateurs ne donnent le micro qu’à une page sécurisée, et votre agent doit avoir un canal vocal, que Rekruti met en place pour vous.

2. Styles d’affichage

Le même script présente l’agent vocal de trois façons, au choix des attributs data-container et data-collapsed.

Bouton flottant (par défaut)

Sans data-container, l’agent vocal est un bouton de téléphone rond, fixé dans le coin inférieur droit, comme une bulle de clavardage. Un clic ouvre la carte d’appel au-dessus.

• À côté du chatbot — quand le chatbot Rekruti est sur la même page, le bouton de téléphone se place à gauche de la bulle de clavardage plutôt que de la couvrir. Les deux scripts peuvent être dans n’importe quel ordre.
• Un panneau à la fois — la carte d’appel et la fenêtre de clavardage s’ouvrent dans le même coin : ouvrir l’une ferme l’autre.
• Un appel n’est jamais oublié — si le visiteur cache la carte pendant un appel, l’appel continue, et le bouton devient vert et pulse jusqu’à la fin. Fermer la carte avec son bouton × raccroche.

Carte intégrée

Avec data-container, la carte complète est dessinée dans un élément de votre page, par exemple sur votre page carrières ou de contact. Ajoutez un élément vide là où la carte doit paraître, et désignez-le à data-container par un sélecteur CSS :

<div id="voice-demo"></div>
<script src="https://cdn.rekruti.com/voicebot.v1.3.js"
        data-backend-url="wss://relay.rekruti.com/voice"
        data-client-key="VOTRE-CLE-CLIENT"
        data-agent-key="VOTRE-CLE-DE-CANAL-VOCAL"
        data-language="fr"
        data-container="#voice-demo"></script>

La carte prend toute la largeur de son conteneur, jusqu’à 420 px, centrée. Si le sélecteur ne trouve rien, le script revient au bouton flottant.

Carte intégrée compacte

Ajoutez data-collapsed="true" à une carte intégrée pour qu’elle commence sur une seule ligne — le titre, l’état et un bouton d’appel plus petit — et s’ouvre en carte complète au début de l’appel. Elle convient à une barre latérale ou à une colonne étroite.

<script src="https://cdn.rekruti.com/voicebot.v1.3.js"
        ...
        data-container="#voice-contact"
        data-collapsed="true"></script>

3. Paramètres

À placer sur la balise de script.

4. Vos clés

data-client-key est la clé de votre compte Rekruti, un GUID comme 3f2a7b10-9c4d-4e21-8a6f-1b2c3d4e5f60, la même dans tous vos widgets. data-agent-key est la clé du canal vocal de votre agent : ce n’est pas celle de son chatbot, car chaque canal a sa propre clé, même quand le même agent répond aux deux. Les deux clés viennent avec le code d’intégration que Rekruti vous remet.

Si une clé manque ou est mal formée, la carte affiche une erreur de configuration quand le visiteur lance l’appel, et le serveur n’est pas contacté. Si les clés ne sont pas reconnues, l’appel ne passe pas : vérifiez que le code de votre page est exactement celui que Rekruti vous a fourni.

5. Langue et voix

L’attribut data-language fixe la langue de la carte (état, boutons, messages), celle dans laquelle la parole est transcrite, celle dans laquelle l’agent répond, et la voix avec laquelle il parle :

• en — anglais (par défaut).
• fr — français.

N’utilisez que ces deux valeurs. Sur un site bilingue, donnez à chaque page sa langue, et accordez-y data-title et data-welcome.

La voix elle-même fait partie de l’agent, pas de votre page : Rekruti la choisit avec vous quand il met en place le canal vocal — une voix québécoise pour vos appelants francophones, par exemple. La changer ne demande rien dans le code de votre page.

6. Avec le chatbot

L’agent vocal est fait pour se placer à côté du chatbot Rekruti, pour que vos visiteurs choisissent entre écrire et parler. Ajoutez les deux scripts à la page. La clé client est la même ; chacun a la clé de son propre canal :

<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>
<script src="https://cdn.rekruti.com/voicebot.v1.3.js"
        data-backend-url="wss://relay.rekruti.com/voice"
        data-client-key="VOTRE-CLE-CLIENT"
        data-agent-key="VOTRE-CLE-DE-CANAL-VOCAL"
        data-language="fr"></script>

Le bouton de téléphone se place à gauche de la bulle de clavardage, et un seul des deux panneaux est ouvert à la fois. Notez les deux adresses : /chatbot pour le chatbot, /voice pour l’agent vocal.

7. 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 #ncv-launcher { 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.

8. Comment ça fonctionne

Quand le visiteur lance un appel, le navigateur demande le micro. Le widget envoie ensuite le son, par un WebSocket sécurisé, au relais Rekruti, qui le transcrit pendant que le visiteur parle ; les mots paraissent sur la carte à mesure qu’ils sont reconnus. Quand le visiteur fait une pause, la phrase va à votre agent IA, et sa réponse, transformée en parole, revient en continu : l’agent commence à parler en quelques instants.

• Interruptions — le visiteur peut couper la parole à l’agent à tout moment, comme au téléphone : l’agent se tait et écoute.
• Durée — les appels sont limités, à cinq minutes pour l’instant. La carte montre le temps écoulé par rapport à la limite, et l’agent dit au revoir quand elle est atteinte.
• Lignes occupées — le nombre d’appels simultanés est limité. Quand toutes les lignes sont prises, le visiteur est invité à réessayer dans quelques minutes.
• Fin de l’appel — l’appel se termine quand le visiteur raccroche, ferme la carte flottante ou quitte la page.
• Si la voix fait défaut — l’appel continue, et les réponses s’affichent en texte sur la carte.

9. Essais et dépannage

• Essayez avant d’installer — demandez à Rekruti d’appeler votre agent avec vous avant que l’agent vocal aille sur votre site.
• Le bouton n’apparaît pas — vérifiez que l’adresse du script est joignable et que le code est placé avant </body>. Après un changement du code, rechargez la page sans cache (Ctrl+Maj+R).
• Accès au micro refusé — le visiteur a refusé le micro, ou l’a bloqué auparavant. La carte le dit ; il peut être permis de nouveau depuis le cadenas de la barre d’adresse.
• Le micro n’est jamais demandé — la page n’est pas servie en HTTPS. Les navigateurs ne permettent le micro que sur des pages sécurisées (et sur localhost pour le développement).
• « Impossible de joindre l’assistant » — le relais n’a pas pu être joint, ou a refusé l’appel. Vérifiez les clés, l’adresse WebSocket, et que la page est sur un des sites Web de vos widgets.
• Rien ne se passe sur une page https:// — l’adresse doit commencer par wss:// et non ws://.
• Navigateur non pris en charge — l’agent vocal demande un Chrome, Edge, Firefox ou Safari récent. Les anciens navigateurs affichent un message plutôt qu’un appel.
• L’agent n’entend pas le visiteur — ajoutez ?ncv-debug à l’adresse de la page, ou data-debug="true" à la balise de script, et ouvrez la console du navigateur pendant un appel. Elle montre le micro utilisé, le niveau sonore envoyé toutes les deux secondes et chaque message du relais. Un niveau qui reste à 0.000 pendant que le visiteur parle veut dire que le navigateur utilise le mauvais micro, ou un micro en sourdine.

10. Exemple complet

Un agent vocal flottant avec toutes ses options :

<script src="https://cdn.rekruti.com/voicebot.v1.3.js"
        data-backend-url="wss://relay.rekruti.com/voice"
        data-client-key="3f2a7b10-9c4d-4e21-8a6f-1b2c3d4e5f60"
        data-agent-key="VOTRE-CLE-DE-CANAL-VOCAL"
        data-language="fr"
        data-title="Alicia"
        data-subtitle="Recrutement"
        data-welcome="Bonjour, je suis Alicia. Comment puis-je vous aider?"
        data-accent-color="#141056"
        data-accent-text-color="#FFFFFF"></script>