To add an AI chatbot to your website, create an assistant, train it on your website pages and documents, set its name, look, and rules, then paste its install code into your site, before the closing body tag or in your platform’s custom code setting. Publish the change, verify the installation, and test it the way a visitor would.
This guide walks through those steps with InsertChat, including the exact settings for HTML sites, WordPress, Shopify, Wix, and Webflow, the choice between a floating chat bubble and a chat embedded in the page, and fixes for the problems people run into. Installation details were checked against the InsertChat app in October 2026.
What do you need before you add a chatbot?
You need your website address, a list of the questions customers ask most, access to your site’s editor or someone who has it, and a plan for who answers when the chatbot hands a conversation to a person. Everything else gets set up in the steps below.
- Website address: the assistant learns from your pages.
- Extra content: price lists, policies, service menus, and FAQs that aren’t on the site.
- Site access: admin access to WordPress, Shopify, Wix, or Webflow, or a developer.
- A handoff owner: the person who gets notified when a visitor needs your team.
Step 1: Create the assistant from your website
Start by giving InsertChat your website address. During setup, it builds your company profile from the site, including your services, hours, contact details, and areas served, and you can check and edit each field.
Then add knowledge. The knowledge base can crawl your website or sitemap, read PDFs, Word files, and spreadsheets, and take questions and answers you write for anything the site doesn’t cover. Wait for each source to finish processing before you test answers that depend on it. The knowledge guide explains what to add first.
Step 2: Set the name, look, and greeting
Give the assistant a name visitors will see, an image or logo, and an accent color that matches your site. You can also set a chat title for the widget header and a separate logo for dark backgrounds. Website chat has its own greetings, which you edit in InsertChat and which update on your site without reinstalling the code.
For the floating bubble, choose the button color, whether it sits on the left or right, and how much space to leave at the bottom and side of the screen. Leave room for cookie notices, checkout buttons, and your own contact buttons, especially on phones.
Step 3: Write the assistant’s rules and handoff
Rules decide how the chatbot behaves when the answer isn’t just a fact. In InsertChat’s Guidance, you write three lists: things it should always do, things it should never do, and when to hand off to a person. Each rule can be up to 500 characters, and you can test a draft privately before applying it.
Useful first rules for a website chatbot:
- Always ask for the visitor’s name and email or phone before ending a conversation about a booking or a quote.
- Always offer to book an appointment when a visitor asks about availability.
- Never quote prices that aren’t in the knowledge base.
- Never ask for card numbers or passwords.
- Hand off to a person when a visitor asks for one, disputes an order, or asks for a custom quote.
The AI receptionist prompt examples have more than 70 rules to choose from, and the human handoff guide covers how handoffs reach your team.
Step 4: Choose a floating bubble or an embedded chat
InsertChat installs website chat two ways: a floating bubble that opens a chat window from the corner of every page, or an embedded chat that sits inside a section of one page. Most businesses use the bubble; the embedded chat suits a dedicated help or contact page.
| Floating bubble | Embedded chat | |
|---|---|---|
| Where it appears | A launcher button in the corner of each page with the code | Inside a container you place on the page |
| How visitors open it | They click the launcher; it stays closed until then | It’s visible as part of the page |
| Best for | Answering questions anywhere on the site | A help center, contact page, or booking page |
| What you install | One snippet on each page, or in a shared footer | A container where the chat appears, plus the script once on that page |
The floating launcher doesn’t pop up on its own. It stays closed until a visitor opens it, remembers when a visitor closes it, and doesn’t add repeated welcome pop-ups. For the embedded chat, the container looks like this, and the chat fills it:
<div id="my-ai-chatbot"></div>An iframe version exists as a fallback for sites that can’t run the install script. Use the script when you can.
Step 5: Install the code on your website platform
Copy the install code from your assistant’s website installation settings and add it to your site using your platform’s instructions below. The code is two short script tags: the first sets your assistant’s ID and display options, and the second loads the chat widget. The first part looks like this, with your own ID and settings:
ICG_BOT_ID = "your-assistant-id";
ICG_BOT_TYPE = "bubble";
ICG_BOT_BUBBLE_COLOR = "#E0E7FF";
ICG_BOT_BOTTOM_POSITION = "right";Always copy the full code from InsertChat rather than retyping it. If someone else manages your website, use the option to email the code to a developer; they don’t need your InsertChat login to install it.
Any HTML or custom website
Paste the code before the closing body tag in your page or in the shared layout or footer template that every page uses, then deploy the changed files. For the embedded chat, put the container where the chat should appear and load the script once on that page.
WordPress and WooCommerce
You have two options. Install the InsertChat plugin from WordPress.org and enter your assistant’s ID, which is the ICG_BOT_ID value in the install code. The plugin’s listing requires WordPress 4.7 or later and PHP 7.0 or later.
Or paste the full code with your site’s header and footer code tool, or a script-insertion plugin, and place it in the footer. Sites on WordPress.com need a plan that supports custom JavaScript; see WordPress.com’s guide to adding code to headers. WooCommerce stores run on WordPress, so either option adds the chat to your store pages.
Shopify
Open the theme code editor for the theme you want to change, add the code before the closing body tag in the storefront layout file, then save and publish that theme. Shopify’s help center explains how to edit theme code.
The code shows chat on your storefront pages, but it doesn’t install chat in checkout. Add your product details and store policies to the assistant’s knowledge, and send order changes and refunds to your support team. The Shopify page covers the storefront workflow.
Wix
In your site dashboard, open Settings, then Custom Code. Add the code to Body – end, select the pages where chat should appear, then publish and check the live site. Wix explains the setting in its guide to embedding custom code.
Webflow
Open Site settings, then Custom code, and paste the code into Footer code. Save, then publish to the domain you’ll verify. Webflow’s help center covers custom code in head and body tags.
Other site builders
Any site builder that lets you add custom code to the footer or before the closing body tag works the same way. Look for a setting named custom code, code injection, tracking code, or footer scripts.
Step 6: Verify the installation
After publishing, use Verify on your website in InsertChat. Enter the exact public page URL where the chat should appear, and InsertChat checks that page’s published HTML for the install code. The result tells you whether the code was found for this assistant, points to a different assistant, or isn’t in the page at all.
The check also shows whether the assistant is set to public, because a private assistant can’t start conversations with visitors. It reads the published HTML without running scripts, so if you load the code through a tag manager, a consent tool, or a login-protected page, confirm it in a real browser as well.
Step 7: Test it like a visitor
Open the published page on a computer and on a phone, and work through the conversations your customers will have. Fix the knowledge or the rules behind any wrong answer, then test the same question again.
- Ask your three most common questions in your own words.
- Ask about something you don’t offer.
- Ask something the knowledge doesn’t cover and check that the chatbot doesn’t guess.
- Book an appointment, if you’ve connected a calendar.
- Ask for a person and check that the conversation reaches your team in the shared inbox.
- On a phone-sized screen, check that the chat doesn’t cover checkout, contact, or cookie buttons.
- If you use a consent screen, check that the chat still opens after accepting or declining.
Why isn’t my website chatbot working?
Most installation problems come from code that isn’t on the published page, an assistant that isn’t public, or a launcher hidden behind other page elements. Use this table to find the fix.
| Problem | Likely cause | Fix |
|---|---|---|
| The chat doesn’t appear | Code saved but not published, or added to another theme or page | Publish the change and run Verify on your website with the exact URL |
| Verify says the code points to another assistant | Code copied from a different assistant | Copy the code from the right assistant and replace it |
| The launcher appears but visitors can’t start a chat | The assistant is private | Make the assistant public |
| The launcher covers a button | Bottom or side clearance too small | Increase the clearance and replace the code on your site |
| A color or position change didn’t apply | Appearance is stored in the installed code | Copy the updated code and replace it |
| A new answer isn’t showing up | The knowledge source is still processing | Wait for processing to finish; knowledge and greetings update without new code |
| No chat in Shopify checkout | Theme code doesn’t reach checkout | Expected; the chat covers storefront pages |
What should a website chatbot do besides answer questions?
A website chatbot should capture the visitor’s contact details, book appointments when they’re ready, and hand the conversation to a person when it should, with the whole conversation saved for your team. Answers alone don’t turn a visitor into a customer.
InsertChat’s website chat collects contact details as leads, books within your scheduling rules, lets visitors attach files and send voice messages, and passes conversations that need a person to your team. The same assistant can also answer phone calls, text messages, email, and WhatsApp from the same knowledge, so a visitor who chats on Monday and calls on Tuesday gets the same answers. Replying while the visitor is still on the page is the fastest possible speed to lead.
Add InsertChat to your website today
InsertChat plans start at $98 per month with 5,000 monthly credits shared across chat, calls, and other channels, and every paid plan includes one phone number for the AI receptionist. Credit use depends on the AI model you choose and the length of each conversation; the pricing page has the details.
New customers can try Pro free for 7 days with 500 credits (a card is required). Start your free trial with your website address, or explore the demo to see website chats in a sample workspace.