How to Add an AI Chatbot to Your Website

Most guides make this sound like a coding job. It is mostly a content job. The code is one line you paste once; what decides whether visitors get useful answers is what the bot reads, how you test it, and what happens when a question goes past what it knows.

Here are the seven steps, with where to paste the code on six kinds of site, checked on each platform’s own help centre on 14 October 2026. Where EzyConn, the tool we make, has a screen for a step, we name it.

The seven steps at a glance

1. 1

   Decide what the bot should answer. List what customers ask most, and what needs a person.

2. 2

   Give it your content. Pages, files, written answers and exact answers.

3. 3

   Copy the embed code. Usually one script tag.

4. 4

   Paste it before the closing body tag. Or into your website builder’s footer code setting.

5. 5

   Test it like a customer. In a private window and on a phone.

6. 6

   Turn on the hand-over to a person. Decide who gets what the bot passes on.

7. 7

   Check the first week. Ten minutes a day on what it could not answer.

Step 1: Decide what the bot should answer

Start with your inbox, not the chatbot settings. Go through last month’s chats, emails and call notes and write down every question that came up more than once: opening hours, delivery times, prices, returns, whether you cover an area, how to book. Then sort the list into three groups.

• Questions it answers alone. Anything with one correct answer that is already written down, such as your returns window or delivery zones.
• Questions it starts and a person finishes. A quote that depends on photos, a complaint, a refund that needs a decision. The bot gathers the details and brings in your team.
• Questions that need your own systems. “Where is my order?” needs a lookup in your shop or booking software. In EzyConn that runs through an AI Action connected to your own system, from the Starter plan. Until a connection like that is in place, route these to a person.

Keep the list. It is your content checklist in step 2 and your test script in step 5.

Step 2: Give it your content

An AI chatbot of this kind answers from material you give it. Most tools accept four kinds, and a good setup uses all four.

• Website pages. Enter your address, let the tool find the linked pages, and keep the ones it should learn from. Leave out old posts that quote last year’s prices.
• Files. Price lists, menus, product guides, terms. A scanned PDF is a picture of text, so upload a text version instead.
• Answers you write. What your team knows that the website never says: how you handle a late delivery, which areas you cover on Saturdays.
• Exact questions and answers. For replies that must read the same way every time: refund terms, safety advice, anything legal.

In EzyConn the knowledge screen takes all four. It reads a whole website (you keep the pages you want), files in PDF, Word (.docx), plain text, Markdown or CSV, text you write, and exact questions and answers, which are used first, word for word. It can also read a WooCommerce shop’s products, prices and stock. After you change a price or a policy on the site, press read it all again to re-read the pages in one click; content behind a login goes in as a file or a written answer. The AI agent page explains each source.

Fix contradictions first. If your FAQ says 14 days for returns and your terms say 30, the bot can only repeat what it reads.

Step 3: Get the embed code

Every website chatbot reaches your pages the same way: a small script that loads the chat window, usually copied as one script tag. EzyConn’s looks like this, with your own token in place of YOUR_TOKEN:

<script src="https://api.ezyconn.com/api/v1/widget/script.js" data-token="YOUR_TOKEN" async></script>

The data-token tells the script which assistant to load, so copy it rather than typing it, and async lets your page finish loading without waiting for the chat. In EzyConn, open Chat widget, then Install, and copy the code. The same screen also offers code that puts the chat inside a page, such as a contact page.

Step 4: Paste the code on your platform

The code goes in once, somewhere every page shares, as close to the closing </body> tag as the platform allows. Each website builder gives that place a different name.

WordPress

EzyConn’s WordPress install loads the code on every page through wp_footer, so it works with block themes, classic themes and page builders alike:

1. Copy the code. In EzyConn, open Chat widget, then Install, and copy the code. It carries your assistant’s own token.
2. Add it to the footer. Paste it into your snippets plugin’s footer box, or add the function below to the end of functions.php from Appearance, Theme File Editor.
3. Save and clear caches. Save, then clear any caching plugin so visitors get the page with the chat on it.
4. Check it is working. Open your site in a browser, then go back to the Install screen in EzyConn, which checks that a page on your site loaded the chat.

// functions.php, or a code snippets plugin
function add_ezyconn_widget() {
  ?>
  <script src="https://api.ezyconn.com/api/v1/widget/script.js" data-token="YOUR_TOKEN" async></script>
  <?php
}
add_action('wp_footer', 'add_ezyconn_widget');

If you use functions.php, put the function in a child theme so theme updates keep it. On WordPress.com, installing a plugin needs a paid plan (Personal, Premium, Business or Commerce), according to WordPress.com’s plugin guide (checked 14 October 2026). The full walkthrough, with WooCommerce, is in EzyConn’s WordPress and WooCommerce guide.

Shopify

1. Copy the code. In EzyConn, open Chat widget, then Install, and copy the code.
2. Open your theme’s code. In Shopify, go to Online Store, then Themes. Open the actions menu on your live theme (Shopify’s help shows it as three dots) and choose Edit code.
3. Paste it into theme.liquid. Open theme.liquid in the layout folder and paste the code just above the closing </body> tag. Save the file.
4. Check it is working. Open your store in a browser, then go back to the Install screen in EzyConn, which checks that a page on your site loaded the chat.

Shopify covers the editor in its guide to editing theme code (checked 14 October 2026). After a theme switch, paste the code into the new theme too. Shopify exports products as a CSV file, which EzyConn reads. More in EzyConn’s Shopify guide.

Wix

