Embed your n8n AI Workflows on your customers website. Open-Source Chat Widget

3 hours ago 1

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.

🔌 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

Setup your website with the following code:

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 }

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

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

<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>

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

Voice Chat: Speech input and output
Image Generation: Image generation with AI from a chat input

We welcome every contribution! 🎉

Read Entire Article