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.
We've been building a library of ready-made n8n recipes for chatbots, and we're giving them away free. There are 16 so far, and we'd like to know whether we're building the right ones. What's in there at the moment:
Lead capture: into HubSpot, Mailchimp, ActiveCampaign, Pipedrive, Airtable or Google Sheets, with consent handled where it matters
Bookings: Calendly and Cal.com
Support and orders: Zendesk tickets, plus Shopify and WooCommerce order lookup
AI: an FAQ bot with email handoff, and a bot that answers from a Supabase knowledge base
No AI needed: button-menu bots for when a decision tree does the job better and cheaper
They're all at n8nchatui.com/recipes. What I'd really like to know:
What do you end up building over and over for clients?
Which tools are we missing? (Notion, Slack, Intercom, Stripe?)
Do you prefer AI-driven bots, or simple button flows?
We're Dani and Ross, the owners of N8N Chat UI, and we launched on Product Hunt today.
One thing we're curious about from people building with n8n: what makes a chat widget useful on a site, beyond sitting in the corner waiting to be clicked?
The widget has a small JavaScript API, so you can start a chat from almost anything.
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
Report
@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
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.
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