1. Check the site is ready. Wix asks for a published site with a connected domain, and connecting your own domain needs a Premium or Studio site plan.
2. Open Custom Code. In your site’s dashboard, go to Settings, then Custom Code in the Development & integrations section.
3. Add the code. Click + Add Custom Code, paste the code, and name it something you will recognise.
4. Choose where it runs. Under Add Code to Pages, choose All pages. Under Place Code in, choose the placement at the end of the body. Click Apply.

Sources: Wix’s help articles on embedding custom code and domains and site plans, checked 14 October 2026.

Squarespace

1. Check your plan. Squarespace lists code injection on its Core, Plus and Advanced plans and some legacy billing plans.
2. Open Code Injection. Open the Pages panel, click Custom Code at the bottom, then Code Injection. On a version 7.0 site, these options sit under Website Tools.
3. Paste it into the Footer field, which Squarespace injects before the closing </body> tag on every page, and click Save.

Sources: Squarespace’s guides to code injection and the Pages panel, checked 14 October 2026.

Webflow

1. Check your plan. Webflow allows site-wide code when the site has an active Site plan, or belongs to a Core, Growth, Agency or Freelancer Workspace.
2. Open the settings. Go to Site settings, then the Custom code tab.
3. Paste it into Footer code, which Webflow places before the closing </body> tag, and click Save changes.
4. Publish. Custom code shows in preview and goes live when you publish the site.

Source: Webflow’s custom code guide (updated 2 September 2026, checked 14 October 2026), which also advises scripts before the closing body tag so pages load first.

Any other site, or plain HTML

Paste the code just above </body> in the file every page shares: a footer include, the base layout of a static site generator, or index.html in a single-page app. If each page is its own HTML file, the code goes into each one.

Step 5: Test it like a customer

Open your site in a private window and on your phone, then work through your list from step 1.

• Ask your common questions in customers’ words, typos included, and check each answer against the page it should come from.
• Ask something it should not know. A well-set-up bot says it lacks the information and offers a person.
• Ask for a person outright, and follow the request to whoever receives it.
• Open a page deep in the site to confirm the code loads everywhere. On a phone, if the chat button covers one of your own buttons, move it to the other corner.

In EzyConn, the Install screen checks four things as you go: the code has a token, a page on your site loaded the chat, someone opened a conversation, and it answered one. It also has an Ask it a test question button. When nothing in your content answers a question, the agent replies: “I don’t have that specific information right now. Would you like me to connect you with a support agent who can help?” You can change that wording.

Step 6: Turn on the hand-over to a person

Every gap in your content should lead to a person, not a dead end. Before launch, decide who receives the request and what the customer sees when nobody is free. Our comparison of live chat and chatbots covers how teams split the work.

In EzyConn this lives under AI & handover, where you choose Answer and hand over, Answer only or People only. With Answer and hand over, the agent offers a person when your content runs out or the customer asks. When the customer accepts, the AI steps back, a teammate is assigned and notified, and the request reaches your inbox and Slack, or Microsoft Teams (beta), with the whole conversation. The customer sees “Thanks, I’m connecting you to a support specialist now. Please hold for a moment.” If nobody is free: “All our agents are currently busy. We’ll notify you shortly.”

Your teammate replies from the portal or the Slack thread, and Hand back to AI returns the conversation. Requests can be shared out manually, round-robin, to the least busy or to the last active person, and a pre-chat form can ask for an email first so you can follow up later. How EzyConn works shows the hand-over step by step.

Step 7: Check the first week

Real visitors ask things you did not think of, in words you would not use. Set aside ten minutes a day for the first week.

In EzyConn, open Knowledge, then Unanswered. Questions the agent could not answer that a teammate then answered wait there, ready to approve as a written answer, beside the topics it does worst on. Reports add how many conversations the AI handled, escalated or left to a person, first reply times and the reasons questions went unanswered, with CSV export.

If the chat does not appear

Work through these checks in order.

1. Confirm the code is on the live page. Right-click the page, choose View Page Source and search for script.js. If it is missing, paste the code into the live, site-wide setting and publish. It should sit before </body> as its own tag, outside any other script.
2. Clear every cache. Caching plugins and CDNs serve the old page until cleared. WP Rocket’s Delay JavaScript execution can hold some elements back until the visitor interacts; its troubleshooting guide (checked 14 October 2026) lets you add the chat script to Excluded JavaScript Files so the chat shows at once.
3. Use the site-wide footer setting rather than a page builder’s text or HTML block, which can strip or hold back scripts. Squarespace notes that code in a code block may not appear while you are logged in (Squarespace, checked 14 October 2026), so test in a private window.
4. Add your domain to the allow-list. EzyConn’s Install screen keeps a list of websites allowed to load the chat; while it is empty, any website may. If you have filled it in, add both example.com and www.example.com, or *.example.com for every subdomain.
5. Check the token and your ad blocker. The pasted data-token should match the Install screen’s. Then test once with ad blockers off.

Where EzyConn fits

EzyConn is an AI agent built for this job. It answers visitors from your website, files and exact answers in multiple languages, says so when it does not know, and offers a person, with the conversation arriving in your inbox and Slack. The website chat goes live in about 3 minutes, and the same agent can answer on WhatsApp, email, Telegram and an inbound phone line, each connected separately.

The Free plan includes the AI agent, needs no card and does not expire, so you can run every step here before paying anything. See the website AI chatbot in action, read what the free AI chatbot for your website includes, compare plans on the pricing page, or start free and paste the code today.

Adding a chatbot to a website: common questions

Keep reading

• How much an AI chatbot costs in 2026
• A free AI chatbot for WordPress
• A free AI chatbot for Shopify stores
• How a chat widget affects your website’s speed
• A fuller testing checklist for AI chatbots