How to add an AI chatbot to your website with one line of code
Add an AI chatbot to your website by pasting one script tag before the closing body tag. Step by step for HTML sites, WordPress, Shopify and Tag Manager.
To add an AI chatbot to your website, build the bot from your site address, copy its script tag and paste that one line before the closing body tag of your pages. On WordPress, Shopify or Tag Manager the same line goes into the footer, theme file or a custom HTML tag.
The technical part really is one line. The work that decides whether visitors like the bot happens before and after that line: which content it learns from, how it introduces itself, what it may do and who picks up when it cannot help. This guide walks through all of it in the order you would do it.
Before you paste anything
Spend fifteen minutes on your content first. The chatbot answers from what your site says, so outdated pages become outdated answers.
- Open your delivery, returns, pricing and contact pages and check that they are current.
- Collect the documents customers ask about that are not on the site, such as a product manual or a service agreement, as PDF, DOCX or TXT files.
- List the ten questions your team answers most often. You will use them to test the bot.
- Decide who receives conversations the bot hands off, and which email inbox they should land in.
The five steps from address to live chatbot
| Step | What you do | Time |
|---|---|---|
| 1. Build | Enter your website address, the crawler reads your sitemap and pages | About a minute |
| 2. Add knowledge | Upload files and add help center or FAQ addresses | A few minutes |
| 3. Design | Set color, avatar, greeting, tone and quick replies | A few minutes |
| 4. Test | Ask your ten common questions in the test chat | Ten minutes |
| 5. Install | Copy the script tag, paste it on your site, press Go live | Two minutes |
Our how it works page shows each of these screens. Below is what to pay attention to in every step.
Step 1. Build the bot from your address
Type the address of your homepage. The crawler follows your sitemap and internal links, reads the text of each page and splits it into passages it can search later. You see the list of pages it found. Remove pages that should never be quoted, such as old campaign pages or internal test pages.
Step 2. Add files and extra sources
Upload the documents you collected earlier. Add the address of your help center if it lives on a separate domain. Every source appears in the knowledge list, and the bot keeps it fresh with automatic re-sync, weekly on the entry plan and daily on higher plans.
Step 3. Design the widget
The widget should look like part of your site. Pick your brand color, upload an avatar, write a greeting in your own voice and add up to four quick replies such as "Delivery times" or "Book a call". Choose a tone (friendly, professional or concise) and add instructions in plain words, for example "Always mention that installation is included in the price".
Step 4. Test with real questions
Use the test chat in the panel. Ask your ten common questions, then one your site does not answer. Check that each answer has a source link and that the unknown question produces an offer to contact your team rather than a guess. Fix the content gaps you find before going live.
Step 5. Paste the line and go live
The install screen gives you a single line that looks like this:
<script src="https://chatbotwidget.ai/w.js" data-bot="cbw_your_bot_key" async></script>Paste it before the closing body tag on every page where the chat should appear. It loads asynchronously, so it does not hold up the rest of your page. When the widget loads for the first time, the panel shows that the bot was seen on your site.
Writing the greeting, quick replies and instructions
The first message is the only one every visitor reads, so it deserves more care than any other line in the setup. A good greeting says what the bot can do in one sentence and invites a specific question. "Hi, I can answer questions about delivery, returns and sizing, or help you find the right product" works better than "How can I help you today", because the visitor immediately knows what to ask.
Quick replies are buttons under the greeting. Use them for the questions you hear most, phrased the way a customer would say them: "Where is my order", "Do you ship abroad", "Book a call". Four is the maximum, and three is often better. Change them after the first week based on what visitors actually type.
Instructions are plain sentences that shape every answer. Keep them short and concrete.
- "Answer in two or three sentences, then offer the link."
- "When someone asks about prices, mention that installation is included."
- "Never promise delivery dates, only the delivery windows stated on the delivery page."
- "If the visitor mentions a business with more than ten people, suggest booking a call."
Instructions guide the tone and the next step. They do not replace content: if a fact matters, put it on a page so the bot can cite it.
Choosing what the bot learns from
More content is not always better. A bot that reads every archived press release and every expired promotion will sometimes quote them. Keep the knowledge list focused on pages that are true today.
| Include | Exclude |
|---|---|
| Product and service pages | Expired campaign landing pages |
| Pricing, delivery, returns, warranty | Old news and press releases |
| Help center and FAQ | Internal test or draft pages |
| Manuals and guides as files | Documents with personal data |
Where to paste the line on popular platforms
| Platform | Where the line goes |
|---|---|
| Plain HTML site | In your shared footer template, just before </body> |
| WordPress | Appearance, Theme File Editor, footer.php before </body>, or the footer box of any header and footer plugin |
| Shopify | Online Store, Themes, Edit code, theme.liquid, paste before </body>, Save |
| Tag Manager | New tag, Custom HTML, paste the line, trigger All Pages, Submit and publish |
| Webflow, Wix, Squarespace | The custom code or code injection settings of the site, footer field |
For detailed walkthroughs, see the WordPress chatbot and Shopify chatbot guides, which also cover order lookup for stores and caching plugins on WordPress.
Make sure the widget only runs where you want it
The widget answers only on the domain of your bot and on any extra domains you allow in the design settings. If someone copies your script tag to another site, the chat does not respond there. Add your staging domain to the allowed list if you want to test on it before launch, and remove it later.
What to do in the first week
Installation is the start, not the end. The first week tells you most of what the bot needs.
- Read the conversations every day. Look for answers that were technically right but unhelpful.
- Work the unanswered questions list. Each item is content your site is missing. Add a paragraph or a page, and the next visitor gets an answer.
- Check handoffs. Make sure the person who receives them replies quickly. A bot that hands off into silence is worse than no bot.
- Turn on actions when the basics work. Once the answers are reliable, connect actions such as tickets, CRM leads, booking links or an order status API call.
- Adjust quick replies. Replace quick replies nobody clicks with the questions visitors actually ask.
Troubleshooting the most common install problems
| Symptom | Likely cause | Fix |
|---|---|---|
| No chat button appears | Line pasted in a template that is not used on that page | Paste it in the shared footer or use Tag Manager on All Pages |
| Button appears on staging but not live | Page cache serving an old version | Clear the cache of your site or caching plugin |
| Chat opens but does not answer | Domain not on the allowed list, or bot paused | Check the domain in design settings and the bot status |
| Answers miss new content | Page added after the last sync | Run a manual re-sync from the knowledge screen |
Not sure which chatbot to install in the first place? Start with our guide to the best AI chatbot for a website, then compare plans on the pricing page.
Frequently asked questions
Do I need a developer to add a chatbot to my website?
No. If you can edit your site footer, use a header and footer plugin or add a tag in Tag Manager, you can install the chatbot yourself in a couple of minutes.
Will the chatbot slow down my website?
The script loads asynchronously after your page content, and the chat window opens in its own frame, so it does not block your pages from rendering.
Can I show the chatbot on some pages only?
Yes. Paste the line only in the templates of the pages where it should appear, or use a Tag Manager trigger limited to those page paths.
Does the chatbot update itself when I change my site?
Yes. It re-syncs your pages automatically, weekly or daily depending on your plan, and you can start a manual re-sync at any time.
Can I install the same bot on several domains?
You can allow extra domains for one bot, for example a shop and a help center. Separate websites with separate content work better as separate bots, which the Multi site plan covers.
