Launching today
N8N Chat UI
Beautiful, no-code, on-brand AI chat widgets for n8n
384 followers
Beautiful, no-code, on-brand AI chat widgets for n8n
384 followers
N8N Chat UI is a no-code builder for branded AI chat widgets, built for n8n users, agencies, SaaS teams, and businesses. Design a mobile-friendly chat experience with live preview, then connect it to any n8n workflow and embed it anywhere. Unlike default n8n chat, it adds deep customization, streaming, voice and file uploads, flexible layouts, and a JavaScript API for advanced integrations.
Hey Product Hunt 👋 Ross (@ross_jenkins) & Dani (@dani_martin1), the owners of N8N Chat UI.
The problem
n8n is brilliant for building AI agents, but its built-in chat widget is basic. Making it look like your brand means digging into HTML, CSS and JavaScript, and your webhook URL sits in the page source for anyone to find.
What we built
A visual builder that turns any n8n workflow into a polished, on-brand chat widget. Customize it with a live preview, copy one snippet, and it's on your site. No code.
Try the builder yourself, no signup needed: n8nchatui.com
Key features
Popup or in-page widgets, fully themed: colors, fonts, avatars, welcome messages, custom CSS
Streaming replies, voice input, file uploads, follow-up prompts, Markdown/HTML rendering
RTL support for Arabic, Hebrew and Persian
Managed widgets: hidden webhook, domain restrictions, geofencing, rate limits and real-time analytics
MCP server: ask Claude, Cursor or VS Code to create and restyle widgets for you
Official plugins for WordPress, Webflow, Shopify and Wix, plus an n8n community node
For developers: it's no-code, but not locked down
Send messages programmatically with sendMessage(): start a chat from a "Ask about this product" button, a form submission, a URL parameter, or after a visitor has been idle on the checkout page
Event callbacks (onWidgetOpen, beforeSubmit, onResponseReceived, onError…) to hook the chat into your analytics or app logic
Pass custom metadata (user ID, plan, current page) to your n8n workflow with every message
Change the theme and starter prompts on the fly with updateTheme() and updatePrompts(), no reload needed
Session keys to keep separate conversations per page or per user
Works with any backend that returns JSON, not only n8n
For agencies
Build a branded chat widget for every client in minutes, and clone widgets to reuse your best setups
Help your clients turn more website visitors into leads and sales
Show clients the results in the analytics panel, with message counts you can use to charge them per message
How pricing works
One paid plan: a lifetime license. Pay once, never pay again. You can also try it free with 100 credits, no card needed.
How it started
N8N Chat UI launched on the n8n community forum in April 2025 to fix a problem every n8n builder runs into: you build a great AI agent, put it on your website, and get a generic chat window with hardly any options to match your brand, unless you write the code yourself.
It caught on. More than 2,700 people have built widgets with it, and a lot of what shipped along the way began as requests from the community: session management, a free way to get started, streaming replies, voice notes and file uploads.
Why we bought it
In August 2026, we bought N8N Chat UI from its original creator, and Nicholas and Daniel from Ross's team at DigitalME joined us to build it out. We could see how many people already relied on it, because it fixes what n8n's own chat widget can't. And we could see how much further it could go: more advanced features, and a library of ready-made n8n recipes we're building to give to the community for free.
Our first big step is getting it onto the platforms people actually build with: official plugins for WordPress, Wix, Webflow and Shopify, plus an n8n community node that replaces the usual webhook wiring.
🎁 Product Hunt offer: $90 off the lifetime license ($59 instead of $149), plus 2,500 free credits to try Managed widgets
We'd love your feedback: which integrations or features should we build next? Drop them below.
Thanks to @jonnotie for hunting us, and to the PH community!
Questions or feedback? Email us at hello@n8nchatui.com, or connect with me on LinkedIn.
— Ross & Dani
@ross_jenkins @dani_martin1 @jonnotie How do you protect webhook URLs from being exposed in the browser?
@ross_jenkins @jonnotie @vipul_kumar1280 That's exactly what Managed widgets are for. The visitor's browser never sees your n8n webhook URL.
How it works:
The browser only talks to us. Your embed code points to our proxy (proxy.n8nchatui.com/api/chat/your-widget). Your real webhook URL is stored encrypted on our side and isn't included in anything we send to the page.
We forward each message to n8n from our server. If you turn on authentication on your n8n webhook (Basic Auth, Header Auth or JWT), we add those credentials on the way through. They never reach the browser either, and your webhook rejects anything that doesn't come through us.
You decide who can use it. Domain restrictions (the widget only loads on your sites), country restrictions and per-visitor rate limits are all set in the dashboard.
With a Standalone widget, the browser connects straight to your n8n, so the webhook URL is in your page code. That's fine for plenty of uses, but if keeping the URL private matters to you, use Managed.
— Dani
@ross_jenkins @jonnotie @dani_martin1 Got it, thanks for explaining! The proxy approach makes a lot of sense.
Many congratulations on the launch Ross and Dani! :)
Good to see there is a WordPress plugin as I plan to build my personal website on WordPress soon.
@n8n builder community creates powerful automations, but giving visitors a polished, on-brand chat experience has traditionally taken extra frontend work. This seemingly turns those workflows into a clean, production-ready chat interface in minutes. Love it!!
@rohanrecommends Thanks so much, Rohan, and thank you for all your help getting us to launch day! 🙏
You've summed up why we built this better than we have. The n8n community builds brilliant things, and the last step of making them look good on a real website shouldn't be what holds them back.
The WordPress plugin should suit you well. You install it, connect your workflow, and the widget appears across your whole site with no code. Here's the setup guide for when you're ready: https://n8nchatui.com/plugins/wordpress
Send us the link when the site's live. We'd love to see it, and we're happy to help if you get stuck setting it up.
— Dani & Ross
Love the interactive builder and how easy it is to set up for those less technical. Is there any way you could populate it with some session context, ie the logged in user?
Best of luck with the launch, will give it a try!
@calvinagh Thanks, and yes! You can add any context you like to the embed code as "metadata", and it's sent to your n8n workflow with every message. For a logged-in user, have your site fill in their details when the page loads (a user ID, email, plan, whatever helps). Your workflow then sees who it's talking to from the first message, so it can greet them by name, look up their orders, and so on.
Two related tips:
Give each logged-in user their own session key, so they get their own conversation, kept separate from anyone else who uses the same browser.
If the details change mid-visit, for example they log in after the chat has started, you can update the metadata before each message is sent.
One thing to watch: metadata comes from the browser, so treat it as "who the page says this is". If your workflow will show private data like orders or account details, send a signed token from your backend as well and check it in n8n.
The docs have copy-and-paste examples: https://n8nchatui.com/docs/configuration/metadata
Let us know how you get on!
— Dani
The LTDs are the way to go in the AI age. Question, is the lifetime license separate from any usage costs associated with n8n itself??
@syed_shayanur_rahman Yes, they're completely separate. The lifetime license is for the widget itself. Your n8n and AI costs stay with whoever you already pay:
N8N Chat UI license ($59 during launch): unlimited Standalone widgets, all the customisation, footer removal. You pay us nothing per message, because messages go straight from the widget to your own n8n.
n8n: whatever your setup already costs. On n8n Cloud, each chat message runs your workflow once, so it counts towards your plan's executions. If you self-host, it's just your server.
AI model: if your workflow calls OpenAI, Claude or similar, those token costs go to that provider as usual.
So we never take a cut of usage. The one exception is Managed widgets, our hosted option with the hidden webhook, domain locks and analytics, which run on credits. The launch license includes 2,500 Managed credits that never expire, so you can try that side for free too.
One thing to be upfront about: the license works forever and includes a year of updates and priority support. After that, updates are an optional add-on. You don't have to renew to keep using it.
— Dani
Is this to build chat support with n8n?
and can we take over the chat ?
@bengeekly Yes, that's exactly what it's for. N8N Chat UI is the chat window your visitors see, and your n8n workflow is the brain behind it. You build the support logic in n8n (an AI agent answering from your docs, order lookups, ticket creation, whatever you need), and the widget gives it a branded chat on your website, WordPress, Wix or Webflow.
On taking over the chat: a person can already answer inside the chat. When a visitor needs a human, your workflow sends their message to Slack using n8n's "send and wait for response" option. Someone on your team replies in Slack, and the answer appears in the chat as the next reply. The catch is timing: it works best when the person replies within about a minute, and staff can only reply to the visitor's messages, not start new ones.
Full live takeover, where a person can join the conversation at any time and send messages whenever they like, isn't there yet. We've sketched out how to add it properly using the conversation's session ID, and it's high on our list after today.
Other ways people hand off in the meantime:
Email handoff: when the bot can't help, it takes the visitor's email and sends the whole conversation to your inbox for a person to follow up. Recipe: https://n8nchatui.com/recipes/ai-faq-chatbot-email-handoff
Helpdesk ticket: the workflow opens a ticket with the conversation attached, so it lands in your usual support queue. Recipe: https://n8nchatui.com/recipes/zendesk-support-chatbot
Thanks for asking, it helps us decide what to build next. 👍
— Dani
Great app idea, the Javascript API is a nice touch for interacting with users without their input. I'lll give it a go.
@timg58 Thanks Tim! Yes, that's a fun one to play with. A nudge at the right moment, like when someone's been on the pricing page for a while, gets far more replies than a widget waiting in the corner.
Here's the API reference to get you started: https://n8nchatui.com/docs/configuration/chat-widget-api-reference
Let us know how you get on, and if you get stuck, just reply here or email hello@n8nchatui.com.
— Dani
Let's keep the conversations going, when staff aren't around, who's there to help your customer?
@ross_jenkins That's the one I hear most from small businesses. Most questions come in the evening and at weekends, exactly when nobody's there to answer.
Two setups we like for out-of-hours:
Answer what it can, hand off what it can't. The bot answers common questions from your own content. When it gets stuck, it takes the visitor's email and passes the conversation to your inbox, so someone picks it up first thing. We have a recipe for this: https://n8nchatui.com/recipes/ai-faq-chatbot-email-handoff
Change the greeting by time of day. During opening hours it can offer "chat to the team". After hours it can say "we're closed, but I can help or take a message". The JavaScript API docs have an example.
Curious what others do: do you let a bot handle everything out of hours, or only collect details for a person to follow up?
— Dani