n8n-embedded-chat-interface

🤖 N8N Embedded Chat Interface

Extend your website with a chat interface for your n8n AI workflow!

🚀 Demo • 📖 Documentation • 🤝 Contributing • 💬 Community

🎯 What is this?

The N8N Embedded Chat Interface is a modern, embeddable native web component that enables you to integrate n8n workflows as interactive chatbots on any website. With just a few lines of HTML code, you can transform your n8n automations into user-friendly conversational interfaces.

✨ Key Features

• 🔌 Plug & Play: Easy integration with a single <script> tag + 1 line of HTML code
• 🌍 Multilingual: Internationalization (i18n) support (German, English)
• 📦 Ready to host on your own domain: You can host the bundle on your domain with zero other dependencies

🚀 Usage

Setup your website with the following code:

<!-- Add these lines to your website -->
<script src="https://cdn.jsdelivr.net/npm/n8n-embedded-chat-interface@latest/output/index.js"></script>

<n8n-embedded-chat-interface label="My AI Assistant" hostname="https://your-n8n-webhook.com/webhook/:id-of-your-webhook-node" open-on-start="false"> </n8n-embedded-chat-interface>

🔧 N8N Workflow Setup

1. Configure Webhook Node

Create a new workflow in n8n with a Webhook Trigger Node:

{
	"httpMethod": "POST",
	"responseMode": "responseNode"
}

The body will look like this:

{
	"chatInput": "Hello, how are you?",
	"sessionId": "xxx" // second message will have a sessionId
}

2. Implement Chat Logic

Add your chat logic (e.g., OpenAI, local AI, or custom logic).

3. Response Format

Your workflow must return the following JSON format:

{
	"output": "Chatbot response",
	"sessionId": "session-id"
}

That's it! 🎉 Your website now has an intelligent chatbot.

Local Build and development

git clone https://github.com/symbiosika/n8n-embedded-chat-interface
cd n8n-embedded-chat-interface
npm install
npm run build
npm run dev

To run a demo please create a copy of "demo\index.html.sample" to "demo\index.html" and run:

npm run demo

Then open the Browser on: http://localhost:8000/demo/

🛠️ Configuration

Basic Configuration

<n8n-embedded-chat-interface label="Your Bot Name" description="Bot description" hostname="https://your-n8n-webhook-url.com" mode="n8n" open-on-start="false"> </n8n-embedded-chat-interface>

Available Attributes

Attribute	Type	Default	Description
label	String	""	Chat window title
description	String	""	Chatbot description (currently not used)
hostname	String	""	Required: URL to your n8n webhook
mode	String	"n8n"	Chat mode (currently only n8n)
open-on-start	String	"false"	Open chat on page load

🎨 Custom Color Schemes

You can customize the appearance of the chat interface by specifying custom colors. The component supports up to 10 different color properties:

<n8n-embedded-chat-interface 
  label="Custom Themed Chat" 
  hostname="https://your-n8n-webhook.com"
  primary-color="#2563eb"
  secondary-color="#64748b"
  background-color="#f8fafc"
  text-color="#1e293b"
  accent-color="#3b82f6"
  surface-color="#ffffff"
  border-color="#e2e8f0"
  success-color="#16a34a"
  warning-color="#f59e0b"
  error-color="#dc2626"
  open-on-start="false">
</n8n-embedded-chat-interface>

Color Properties

Property	Description	Example Values
primary-color	Primary brand color (buttons, header)	#2563eb, rgb(37,99,235), blue
secondary-color	Secondary accent color	#64748b, gray, hsl(215,25%,27%)
background-color	Main background color	#f8fafc, white, #111827
text-color	Primary text color	#1e293b, black, #f9fafb
accent-color	Highlight and accent elements	#3b82f6, rgb(59,130,246)
surface-color	Cards and surface backgrounds	#ffffff, #1f2937
border-color	Border and divider color	#e2e8f0, #374151
success-color	Success messages and indicators	#16a34a, green
warning-color	Warning messages and indicators	#f59e0b, orange
error-color	Error messages and indicators	#dc2626, red

Supported Color Formats

• Hex colors: #ff0000, #f00, #ff0000ff
• RGB/RGBA: rgb(255,0,0), rgba(255,0,0,0.5)
• HSL/HSLA: hsl(0,100%,50%), hsla(0,100%,50%,0.5)
• Named colors: red, blue, transparent, etc.

Security & Validation

All color values are automatically validated to prevent CSS injection attacks. Invalid color values will be ignored and logged as warnings in the browser console.

Example Themes

Corporate Blue Theme:

<n8n-embedded-chat-interface 
  primary-color="#2563eb" 
  secondary-color="#64748b" 
  background-color="#f8fafc" 
  text-color="#1e293b"
  hostname="your-webhook-url">
</n8n-embedded-chat-interface>

Dark Theme:

<n8n-embedded-chat-interface 
  primary-color="#3b82f6" 
  background-color="#111827" 
  text-color="#f9fafb" 
  surface-color="#1f2937"
  hostname="your-webhook-url">
</n8n-embedded-chat-interface>

🗺️ Roadmap

🎯 Planned Features

• Voice Chat: Speech input and output

🤝 Contributing

We welcome every contribution! 🎉

Like the project? Give us a ⭐ on GitHub!

⭐ Star on GitHub • 🐛 Report Bug • 💡 Request Feature