Open source, customizable chat UI for n8n chat webhooks

ChatFlowGateUI embeds a themeable, streaming-ready chat window on any site and routes every message straight to an n8n chat webhook. Tune it live, then paste in one snippet.

Try the playground See embed code

Connects to any n8n webhook

Point webhookUrl at your Chat Trigger and every message routes straight into your workflow.

Window or fullscreen

Run it as a floating chat bubble or a dedicated fullscreen support page — one toggle.

Full copy control

Title, subtitle, greeting tooltip, input placeholder, and initial messages are all editable.

Optional intake form

Collect a name and email before the chat starts, with phone and message as opt-in fields.

Message actions & attachments

Let visitors repost or reuse messages, and upload files straight into the conversation.

Streaming & session control

Stream responses token-by-token and auto-expire idle sessions after a set number of minutes.

Custom branding

Primary color, avatar, and toggle button icon — match your product without touching CSS.

Live desktop & mobile preview

Tune every option in the playground and watch the widget update live on both breakpoints.

Add to any page

<script src="https://ui.chatflowgate.com/loader.bundle.iife.js"></script>
<script>
  ChatflowGate.init({
    webhookUrl: 'https://your-n8n.example.com/webhook/chat',
  });
</script>

Paste this before </body> and point webhookUrl at your Chat Trigger.

Parameters

Everything ChatflowGate.init() accepts.

Required

Parameter	Type	Default	Description
`webhookUrl`	string	—	Your n8n Chat Trigger URL. Every message is sent here.

Connection

Parameter	Type	Default	Description
`widgetUrl`	string	'https://ui.chatflowgate.com/widget'	Origin of the hosted /widget page. Only override for a self-hosted widget.
`target`	string (CSS selector)	'#n8n-chat'	Where to mount the toggle bubble. Created automatically if missing.
`webhookConfig.method`	'GET' \| 'POST'	'POST'	HTTP method used for the webhook call.
`webhookConfig.headers`	Record<string, string>	{}	Extra headers sent with every webhook request.

Display

Parameter	Type	Default	Description
`mode`	'window' \| 'fullscreen'	'window'	Floating bubble vs. a dedicated fullscreen page.
`greetingMessage`	string	none	Proactive tooltip shown next to the closed toggle button.
`greetingMessageDelay`	number (ms)	1000	Delay before the greeting tooltip appears.

Content

Parameter	Type	Default	Description
`initialMessages`	string[]	built-in greeting	Bot messages shown before the visitor sends anything.
`i18n`	Record<lang, strings>	built-in English copy	Per-language title, subtitle, inputPlaceholder, closeButtonTooltip, and more.

Behavior

Parameter	Type	Default	Description
`intakeForm.enabled`	boolean	false	Ask for a name and email before the chat starts.
`intakeForm.askPhone`	boolean	false	Add a phone field to the intake form.
`intakeForm.askMessage`	boolean	false	Add a first-message field to the intake form.
`loadPreviousSession`	boolean	true	Resume a visitor's last conversation when they come back.
`sessionTimeoutMinutes`	number	never expires	Minutes of inactivity before a stored session is dropped.
`enableStreaming`	boolean	true	Stream the bot's response token-by-token.
`enableMessageActions`	boolean	false	Let visitors repost or reuse a message.
`allowFileUploads`	boolean	false	Let visitors attach files to a message.
`allowedFilesMimeTypes`	string	any	Comma-separated MIME types accepted when uploads are on.
`metadata`	Record<string, unknown>	none	Extra data sent along with every webhook call.

Appearance

Parameter	Type	Default	Description
`theme.primaryColor`	string (CSS color)	built-in brand color	Accent color for the toggle button and header.
`theme.avatarUrl`	string (image URL)	none	Bot avatar shown in the header and messages.
`theme.toggleButtonIconUrl`	string (image URL)	chat icon	Icon shown on the closed toggle button.
`themePreset`	'default' \| 'modern' \| 'business' \| 'classic' \| 'retrofuturist' \| 'glassmorphic' \| 'paper' \| 'neobrutalist'	'default'	Named shape preset — radius, borders, shadows, fonts.

A custom chat frontend and security gateway for n8n Chat workflows. Keep the webhook server-side, rate limit every visitor, gate access with signed sessions, and hand clients a widget that embeds with one script tag.