What is stylchat?
The front end for your n8n automations — a chat window your visitors will actually use.
stylchat is a visual builder for embeddable chat widgets. You design the widget in your browser, point it at an n8n Webhook node, and paste one script tag into your website. When a visitor sends a message, it goes straight from their browser to your n8n workflow — an AI agent, a database lookup, a third-party API, anything n8n can do — and the reply appears in the chat.
Use stylchat when you want to:
- Keep control of your data. Connect the widget directly to your own n8n webhook so messages never pass through stylchat's servers.
- Match your brand. Customize colors, avatars, fonts, themes, and white-label options so visitors only see your brand.
- Install quickly. Add one script tag before
</body>on any platform that accepts HTML.
Getting started
Create an account and sign in — no card required to start.
- Go to the stylchat homepage and click Try it free (or Start building for free).
- Choose one of the available sign-up options: your email address, Google, LinkedIn, or a passwordless magic link.
- Select the option that works best for you, then complete the sign-up process. If you signed up with email, you may be asked to confirm your address.
Your dashboard
Every widget you own, in one place.
After signing in you land on the dashboard. Each card is one widget, showing its name and the n8n webhook it's connected to (or "no webhook connected" if you haven't wired it up yet). Click any card to open it in the editor.
- New widget creates a fresh widget in one click. If you've used all your widget slots, the button becomes Buy another widget.
- The colored circle in the top-right corner is your account menu — open it to see your plan, manage billing, or sign out.
Customizing a widget
The Customize tab: style everything, watch it update live.
The editor has three tabs — Customize, Connect, and Embed — with a live preview of your widget floating on the right. Every change you make lands in the preview instantly, and your work saves automatically (watch the save indicator in the top bar). If you're on the free plan, start with the default theme and customize it to match your style — the customization panel is split into a few self-explanatory sections below.
| Panel | What you control |
|---|---|
| Themes | One-click presets — n8n Style, Neo-Brutalism, Minty Minimalist, Editorial Newsprint, Midnight Synthwave, Cyberpunk 2077 and more — that restyle the whole widget instantly. Pick one as a starting point, then fine-tune. |
| Chat Bubble | The floating launcher button: shape, colors, icon, and placement on the page. |
| Chat Window | The conversation itself: header title and subtitle, avatar, greeting message, starter prompts, colors, corner radius, fonts, light/dark, and right-to-left layout for Arabic, Hebrew, Farsi, and Urdu. |
| White Label | Remove the "powered by stylchat" footer, set your own brand name and link. (Pro) |
| Advanced | Custom CSS injection, consent screen, file upload, and voice input. (Pro) |
Themes
Themes are available in light and dark variants — pick whichever fits your brand.
| Category | Theme | Description |
|---|---|---|
| Light | n8n Style | Clean modern layout matching n8n brand styles. |
| Light | Neo-Brutalism | Vibrant, high-contrast, boxy neobrutalism design. |
| Light | Glassmorphism | Soft violet glass with rounded corners. |
| Light | Minty Minimalist | Clean green design built for readability. |
| Light | Editorial Newsprint | Classy black-and-white print editorial layout. |
| Light | Tokyo Neobrutalist | Tokyo street style in pink and yellow. |
| Light | Cobalt Paper | Crisp white with a deep-cobalt header. |
| Light | Champagne Foil | Ivory and charcoal with gold-foil accents. |
| Light | Frosted Slate | Frosted glass over a violet gradient. |
| Dark | Midnight Synthwave | Deep purple canvas with hot pink highlights. |
| Dark | Cyberpunk 2077 | Futuristic yellow and neon cyan. |
| Dark | Forest Twilight | Deep greens for relaxed branding. |
| Dark | Midnight Aurora | Galactic indigo with green-cyan glow. |
| Dark | Dark Techno | A futuristic command console grid design. |
| Dark | Deep Ocean | Calm navy-teal with electric-blue accents. |
| Dark | Obsidian Velvet | Near-black with a violet radial glow. |
| Dark | Nova Assistant | Modern AI-assistant look with a soft indigo glow. |
| Dark | Emerald Ledger | Deep forest-black with brushed gold. |
Chat Bubble
Customize the floating launcher button: its shape (Circle, Rounded, Square), background color or a transparent background, a custom icon URL (SVG or PNG — leave empty to use the default chat icon), the color of internal icons, chat button size in pixels, and its position (bottom-left or bottom-right) with adjustable side and bottom offsets.
Chat Window
Visual & layout: set a global border style (Sharp, Rounded, Soft) and individually adjust border radii for chat messages (default 8px) and the input box (default 6px). Customize the widget's overall width (default 380px), height (default 600px), and base font size (default 14px). Set hex colors for the chat background, header background and text, user bubble and user text, bot bubble and bot text, and the send button.
Content & copy: toggle the entire title section on or off. Customize the Title (default "Hi there! 👋"), Subtitle (default "Start a chat..."), and add a small Title Avatar via an image URL. Define the initial welcome message from the bot and set a custom error message to display if the webhook fails to respond. Adjust the input box height (default 50px) and edit the placeholder text (default "Type your question..").
Behavior & navigation: an optional Home tab gives visitors a main navigation view with a capsule search bar. When a visitor types a query and presses Enter, that query is sent as a message to your webhook — so your n8n workflow should include a tool (like Google Search or a vector store with your knowledge base) to answer general questions. You can also enable "Autofocus input" on open, allow users to copy message text, enable arrow-key navigation to browse previous messages, and toggle whether the scrollbar shows or chat history clears on page reload.
Pro features
| Feature | What you can set |
|---|---|
| File uploads | Let visitors attach files to their messages. Configure accepted file types (comma-separated extensions, e.g. .pdf,.png,.txt), max file size (default 5MB), and max number of files (default 3). |
| Voice recording | Let visitors send voice messages. Set the minimum and maximum recording duration, capped at 60 seconds, plus a custom error message for devices that don't support it. |
| Screen recording | Let visitors capture and send a screen recording, hard-capped at 30 seconds, with a custom error message for unsupported devices. |
White Label
Available on the Pro plan.
Toggle whether "Powered by stylchat" text shows at the bottom of the chat window, set your own brand name and brand URL, optionally show a custom link (for example a Privacy Policy link with your own label and URL), and pick background and text colors for the footer bar.
Advanced
Available on the Pro plan.
Consent screen: toggle a message that appears before a chat begins — useful for privacy notices or terms of service — with a custom "Agree & start chat" button.
Layout direction: switch between Left-to-Right (for languages like English or Spanish) and Right-to-Left, with a language picker for Arabic, Hebrew, Farsi, and Urdu. This translates the widget's built-in labels (tab names, send button, etc.) and mirrors the layout. Your own text — title, welcome message, placeholders, help topics — is not auto-translated, so type it in your chosen language yourself.
Custom CSS: raw CSS applied to the widget. Leave empty unless you know what you're doing. Here's a full sample you can copy and paste into the CSS box to try it out — a "modern glass" palette using the widget's CSS custom properties:
:root { /* Modern Glass Palette */ --chat--color--primary: #3b82f6; --chat--color--primary-shade-50: #2563eb; --chat--color--primary--shade-100: #1d4ed8; --chat--color--secondary: #0ea5e9; --chat--color-secondary-shade-50: #0284c7; --chat--color-white: #ffffff; --chat--color-light: #f8fafc; --chat--color-light-shade-50: #eef2ff; --chat--color-light-shade-100: #dbeafe; --chat--color-medium: #cbd5e1; --chat--color-dark: #111827; --chat--color-disabled: #cbd5e1; --chat--color-typing: #64748b; /* Typography */ --chat--font-family: "SF Pro Display", "Inter", -apple-system, BlinkMacSystemFont, sans-serif; /* Layout */ --chat--spacing: 1rem; --chat--border-radius: 20px; --chat--transition-duration: 0.25s; /* Window */ --chat--window--width: 430px; --chat--window--height: 720px; --chat--window--bottom: 24px; --chat--window--right: 24px; --chat--window--border: 1px solid rgba(255,255,255,.45); --chat--window--border-radius: 28px; /* Header */ --chat--header--padding: 1.5rem; --chat--header--background: linear-gradient( 135deg, rgba(255,255,255,.75), rgba(255,255,255,.55) ); --chat--header--color: #111827; --chat--heading--font-size: 1.4rem; --chat--subtitle--font-size: .95rem; /* Messages */ --chat--message--font-size: .95rem; --chat--message--padding: 14px 18px; --chat--message--border-radius: 18px; --chat--message-line-height: 1.6; /* Bot Bubble */ --chat--message--bot--background: rgba(255,255,255,.85); --chat--message--bot--color: #111827; --chat--message--bot--border: 1px solid rgba(255,255,255,.5); /* User Bubble */ --chat--message--user--background: linear-gradient( 135deg, #0ea5e9, #3b82f6 ); --chat--message--user--color: white; --chat--message--user--border: none; /* Body */ --chat--body--background: linear-gradient( 180deg, #f8fbff 0%, #eef5ff 100% ); /* Footer */ --chat--footer--background: rgba(255,255,255,.75); --chat--footer--color: #111827; /* Input */ --chat--textarea--height: 56px; --chat--textarea--max-height: 30rem; --chat--input--padding: 14px 18px; --chat--input--background: rgba(255,255,255,.8); --chat--input--border: 1px solid rgba(255,255,255,.55); --chat--input--border-radius: 16px; --chat--input--text-color: #111827; --chat--input--border-active: 1px solid #3b82f6; /* Toggle Button */ --chat--toggle--size: 68px; --chat--toggle--background: linear-gradient( 135deg, #0ea5e9, #3b82f6 ); --chat--toggle--hover--background: linear-gradient( 135deg, #0284c7, #2563eb ); --chat--toggle--active--background: #1d4ed8; --chat--toggle--color: white; /* Buttons */ --chat--button--border-radius: 14px; --chat--button--background--primary: linear-gradient( 135deg, #0ea5e9, #3b82f6 ); --chat--button--color--primary: white; /* Send Button */ --chat--input--send--button--background: transparent; --chat--input--send--button--color: #3b82f6; --chat--input--send--button--background-hover: rgba(59,130,246,.08); --chat--input--send--button--color-hover: #2563eb; /* File Button */ --chat--input--file--button--background: transparent; --chat--input--file--button--color: #64748b; --chat--input--file--button--color-hover: #3b82f6; /* Shadows */ --chat-glass-shadow: 0 20px 60px rgba(15,23,42,.12), 0 8px 20px rgba(59,130,246,.08); } .chat-window, .chat-layout, .chat-container { backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); box-shadow: var(--chat-glass-shadow); } .chat-header { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,255,255,.35); } .chat-message { max-width: 75%; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .chat-footer { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid rgba(255,255,255,.35); } .chat-input textarea, .chat-input input { transition: all .25s ease; } .chat-input textarea:focus, .chat-input input:focus { box-shadow: 0 0 0 5px rgba(59,130,246,.12); } .chat-toggle { box-shadow: 0 12px 35px rgba(59,130,246,.35); } .chat-toggle:hover { transform: translateY(-3px) scale(1.03); }
Connecting to n8n
The Connect tab: paste your webhook URL, then test a real conversation.
- In n8n, create a workflow that starts with a Webhook node (method: POST) and ends by responding with the reply text. Activate the workflow and copy the production webhook URL.
- In the Connect tab, paste that URL into the n8n webhook URL field. It's stored with your widget and never shared with anyone else.
- Use the Test it panel to send a real message. It POSTs to your webhook exactly like the live widget will, and shows the reply — so you know everything works before you embed.
Each message arrives at your webhook as JSON with a chatInput field containing the visitor's text (or as a multipart request when files are attached). Whatever text your workflow returns is rendered as the assistant's reply.
If something goes wrong
While your workflow is thinking, visitors see a typing indicator. If the request fails — your n8n is down, or the workflow errors — the widget shows a clear error message instead of leaving them staring at nothing. Since stylchat is not in the request path, your widget's uptime is exactly your n8n's uptime.
Embedding on your site
The Embed tab: one snippet, any website.
The Embed tab generates a ready-to-paste snippet containing your widget's full design and webhook connection. Choose one of the two deployment methods below and paste it just before the closing </body> tag of your site. The widget mounts itself — no plugin, no build step.
- Standard Script (ES Module). A copy-pasteable
<script type="module">snippet. It loads the widget loader dynamically and initializes it using an inlineChatWidget.init()configuration object. Use this first — it works in most cases. - CSP-Compliant Script (No-Module). An alternative
<script>block for websites with strict Content Security Policy rules that block inline scripts or ES module imports. It loads an externalembed.nomodule.jsfile and passes your entire configuration safely through a URL-encodeddata-stylchat-configattribute. Use this only if the standard script is blocked.
</body>.- Works everywhere: WordPress, Shopify, Webflow, Squarespace, React/Next.js apps, or a plain HTML file.
- Connect first: if you haven't connected a webhook yet, the tab reminds you — the script won't have anywhere to send messages until you do.
Plans & billing
Free to build. One payment of $50 to unlock everything, forever.
You can build and preview widgets for free. The Pro upgrade is a single one-time payment of $50 — no subscription, no per-message billing, and every future theme, feature, and update included.
| Feature | Free | Pro ($50 once) |
|---|---|---|
| Visual editor, themes & live preview | ✓ | ✓ |
| Connect your own n8n webhook | ✓ | ✓ |
| Embed on your site | ✓ (with stylchat branding) | ✓ |
| Remove "powered by stylchat" / white label | — | ✓ |
| Custom CSS injection | — | ✓ |
| File upload, voice & screen recording | — | ✓ |
| Consent screen | — | ✓ |
To upgrade or manage billing, open the account menu (top-right on the dashboard) and choose Billing. Payments are processed securely by Stripe.
Purchased widget billing
You can access your purchased widgets by clicking the account button in the top-right corner and then clicking Billing.
FAQ
Quick answers to the most common questions.
Is it really $50 once — no subscription, ever?
Yes. One payment of $50, lifetime access. No monthly fee, no per-message billing, no cap on how many widgets you build or how many sites you put them on. Because the widget talks to your own n8n instance, there's no usage to meter — so there's nothing to bill you for later.
How does the connection to n8n actually work?
The widget posts straight to an n8n Webhook node. A visitor types a message, the widget sends it to your webhook URL, your workflow does the work — AI agent, database lookup, third-party API, whatever you have wired up — and returns text. That text appears in the chat.
What if I don't have an n8n instance yet?
You still need one — stylchat is the front end, n8n is the brain. n8n Cloud has a free trial and the self-hosted community edition is free forever. Once it's running and you have a Webhook node, you're about two minutes from a live widget.
Can I remove the stylchat branding?
Yes. The $50 license turns off the "powered by stylchat" footer, lets you rename the assistant, set your own avatar and colors, and inject custom CSS. Nothing on the finished widget has to say stylchat.
Does stylchat see, store, or log my chat data?
No — and it's built so it can't. Messages travel from the visitor's browser directly to your n8n endpoint. There is no stylchat server in the middle; your conversations, customer data, and API keys never leave your own infrastructure.
How many widgets and websites do I get?
Unlimited, on both counts. Build one widget per client, per brand, or per landing page — there's no seat count, no site license, and no upgrade tier waiting for you.
Where can I embed it? WordPress? Shopify?
Anywhere you can paste a script tag: WordPress, Shopify, Webflow, Squarespace, a React or Next.js app, or a plain HTML file. Drop the snippet before the closing </body> tag and the widget mounts itself.
How far can I customize the look?
Colors, avatars, corner radius, fonts, tooltips, starter prompts, greeting, placement, and light/dark are all in the visual editor with a live preview. Past that, the Advanced panel takes custom CSS.
Does it support right-to-left languages?
Yes — full RTL. Turn it on and the entire widget mirrors: layout, message bubbles, composer, and icons. Arabic, Hebrew, Farsi and Urdu render properly.
Can I pass information from my site into the workflow?
Yes. The widget can send a custom context payload with every message — the logged-in user, their plan, the page they're on, a cart ID. It arrives in n8n alongside the message, so your workflow can answer with real, personalized information.
What happens if my n8n workflow is slow or goes down?
The widget shows a typing indicator while it waits, and a clear error message if the request fails. Because stylchat isn't in the request path, your widget's uptime is exactly your n8n's uptime.
Do I get future updates?
Yes. Every future theme, feature, and update is included in the one-time payment — no extra charge, ever.
Support
Still stuck? We're happy to help.
- Check the FAQ above — most questions are answered there.
- Legal details live in the Terms of Service and Privacy Policy.
- Still need a hand? Email support@stylchat.com.