Contexte

Widget de chatbot IA inbound conçu pour être embarqué sur n'importe quel site via un simple <script>. Il accueille les visiteurs, répond à leurs questions et les oriente, au bon moment, vers une action (prise de rendez-vous, vérification d'éligibilité, téléchargement d'un contenu). Projet mené pendant mon stage IA & Automatisation chez Café Crème.

Fonctionnalités clés

• Cœur 100% générique piloté par configuration : chaque site se déploie via un fichier de config, sans toucher au code.
• Intégration en Web Component monté dans un Shadow DOM : isolation CSS totale, aucun conflit avec le site hôte.
• UX immersive : modale centrée, barre dockée avec suggestions contextuelles, animations soignées.
• Réponses générées par IA affichées en streaming (token par token), avec appels à l'action contextuels selon l'intention détectée.
• Garde-fous : le bot s'appuie sur une base de connaissance dédiée et propose un conseiller s'il n'est pas sûr (jamais d'invention de chiffres ou de liens).
• Capture de leads : formulaires courts (lead magnet) ou complets (rappel conseiller), avec coutures vers le CRM.

Approche technique

Le front est construit avec Vite, TypeScript et Preact, packagé en un seul fichier embarquable et monté en Web Component (Shadow DOM) pour une isolation complète. Le thème est piloté par des design tokens CSS. Côté serveur, un backend Node.js / TypeScript sert d'intermédiaire vers l'API Mistral : il assemble le prompt à partir d'une base de connaissance et renvoie la réponse en streaming (SSE). L'architecture est pensée pour évoluer vers de la recherche sémantique (RAG) sans refonte.

Pilotage par la donnée (dashboard)

Chaque action du chatbot (conversation, message, lead capté, clic de CTA, coût/latence d'une réponse…) est tracée sous forme d'events envoyés vers le warehouse Neon (PostgreSQL en ligne). Pour visualiser ces métriques, le dashboard a d'abord été prototypé sous Metabase (branché en lecture seule sur le warehouse), puis recodé sur-mesure — un backend Node/TS qui lit Neon et expose les 7 sections via une API, et un front (Chart.js) aux couleurs de la marque — pour un rendu plus léger à héberger et entièrement maîtrisé. Le tout est déployé sur Render, avec un rôle base de données dédié en lecture seule par sécurité.

Résultats

Widget fonctionnel et réutilisable sur plusieurs sites grâce à son approche config-driven, avec une expérience de chat fluide et des garde-fous fiables. Le pipeline d'events alimente un dashboard de pilotage (conversations, leads, taux de conversion, coût, qualité des réponses) et des vues opérationnelles pour l'équipe (liste des contacts captés, export). Projet en cours d'industrialisation.