N8N Chat UI - Beautiful, no-code, on-brand AI chat widgets for n8n
by•
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.
Replies
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?
Congrats Dani and Ross! 🎉 Quick disclosure: I work with Dani at Millside Creative. I hadn't used N8N Chat UI before, so I tried it on a client site.
I connected Claude through the MCP server and asked it to match the widget to the client's branding. It set the colours, welcome message and starter prompts in one go, so I had something on-brand to look at straight away instead of a blank builder. Great time saver!
Good luck today!
@joanne_davies4 Thanks Jo, really glad it saved you time! 🙌 That's the use case we had in mind: let Claude do the first pass on the branding so you're tweaking something close, not starting from blank.
If anyone else wants to try it, the MCP setup is in the docs at n8nchatui.com. Happy to answer questions here.
@ross_jenkins Congrats on the launch Can we customize the chat widget without writing code?
@shivam_kushwaha16 Yep, we make it more simple than buttering your bread.
@ross_jenkins Can we customize the colors and layout to match our brand?
@ross_jenkins @shivam_kushwaha16 Yes, definitely. Matching the widget to your brand was a big part of the design.
From the dashboard you can change:
Colours: header, background, your messages, bot messages, the input box and the send button, each set separately.
Shape and size: width, height, corner rounding on the window, messages, input and buttons, plus font size.
Branding: your own title, avatars for the bot and the user, a welcome message and starter prompts. You can also remove our footer.
Layout: a pop-up chat bubble (choose its icon and position, and add an optional tooltip) or a full-page chat window that sits inside your page.
If you need more than that, custom CSS gives you full control, for example to use your brand font.
You can watch the changes in a live preview as you go, so it's quick to get right.
Removing the footer and custom CSS are included on Managed widgets. On Standalone they come with the license, which is $59 during the launch.
— Dani
@ross_jenkins @dani_martin1 Thankx Dani this is really helpful love that we can customize the branding and layout so easily
Nice. Design could use some improvements.
@itsrakesh Thanks for taking a look! Always happy to hear this kind of thing. Was it the chat widget itself, or the website and dashboard? If it's the widget, almost everything is customisable (colours, fonts, avatar, layout, and custom CSS if you want full control), so we might be able to point you to a setting. Either way, if anything in particular stood out, let us know and we'll add it to the list.
— Dani
Does the chat keep the conversation if the visitor refreshes the page or comes back later?
@ayberkbozkus Yes, by default. The widget saves the conversation in the visitor's browser, so it's still there after a refresh, on other pages of your site, or when they come back days later on the same device. It stays until they click the reset button in the chat.
The widget also sends the same session ID with every message, so if your n8n workflow uses a memory node keyed on that ID, your bot remembers the context too, not just the chat window.
A few options depending on what you need:
Start fresh every time: turn on "clear chat on reload" in the widget settings and each page load starts a new conversation.
Separate conversations on different pages: set a session key in the widget's metadata, for example one chat for product pages and another for support. Docs here: https://n8nchatui.com/docs/configuration/session-management
Across devices: history is stored per browser, so a visitor who switches from phone to laptop starts a new chat. If you need history across devices, you'd save it in your n8n workflow against a logged-in user's ID.
— Dani
Workflows are an important part for any Enterprise functioning but we all know how complex it can get. NLP way of interacting can be the game-changer, especially for non-tech folks. Excited to see how well this solution is adopted!
Kudos to Ross and the team!
@sid_625 Appreciate it! We have 2000+ sites using N8N Chat UI to support their business, from finance all the way over to pet salons.
Thanks for the support!
Perfect for appointment workflows! Keep seeing this issue of people losing interest the moment we send them to a Calendly page. Instead, it's better to use N8N Chat UI and put in the widget!
@jogindertanikella 100% agree. That jump to a separate booking page is where a lot of people drop off. Booking inside the conversation feels like one smooth step.
The setup we like: the bot answers a question or two, checks your real availability through n8n, suggests a few times, books the slot the visitor confirms, and sends you a heads-up. The visitor never leaves your page. You can keep Calendly as the system behind it, so your event types, reminders and calendar sync all stay the same.
We've written up step-by-step recipes for both:
Calendly: https://n8nchatui.com/recipes/calendly-booking-chatbot
Cal.com: https://n8nchatui.com/recipes/cal-com-booking-chatbot
— Dani
starting a chat with sendMessage() when someone idles on the checkout page is a smart one, most widgets just sit in the corner waiting
on the managed widgets, if someone copies the embed snippet onto their own site does the domain restriction block it completely??? or do a few messages still eat credits befor it kicks in???
@thamibenjelloun Thanks! Yes, that's one of our favourite uses for it. A widget that waits in the corner gets ignored. A well-timed "Need a hand with anything before you check out?" gets replies.
On your question: it's blocked completely. Messages don't get through before the block applies.
When a page loads a Managed widget, our server checks which site is asking before it sends the widget code. If that site isn't on your allowed-domains list, the widget doesn't load: no chat bubble, nothing to type into. Credits only get used when a message actually goes through, so a copied snippet on someone else's site costs you nothing.
A few things worth knowing:
Add every version of your address, for example both https://example.com and https://www.example.com. The match is exact, so if you leave one out, the widget won't load on that version of your site.
If the allowed-domains list is empty, the widget runs anywhere. Set your domains before you go live.
Messages started with sendMessage() go through the same route as typed ones, so on a Managed widget each one uses a credit. If you use it on the checkout page, add a rate limit or only send once per visitor.
If you'd rather not think about credits at all, that's what the Standalone widget is for. It's covered by the lifetime license ($59 during launch), and messages go straight to your own n8n webhook, so there are no credits involved. The trade-off is that the webhook is visible in your page code, and the domain lock, rate limits and analytics are Managed features. The launch license also comes with 2,500 Managed credits that never expire, so you can use both.
Thanks for checking it out!
— Dani
@ross_jenkins Love how easy it looks to customize the chat widget without writing code. Can we preview changes live before publishing?
@ross_jenkins @rohit62661 Yes. The editor shows the real widget on the same page as the settings, and every change appears straight away, so you can try colours, sizes and layouts and even chat with it before anything goes live. Nothing on your site changes until you save.
What happens when you save depends on the widget type:
Managed widgets: click "Save & Apply" and your live site updates straight away. The embed code stays the same, so you don't have to paste anything again.
Standalone widgets: your settings live inside the embed code, so after saving you copy the updated snippet back into your site.
You can also try the designer on our homepage without signing up: https://n8nchatui.com
— Dani
Passing the current page and user metadata into the workflow is a useful detail. It gives the workflow some context before the visitor types the first message.
@oleksii_sekundant Thanks, that's one of the features people tend to find most useful. It means the bot already has context with the very first message, so it doesn't have to start with "what are you looking at?"
You can pass anything you like: a user ID, plan, cart value, the page they're on. It gets sent to your n8n workflow with every message. The widget also adds a few things by default: the visitor's local time and timezone, browser info, and any URL query parameters (handy for UTM tags). If the metadata needs to change after the page loads, for example when the cart updates, you can change it before each message is sent.
Docs if anyone wants to try it: https://n8nchatui.com/docs/configuration/metadata
— Dani