Design custom chat UI for your n8n - No coding required

Built with n8n
1

Hey n8n lovers!

Let me clarify upfront - this post is about something “built for n8n”, not “with n8n”. But I truly believe this will be valuable for everyone.

So, we all love building chatbots in n8n, but when it comes to embedding them into your website:
:x: Generic UI
:x: Very less customization options
:x: No branding control
:x: Requires coding skills to match your brand

That’s why I built N8N Chat UI - a tool that lets you:
:white_check_mark: Design & fully customize chat widgets to match your brand (colors, fonts, your logo, and more…)
:white_check_mark: Connect seamlessly to n8n workflows
:white_check_mark: 1-click copy & embed anywhere
:white_check_mark: Absolutely no coding knowledge required

Curious how it works? Try n8nchatui.com now and launch your branded chat widget in minutes — completely free!

I’d love your feedback. What features would make it perfect for you? :blush:

7 Likes
2

Nice - i bet you could really go crazy with custom options here.

  • give the component more ‘props’ to control the ‘mood lighting’ of the ai

On your video - I like that you show the custom effect quickly, but as I always remind people,

video is nice you can sometimes get 3-7 seconds of attention when you use sound and video design at a pro level :wink:

I would create an animated bento box type of thing in v0 or bolt - and have it autoplay in the hero, showing just a basic customization. Use like framer motion or gsap - so that someone can visually ‘get’ what your product is. (ill have it known I’m a marketer playing pretend with dev tools)

Aside from that good job!!!, like the price schema too!

3 Likes
3

I’ll take a look into improving the video demo this weekend. Thanks for your wonderful feedback

1 Like
4

Hello!

I’m looking for a chat frontend for n8n. I found n8chatui and I’m currently testing it. I’d like to know how to customize the CSS, for example in the code block below. n8chatui uses Shadow DOM, which makes CSS access restricted. Thank you in advance for your attention!

Captura de Tela 2025-07-13 às 22.13.29
Captura de Tela 2025-07-13 às 22.13.291826×1480 219 KB

5

Hey i like this tool just a small thing i want to make a webpage for my bot rather than a widget like i want it to be like ChatGPT that has its own webpage and custom UI there, for some reason after i made my simple interface with html and plugged in the webhook url it didnt work so please if you can add the option to make webpages aswell it’ll be huge help.

6

Hey can you add chat History function to the widgets or the in page option beacuse chat history will be sooo good. please add chat history feature and that caht doesnt reset if i reload

1 Like
7

Can you add a free version for it aswell it ll be very nice of you

8

This is absolutely fantastic!
I find this concept truly inspiring — it immediately sparks several ideas in my mind.

For example:

  • Embedding branded chat widgets in corporate websites (like Hidrobart or client portals) to create a seamless omnichannel experience connected to n8n.

  • Using it for private conversational forms or intelligent assistants that feed data directly into databases or CRMs.

  • Integrating LangChain or vector databases (like Chroma) behind the scenes for context-aware replies and memory.

  • Even creating multilingual AI-based advisors for customer support or sales.

This tool opens a whole new dimension for interactive automation — congratulations on such an elegant and practical solution!