How to Add a Chat Widget to Your n8n Workflow (Step-by-Step)
You've built a powerful automation workflow in n8n. Your AI agent responds intelligently, handles conversations, and integrates with your tools. But when it comes time to put it in front of real users — on a website, a client portal, or a landing page — you hit a wall.
n8n's built-in chat interface is functional, but it's not something you'd hand to a client or embed on a professional website. It looks like a developer tool, not a product.
That's exactly what this guide solves. By the end, you'll have a fully animated, branded chat widget connected to your n8n workflow and embedded on any webpage — without writing a single line of code.
What You'll Need
Before you start, make sure you have the following:
- An active n8n instance (self-hosted or n8n Cloud)
- A workflow with a Webhook trigger node already configured
- A website or webpage where you want to embed the widget (any platform works — WordPress, Webflow, plain HTML, Shopify, etc.)
- A BotChap account
No coding experience is required. This entire process takes about 10–15 minutes.
Step 1: Set Up Your n8n Webhook Node
If you haven't already, your n8n workflow needs to start with a Webhook trigger. This is the URL that BotChap will send user messages to.
- Open your n8n workflow.
- Add a Webhook node as the trigger (or use an existing one).
- Set the HTTP Method to POST.
- Set the Response Mode to "Using 'Respond to Webhook' node" — this lets your workflow send a reply back to the widget in real time.
- Copy the Production Webhook URL. It will look something like:
https://your-n8n-instance.com/webhook/your-unique-id
Make sure your workflow ends with a Respond to Webhook node that returns the AI-generated response as the body. The response should be a plain text string or a JSON object with a text or output field.
Tip: Test your webhook in n8n's editor first by sending a sample POST request with a
messagefield. Once it responds correctly, you're ready to connect it to BotChap.
Step 2: Create Your Chat Widget in BotChap
Now head to BotChap and create your widget.
- Sign in to your BotChap account and click Create New Widget.
- In the Backend section, select n8n as your AI provider.
- Paste your n8n Webhook URL into the webhook field.
- Map the message field: BotChap sends the user's message as
chatInput— make sure your n8n workflow reads frombody.chatInput. - Map the response field: BotChap reads the reply from
output,text, orresponsein that order.
Customize the Appearance
This is where BotChap stands out from every other option. You can customize:
- Widget colors — match your brand or your client's brand exactly
- Chat bubble animation — choose from pulse, bounce, wave, and more to catch visitor attention
- Avatar and name — give your bot a personality (name, profile image)
- Welcome message — the first message users see when they open the chat
- Trigger button position — bottom right, bottom left, or inline
- Widget size — compact or expanded
Take a few minutes here. A well-branded widget dramatically increases engagement compared to a generic one.
Step 3: Test the Connection
Before embedding, always test the live connection between BotChap and n8n.
- Inside the BotChap widget editor, click Preview.
- Type a test message in the chat window.
- Watch your n8n workflow execution log — you should see a new execution triggered.
- The bot's reply should appear in the widget within a few seconds.
If the reply doesn't appear, check:
- That your n8n workflow is set to Active (not just in test mode)
- That the Respond to Webhook node is correctly configured
- That BotChap is reading the correct response field from your workflow
Step 4: Embed the Widget on Your Website
Once everything is working, click Publish in BotChap. You'll get a small embed snippet — a single <script> tag.
Copy this snippet and paste it into the <body> of any webpage where you want the widget to appear.
<script
src="https://www.botchap.com/widget.js"
data-id="your-widget-id"
defer>
</script>
That's it. The widget loads automatically and is fully responsive on mobile.
Platform-Specific Instructions
WordPress: Paste the script in your theme's footer.php file, or use a plugin like "Insert Headers and Footers" to add it sitewide without touching code.
Webflow: Go to Project Settings → Custom Code → Footer Code and paste the snippet there.
Shopify: Go to Online Store → Themes → Edit Code → theme.liquid and paste before the closing </body> tag.
Plain HTML: Paste the script before the </body> tag of your HTML file.
Why This Approach Works Better Than Alternatives
Many n8n users try to solve this problem by using the built-in n8n chat trigger, which creates a raw chat page hosted by n8n. The problem is that this solution:
- Looks generic and unbranded
- Can't be embedded inside your own website
- Has no animation or engagement features
- Exposes your n8n instance URL to visitors
Other developers build a custom React or Vue frontend from scratch — which works, but requires significant development time and ongoing maintenance.
BotChap gives you a production-ready, animated, embeddable widget in minutes, with no code and no hosting to manage. It's the missing frontend layer for n8n workflows.
Common Use Cases
Once your widget is embedded, here are some of the workflows people commonly connect it to:
- AI customer support — answer product questions using an OpenAI or Flowise agent behind an n8n webhook
- Lead qualification — collect visitor info and push it directly to a CRM like HubSpot or Airtable via n8n
- Appointment booking — let users describe what they need and trigger a booking flow in n8n
- Internal tools — embed a company knowledge bot on an internal dashboard for your team
Summary
Adding a professional chat widget to your n8n workflow takes four steps: configure your n8n webhook, connect it to BotChap, customize the widget's appearance, and paste one script tag on your site. The whole process takes about 15 minutes and the result is a branded, animated chat experience that your clients will actually want to use.