How to Embed an AI Chatbot on Any Website Without Writing Code
Adding an AI chatbot to your website used to require a developer, a cloud deployment, a custom frontend, and weeks of work. Today, you can do it in under 20 minutes — without touching a single line of code.
In this guide, you'll learn exactly how to embed a working AI chatbot on any website using a no-code setup. Whether your site runs on WordPress, Shopify, Webflow, Wix, or plain HTML, the process is the same.
Why Most Chatbot Tools Fall Short
Before jumping in, it's worth understanding why most "add a chatbot to your website" tutorials leave people frustrated.
The most common approach is to use a closed SaaS chatbot platform — think Intercom, Drift, or Tidio. These tools look great in demos but they have serious limitations:
- You're locked into their AI model and training system
- Monthly costs scale aggressively with conversation volume
- You can't connect to your own backend, CRM, or custom data sources
- The widget design is fixed or only slightly customizable
A better approach is to bring your own AI backend and use a dedicated widget tool to handle the frontend. This gives you full control over the AI logic, your data, and your costs — while still getting a polished, professional chat experience.
What You'll Need
For this tutorial, we'll use:
- An AI backend — this is the "brain" that processes messages and generates replies. You can use n8n (automation workflows), OpenAI (direct GPT connection), Flowise (visual LLM builder), or Dify. We'll cover each option briefly.
- BotChap — the no-code chat widget builder that connects to your backend and generates an embeddable widget (free plan available)
- Your website — any platform works
Step 1: Choose Your AI Backend
This is the most important decision. Your backend is what actually handles the conversation logic. Here are the most popular options:
Option A: n8n (Best for automation agencies and complex workflows)
n8n is an open-source workflow automation platform. You can build conversation flows that pull from databases, send emails, create CRM records, and much more — all triggered by a user's chat message. It's the most flexible option and ideal if you're already using n8n.
Setup: Create a workflow with a Webhook trigger. Your workflow receives the user message, processes it through an AI node (like OpenAI or a local model), and returns a response via the Respond to Webhook node.
Option B: OpenAI (Best for knowledge-base chatbots)
If you have an OpenAI account, you can use OpenAI Chat Completions with a custom system prompt. BotChap connects to it directly using your API key and keeps the key on the server — it's never exposed to visitors.
Setup: Get your OpenAI API key, choose a model (gpt-5.4 is recommended), and write a system prompt that defines your bot's persona and knowledge scope.
Option C: Flowise (Best for visual LLM pipeline builders)
Flowise is an open-source, self-hosted tool for building LLM-powered applications visually. It's similar to n8n but specifically designed for AI chains and agents. If you prefer a drag-and-drop interface for building AI logic, Flowise is a great choice.
Setup: Build your chatflow in Flowise and copy the prediction endpoint URL. BotChap connects to it via that URL.
Option D: Dify
Dify is a developer platform for building LLM apps. It supports RAG pipelines, prompt engineering, and multi-model setups. A good choice if you want a managed platform rather than self-hosting.
For this guide, we'll use n8n as the example, but the steps in BotChap are nearly identical for all backends.
Step 2: Prepare Your Backend
Whichever backend you choose, you need one thing from it: a URL that accepts a POST request and returns a text response.
- For n8n: this is your Webhook node's production URL
- For OpenAI: provide your API key — BotChap handles the connection
- For Flowise: this is your Flowise instance's prediction endpoint URL
- For Dify: this is your Dify API endpoint URL
Make sure your backend is live and responding before moving to the next step.
Step 3: Build Your Widget in BotChap
Go to BotChap and create a free account.
- Click Create New Widget.
- Select your backend type (n8n, OpenAI, Flowise, Dify, or custom REST API).
- Enter your backend URL or API credentials.
- Configure the response path — this tells BotChap where to find the reply text in your backend's response.
Customize the Widget
This is where you make it yours. BotChap gives you control over:
- Colors and theme — match your site's brand exactly
- Bot name and avatar — give it a name and personality
- Animated trigger button — choose from pulse, bounce, shake, wave, glow, and more
- Welcome message and suggested replies — guide users toward the most useful queries right from the start
- Widget position — bottom-right, bottom-left, or inline
- GDPR consent screen — required for EU visitors
Take your time with customization. A widget that matches your site's design gets significantly more engagement than a generic one.
Step 4: Test It
Before embedding, use BotChap's built-in Preview mode to have a real conversation with your widget.
Type a few different messages and verify:
- The bot responds correctly and within a reasonable time (under 5 seconds is ideal)
- The response formatting looks clean in the chat window
- Edge cases work — what happens if the user sends an empty message or a very long one?
If the bot isn't responding, the most common issues are:
- Your backend URL has changed or the workflow isn't active
- The response path is mapped incorrectly
- Your API key has expired or hit its rate limit
Step 5: Embed on Your Website
Once you're happy with how it works, click Publish. BotChap generates a single embed snippet — one <script> tag — that you paste into your website.
<script
src="https://www.botchap.com/widget.js"
data-id="your-unique-widget-id"
defer>
</script>
Here's how to add it on the most popular platforms, all without coding:
WordPress: Use the "Insert Headers and Footers" plugin (free). Go to Settings → Insert Headers and Footers and paste the script in the Footer section.
Shopify: Go to Online Store → Themes → Edit Code → theme.liquid. Find the closing </body> tag and paste the script just above it. Click Save.
Webflow: Go to Project Settings → Custom Code → Footer Code and paste the script there. Publish your site.
Wix: In the editor, go to Settings → Custom Code and click + Add Custom Code. Paste the script, choose body, and apply to All Pages.
Squarespace: Go to Settings → Advanced → Code Injection and paste the script in the Footer box.
Plain HTML: Paste the script just before the closing </body> tag.
What You've Built
After following this guide, you have:
- An AI chatbot powered by your own backend (n8n, OpenAI, Flowise, or Dify)
- A branded, animated chat widget that matches your website's design
- A fully embedded, mobile-responsive chat experience with zero code written
The total cost depends on your backend choice. BotChap has a free plan. n8n and Flowise can be self-hosted for near-zero cost. OpenAI charges per API call, but at typical website traffic levels, the monthly bill stays very manageable.
Next Steps
Now that your widget is live, here are a few things worth setting up:
- Add suggested replies to the welcome message — this increases the number of users who actually start a conversation
- Create a second widget for a specific page (like a pricing page) with a more targeted system prompt
- Connect your backend to your CRM — if you're using n8n, you can automatically log every conversation and capture lead details without any extra work
The combination of a powerful AI backend and a polished frontend widget is what separates a professional chatbot implementation from a hobbyist one. Now you have both.