N-Bed - Widget Chatbot Intégrable pour n8n
Widget chatbot React intégrable sur n'importe quel site (Shadow DOM, aucune dépendance), 100% configurable et connecté à n8n via webhook. Compatible toutes stacks.
Discutons
À propos de ce projet
N-Bed est un widget chatbot React entièrement configurable qui peut être intégré sur n'importe quel site web, quelle que soit la stack utilisée (PHP, Symfony, React, Vue, WordPress, etc.).
Caractéristiques principales
- ✅ Isolation CSS complète : Shadow DOM pour éviter tout conflit avec les styles de votre site
- ✅ Standalone : React inclus, aucune dépendance externe requise
- ✅ 100% Configurable : Textes, couleurs, icônes, emojis, animations, positionnement
- ✅ Compatible toutes stacks : Fonctionne sur n'importe quel site web
- ✅ Responsive : Parfaitement adapté mobile, tablette et desktop
- ✅ Animations personnalisables : Saut, zigzag, ou aucune animation
Modes d'intégration
N-Bed supporte 3 modes d'intégration selon vos besoins :
Mode 1 : Attributs data-* (Simple)
Idéal pour une configuration basique et une intégration rapide. Compatible avec tous les CMS (WordPress, Drupal, etc.).
Mode 2 : Objet JavaScript (Avancé)
Configuration complète et flexible avec accès à toutes les options pour des configurations complexes.
Mode 3 : Mix (Recommandé)
Combine les attributs data-* (valeurs de base) avec l'objet JavaScript (valeurs avancées) pour une flexibilité maximale.
Configuration avancée
Le widget permet de personnaliser :
- Textes : Titre, messages de bienvenue, placeholders, boutons
- Couleurs : Palette complète (primaire, secondaire, arrière-plan, texte)
- Positionnement : 4 positions possibles (bottom-right, bottom-left, top-right, top-left)
- Animations : Type d'animation du launcher, animations d'ouverture/fermeture
- Comportements : Auto-ouverture, persistance de conversation, scroll automatique
- Fonctionnalités : Réactions, Markdown, pièces jointes, timestamps
- CSS personnalisé : Injection de styles personnalisés pour une personnalisation totale
API et intégration n8n
Le widget communique avec n8n via webhook, supportant :
- Réponses JSON simples
- Streaming SSE (Server-Sent Events)
- Streaming NDJSON
- Streaming Plain Text
- Gestion des fichiers attachés (base64)
Documentation complète
Une documentation exhaustive est disponible sur la landing page du projet, incluant :
- Guide d'installation (CDN ou local)
- Exemples d'utilisation pour différentes stacks
- Référence API complète
- Personnalisation avancée
- Dépannage et support
Résultat
Un widget chatbot production-ready, entièrement isolé et configurable, permettant d'ajouter un assistant conversationnel à n'importe quel site web en quelques minutes. La solution est entièrement documentée et accessible sur https://n-bed.bovo-digital.tech/
Vous voulez ajouter un chatbot à votre site ou SaaS ? Découvrez notre service de développement web →
Réalisé par William Merveil Aklamavo — Expert Développement Web chez BOVO Digital · Voir aussi : Chatbot WhatsApp n8n + Gemini — Support Auto · Tontineo App Flutter — Tontine Numérique
Technologies utilisées
Services associés
Vous avez un projet similaire ? Explorez nos offres.
Un projet similaire ?
Discutons de votre besoin et construisons quelque chose d'exceptionnel ensemble.
Parlons-enProjets similaires
Explorez d'autres réalisations dans la même catégorie.
Workflow d'Image IA Orchestré
3 visuels professionnels générés en quelques secondes depuis une simple idée Notion — sans toucher au clavier. Notion + n8n + Gemini + Together AI orchestrés.
Voir le projetAutomatisation WooCommerce vers Pinterest
Votre catalogue WooCommerce transformé en machine à trafic Pinterest : 75 pins/jour automatiques, zéro doublon, zéro intervention manuelle — 365 jours/an.
Voir le projetAutomatisation de Contenu Multi-Plateforme
Un Google Doc → 1 article de blog + 1 post Instagram + 1 post LinkedIn en moins de 2 minutes. Votre présence digitale sur pilote automatique via Make.com & ChatGPT.
Voir le projetArticles connexes du blog
Approfondissez le sujet avec nos guides et tutoriels.
Tutoriel n8n Agent IA 2026 : Créer un Agent Autonome Pas à Pas
Comment créer un agent IA dans n8n en 2026 ? Ce guide complet explique l'architecture ReAct, les 5 composants clés, et vous guide étape par étape pour construire votre premier agent autonome avec mémoire et outils.
Lire l'articleNext.js 16.2 : Ce Qui Change Concrètement Pour Votre Projet en 2026
Next.js 16.2 vient de sortir avec un démarrage dev 87% plus rapide, Turbopack stabilisé et des outils de débogage révolutionnaires. Voici ce que ça change vraiment pour votre projet — sans jargon inutile.
Lire l'articleTutoriel : Déployer un Agent IA avec MCP sur votre Serveur en 20 Minutes
Le Model Context Protocol (MCP) est le standard qui connecte les IA aux outils réels. Ce guide pas à pas vous montre comment créer un serveur MCP, le connecter à Claude, et automatiser des tâches complexes.
Lire l'article