Launched this week
N8N Chat UI
Beautiful, no-code, on-brand AI chat widgets for n8n
590 followers
Beautiful, no-code, on-brand AI chat widgets for n8n
590 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.
Payment Required
Launch Team / Built With
AWS Activate CreditsCredits that fuel your startup’s next milestone
Promoted
I see there are two modes popup and embedded. Do we just switch between them or rebuild the widget?
@nuseir_yassin1 You just switch. There's a Popup / In-page selector at the top of the widget editor. Your colours, messages, avatars and other settings carry over, so there's nothing to rebuild.
The only thing that changes is where the chat sits on your page:
Popup: a chat bubble in the corner that opens the chat window. The embed code handles everything.
In-page: the chat sits inside your page, like a section. You add one tag where you want it to appear, <n8nchatui-inpage></n8nchatui-inpage>, and the widget fills it. The embed code panel shows you exactly where it goes.
Once you've switched:
Managed widgets: click Save & Apply. Your script tag stays the same, so you only need to add the in-page tag if you've moved to in-page.
Standalone widgets: copy the updated snippet, because your settings are part of the code.
Small tip: popup and in-page usually need different sizes. When you switch back to popup, the width and height reset to the popup defaults, so check those afterwards.
— Dani
@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
This is something n8n probably should've had already. Nobody wants to spend hours messing with CSS just to make a chat widget look right. Nice work on this!
@nrupen_mandava Thank you! That's exactly why it exists. n8n's own chat package is a solid start, but getting it to match your brand usually means writing CSS by hand. Here you choose colours, sizes and layout in a visual editor, watch the preview update as you go, and copy the embed code when you're happy.
There's still custom CSS for anyone who wants pixel-perfect control. It's just optional now. 😄
— Dani
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
Dani here, co-owner of N8N Chat UI 👋
Ross and I took this over in August. Today is the first time we've put it in front of a big crowd, so we want to hear what you think more than anything.
The part we're most curious about is the widget making the first move. Most chat widgets sit in the corner and wait. Ours can start the conversation: a few lines of JavaScript let it open with a question at the right moment. Our favourite example is someone who's been on the checkout page for two minutes. The widget asks "Any questions about shipping or returns?" and sends your n8n agent the context: which page they're on, how long they've been there, what's in their cart.
The tools behind that:
→ sendMessage() starts a chat from a button, a form, a URL parameter or an idle timer
→ updatePrompts() changes the suggested questions for each page
→ updateTheme() restyles the widget without losing the conversation
→ metadata and beforeSubmit send context to your workflow with every message
What we'd love to know:
What would you want the widget to react to? Exit intent, cart value, time on page, something else?
What's missing or awkward compared with what you use now?
Has anything put you off adding a chat widget to an n8n workflow before?
We read every comment, and the good ideas go straight onto our list. Be honest, we can take it 😄
Docs and examples: n8nchatui.com/docs
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