How to Add a Chatbot to Your Website (Any Platform)

TL;DR. To add a chatbot to your website, create a bot in a chatbot tool, give it your content to answer from, copy its embed code (usually one <script> tag) and paste it into your site’s footer or custom code setting. On WordPress, Shopify, Wix, Squarespace and other builders that’s a settings screen, not a plugin. In React or Next.js it’s a component. The whole job takes 10 to 30 minutes, and most of that is checking the bot’s answers.

• Step 1: pick a tool and create the bot.
• Step 2: train it on your site, docs and FAQ.
• Step 3: embed it with one script tag, Google Tag Manager or a framework component.
• Step 4: test it, then set up notifications and human handoff.

The examples use Feedbot, which we make, but the steps are the same for almost any chatbot that gives you an embed code. Platform-specific guides are linked in the table below.

Step 1: Choose what kind of chatbot you need

Before installing anything, decide what the bot is for. It changes which tool you pick.

For most small business and SaaS sites, the first three matter most. Our guide to chatbots for small business goes deeper on choosing.

Step 2: Create the bot and train it on your content

A chatbot is only as good as what it knows. Modern AI chatbots answer from a knowledge base you provide, using a technique called retrieval-augmented generation. (If you want the details, see our explainer on the RAG chatbot.)

In Feedbot, it looks like this:

1. Sign up and create a bot from your site URL.
2. Open Bot → Knowledge and add sources: a website page, the whole site, a sitemap.xml, files (PDF, DOCX, Markdown, TXT, CSV), plain text or an FAQ in Q: / A: form. The knowledge base docs list the limits per plan.
3. Open Bot → Behavior and fill in the business profile: facts the bot should always know, such as prices, contacts and opening hours. Add custom instructions for tone and topics to avoid.

What to include, in order of value:

• Pricing and plans, shipping and returns, refund policy.
• Your top 20 support questions with clear answers. Pull them from your inbox.
• Product or service pages, setup and how-to guides.
• Contact details and when a person is available.

What to leave out: outdated pages, internal notes, anything you wouldn’t want quoted to a customer.

On Feedbot’s free plan the knowledge base is text and FAQ you add yourself. Website import and file uploads start on the $5 Starter plan. See pricing.

Step 3: Embed the chatbot in your website

This is the part people search for, and it’s the shortest. Almost every chatbot gives you a snippet like this one:

<script src="https://w.feedbotai.com/v1/feedbot.js" data-bot-id="YOUR_BOT_ID" async></script>

You find it in Dashboard → Bot → Install. Paste it right before the closing </body> tag of every page, or in whatever setting your platform has for site-wide footer code. The async attribute means it won’t block your page from loading.

Where to paste it on each platform

There is no Feedbot plugin or app to install on WordPress, Shopify or Wix. You paste the script through each platform’s own custom code feature, which also means there’s nothing to update later. Some builders only allow custom code on paid plans; each guide notes the requirement.

React and Next.js

In a Next.js App Router project, load the script in your root layout:

import Script from "next/script";

<Script
  src="https://w.feedbotai.com/v1/feedbot.js"
  data-bot-id="YOUR_BOT_ID"
  strategy="lazyOnload"
/>

Or install the React package, which wraps the same loader in a component and a useFeedbot() hook for opening the chat or sending a message from your own buttons:

pnpm add @feedbotai/react

import { FeedbotWidget } from "@feedbotai/react";

<FeedbotWidget botId="YOUR_BOT_ID" />

If your users log in, you can pass their id and email with a hash computed on your server so the bot knows who it’s talking to. See Identify users.

Embedding the chat inside a page instead of a floating button

A floating button in the corner is the default. If you want the chat to sit inside a page, for example on a Help or Contact page, use inline mode:

<div id="chat" style="height: 560px"></div>
<script
  src="https://w.feedbotai.com/v1/feedbot.js"
  data-bot-id="YOUR_BOT_ID"
  data-mode="inline"
  data-container="#chat"
  async
></script>

No access to the site’s code?

Use a hosted chat link instead. Every Feedbot bot has one, like https://w.feedbotai.com/chat/?bot=YOUR_BOT_ID. Link to it from a “Chat with us” button, an email signature, a QR code or a mobile app’s web view. See Chat link.

Step 4: Test the chatbot before you announce it

Open your site in a private browser window and run through this list:

1. The button appears on desktop and on a phone. (On narrow screens the chat usually opens full screen.)
2. Ask your top 10 real questions, phrased the way customers write them, typos included. Check each answer against your docs.
3. Ask three questions your content doesn’t cover. The bot should say it doesn’t know and offer a next step, not invent an answer.
4. Ask in another language if you have international visitors.
5. Ask for a human and make sure the handoff reaches you.
6. Check the conversation appears in your dashboard inbox.

Then restrict where the bot can run. In Feedbot that’s Bot → Install → Allowed domains: list your domains so nobody can copy your snippet and use your bot and quota on their site.

Troubleshooting

After launch: notifications, handoff and leads

A chatbot that nobody watches turns into a dead end. Set up three things in the first week:

• Notifications. Connect Telegram, Slack, Discord or email so important conversations and new leads reach you. Feedbot can filter by priority and category so you’re not pinged for every “hi.”
• Human handoff. Let the bot pass a conversation to a person when the visitor asks or the bot can’t help. In Feedbot your team replies from Telegram or the inbox, and replies go out by email if the visitor has left. See Human handoff.
• A weekly review. Read the conversations the bot couldn’t answer and add the missing content. This is where answer quality really improves.

If you’re still deciding whether you need a bot at all or a person answering, our post on chatbot vs live chat compares the two.