Most websites lose almost everyone who visits. People land, have a question or a doubt, don't find the answer quickly, and leave. A chat widget is the obvious fix, but one that sits in the corner waiting to be clicked usually doesn't do much.
What we've seen work better, working with agencies and shop owners, is treating chat as part of the sales process, not a support add-on:
Show up at the right moment. Open the widget when someone's been on the checkout page for a couple of minutes, or sat on a product page without adding anything to the cart. That's usually when a question is stopping the sale (delivery, returns, sizing).
Know why they're there. Pass the page, the product or the cart to your n8n workflow with every message, so the agent can answer the actual question and doesn't open with "How can I help?".
Ask different questions on different pages. Pricing-page prompts and returns-page prompts shouldn't be the same.
Don't lose the people who aren't ready to buy. Capture them as leads into your CRM (HubSpot, Pipedrive, Mailchimp or whatever you use) with consent, so you can follow up.
Book the calls. Let the chat book the meeting with Calendly or Cal.com, so a warm visitor doesn't have to wait for an email.
All of that can be wired up with n8n and a bit of JavaScript, and we've put ready-made workflows for the CRM, booking and order-lookup parts at n8nchatui.com/recipes.
What I'd like to know: which of these has actually moved the needle for you or your clients? And what have you tried that didn't work? I'd love real numbers if anyone's willing to share.
Read in your pinned maker comment about the file uploads. Are file types & upload sizes configurable per widget?
@roopreddy Yes, everything is set per widget. In the widget editor you can:
Turn uploads on or off.
Choose the accepted file types. Tick any of these:
documents: PDF, TXT, RTF, MD, DOC, DOCX, XML, JSON
spreadsheets: CSV, XLS, XLSX
images: JPG, JPEG, PNG, GIF, BMP, WEBP, SVG
Set the maximum file size in MB.
Set the maximum number of files per message.
New widgets start with JPG, PNG and PDF, up to 5 files of 10 MB each. You can change all of that.
So a support widget can accept screenshots only, while a quoting widget on another page takes PDFs and spreadsheets. Files arrive in your n8n workflow along with the message, ready to use.
One practical note: your n8n server also limits how big an incoming request can be, so if you raise the size a lot, check that n8n will accept it.
— Dani
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!