How to Add an AI agent to Any Website
This guide is for sites where you edit the code yourself: hand-built sites, static site generators, and apps built with React, Vue or Next.js. You add one script tag before the closing </body> tag and publish.
- Takes about 5 minutes
- One script tag
- Free plan, no card needed
Before you start
Check you have these ready. It saves a trip back halfway through.
- A ChatterEase account. You start on the Free plan, and you do not need a card to start.
- An AI agent trained on your own content, such as your website pages or files (PDF, Word, text). Ask it a few test questions in the dashboard first, so you know the answers are right before visitors see it.
- Access to your site's files or layout template, and a way to publish them: FTP, your host's file manager, or your usual deploy.
Not set up yet? See the plans and prices, then follow the quick start guide to create your AI agent and train it on your website.
How to add ChatterEase to HTML, step by step
Step 1: Copy your embed code from ChatterEase
Log in to ChatterEase and go to Dashboard, then AI agents. Open the agent you want on your site and click the Embed tab. Copy the code under "Embed with a widget script". It already has your agent ID in it.
<script async src="https://chatterease.com/embed/YOUR_AGENT_ID/widget.js"></script>Tip: The code above is an example. Copy yours from the Embed tab, because it has your own agent ID where this one says YOUR_AGENT_ID.
Step 2: Open your shared layout file
Most sites have one file that every page uses for the footer, such as a footer include, a layout template or index.html. Open that file. If every page is a separate file, you will repeat the next step on each one.
Step 3: Paste the script before </body>
Find the closing </body> tag and paste your ChatterEase script on the line just above it.
Tip: For a single-page app (React, Vue, Angular), add the script once in the root HTML template, such as index.html or your root layout. Do not put it inside a component that renders more than once, or you may get two launchers.
Step 4: Publish the change
Save the file and upload it, or deploy as you normally do. If you use a CDN or server cache, clear it.
Step 5: Check that it works
Open your live site in a private or incognito window, so you see it the way a new visitor does. Look for the ChatterEase launcher in the bottom-right corner (or bottom-left, if you moved it in your agent's settings). Click it and ask a question your pages answer, like your opening hours or your returns policy.
Let an AI assistant add it for you
If HTML has an AI assistant built in, or you use ChatGPT, Claude or Gemini, you can hand this job to it. Some assistants can make the change for you; others will tell you exactly where to click. Either way, the prompt below keeps it to one small change.
- 1. In your ChatterEase dashboard, open AI agents, pick your agent and go to the Embed tab. Copy the embed code.
- 2. Paste it into the box below. Your real code goes into the prompt in place of YOUR_AGENT_ID.
- 3. Copy the prompt and paste it into your AI assistant. Check its answer before you apply any change.
- 4. Open your live site in a private window and ask the AI agent a question to make sure it works.
Find it in your dashboard: AI agents, open your agent, then the Embed tab. We put it into the prompt for you. Nothing is sent anywhere.
Leave this empty and the prompt keeps YOUR_AGENT_ID. Replace it with your real code before you send it.
I want to add the ChatterEase chat widget to my HTML website. Please add the code below for me. If you can't make the change yourself, tell me exactly where to click and what to paste. The code: <script async src="https://chatterease.com/embed/YOUR_AGENT_ID/widget.js"></script> What I need: 1. Add it just before the closing </body> tag of every page, or once in the shared layout or footer template that every page uses. If this is a single-page app, add it once to the main index.html. 2. Load it on every page of the site, once. If this script is already there, don't add it again. 3. Paste it exactly as it is. Keep the async attribute and don't change the URL. 4. Don't change, move or delete any other code, theme settings or content. 5. When you're done, tell me what you changed and where, so I can undo it later. 6. Tell me how to check it works: open the live site in a private window and look for the chat button in the bottom corner. If my plan or my permissions don't allow custom code, tell me what I need instead of trying a workaround.
The prompt asks the assistant not to touch anything else and to tell you what it changed, so you can undo it. If it can't add custom code on your HTML plan, it should say so; the steps above still work.
If the widget does not show up
Work down this list. Most problems on HTML come from one of these, and each one takes a minute to check.
It only shows on one page
The script is in one page's file, not in the shared layout. Move it to the template every page uses, or add it to each page file.
You see two launchers
The script is loading twice, often because it is inside a component that renders more than once. Keep a single copy in the root HTML template.
The script is in the wrong place
Check the tag sits inside the <body>, just above </body>, and not inside an HTML comment or after </html>.
An old copy of the page is being served
Clear your CDN or server cache and reload the page in a private window.
Your site has a Content-Security-Policy
Some sites, security plugins and hosts send a Content-Security-Policy header that blocks outside scripts. It needs to allow https://chatterease.com in script-src (for the script) and in frame-src (for the chat window, which opens in a frame). If you open your browser's developer console, a blocked script shows up as a red error that mentions the policy.
An ad blocker or privacy extension in your own browser
Some blockers hide chat launchers. Try a private window with extensions turned off, a different browser, or your phone on mobile data.
The launcher shows, but the agent does not answer
Open the agent in your ChatterEase dashboard and check it says Active, not Paused. A paused agent shows as offline to visitors. Also make sure it has finished training on at least one source.
Still stuck? The ChatterEase docs cover setup in more detail, or book a demo and ask us about your setup.
Tips for HTML
Train it on the pages people ask about
Start with your pricing, services, FAQ and contact pages, plus any help docs. You can also upload files such as PDFs and Word documents.
Keep your agent trained after you change your site
Your AI agent answers from what it was trained on. When you change a page, open the Train tab and click Update now on that website source. On Growth and Pro you can also switch on Auto-update, and ChatterEase will refresh that source for you on a schedule.
There is also an iframe option
The Embed tab has a second code, an iframe, which puts the chat window straight onto the page in a fixed spot, without the launcher button. Most sites should use the script, which adds the launcher and opens the chat on click.
Collect leads and hand off to a person
Every plan lets a visitor ask for a person through a contact form. On Growth and Pro you can also turn on a lead capture form, a greeting bubble beside the launcher, and an email alert when someone asks for a person.
Lead capture, the greeting bubble and Auto-update come with Growth and Pro. Compare plans.
Why HTML sites use ChatterEase
- Works on any host, framework or hand-written site
- No package to install and no build step
- Add it once in a shared layout to cover every page
- Loads with the async attribute, so it does not hold up your page
- Launcher position, colour and greeting are set in your dashboard, not in code
- Opens full screen on phones, so it is easy to use on mobile
Questions about ChatterEase on HTML
Yes. Load the script once in your root HTML template or root layout, outside your component tree, and it shows on every route. Do not add it inside a component that re-renders, or it can be added more than once.
Not if you use a shared template. Most static site generators have a footer partial that every page includes, so one edit there covers the whole site. If your pages are separate files with no shared template, add it to each one.
The script loads with the async attribute, so the browser keeps building your page while it downloads. The chat window runs in its own frame, separate from your code. Keep it at the end of the body rather than in the head.
Yes. With the script method you choose where it loads by where you paste it. Add it to the pages you want instead of the shared layout, and leave it out everywhere else.
Allow https://chatterease.com in script-src, so the script can load, and in frame-src, so the chat window can open. Without both, the browser blocks the widget.
Yes. In your agent's settings you can move the launcher to the bottom-right or bottom-left corner and change its colour. Changes apply without editing your code again.
Delete the script tag from your layout or page files and publish the change. Clear any CDN cache so visitors get the new version.
Common on HTML
What to train your AI agent on first, by type of business.
Ready to add ChatterEase to your HTML site?
Start on the Free plan. No card needed.