How to Add a Chatbot to Your Website
Adding a chatbot is one script tag, pasted once. What the embed code does, where it goes on WordPress, Webflow, Shopify, Wix and Squarespace, which pages should show it, and what to check when the bubble does not appear.
- Chatbot
To add a chatbot to your website, you copy a short piece of code from your chatbot provider and paste it into your site once, usually just before the closing </body> tag of a template every page shares. Almost every website builder has a place for this, often called "custom code", "footer code" or "code injection". It takes a few minutes and no programming.
This post walks through what the code does, where it goes on the common website builders, and what to check when the chat bubble does not appear.
What is a chatbot embed code?
A single script tag. It looks something like this:
<script src="https://example.com/widget.js" data-bot-id="your-bot-id"></script>
When a visitor opens your page, the tag loads the chat bubble and tells it which chatbot to show. Everything else, such as the greeting, the colour and the answers, lives with your chatbot provider. That is why you paste it once: changing the greeting later does not mean editing your website again.
The id in the tag is not a password. It is meant to sit in your page source where anyone can see it, the same way an analytics tag does.
Where do you paste a chatbot script?
Just before the closing </body> tag, on every page where the chatbot should appear. Placing it at the end means your page content loads first and the chatbot follows, so the page does not wait on it.
Pasting it into a shared footer or layout puts it on every page at once. If you only want it on some pages, paste it into those pages individually instead.
How do you add a chatbot on common website builders?
Each builder has a place for site-wide code. The names below are where it usually lives; builders rename their menus from time to time, so if a label has moved, search the builder's help for "custom code" or "footer code".
| Website builder | Where site-wide code usually goes | Notes |
|---|---|---|
| WordPress | A header-and-footer code plugin, or the theme's footer template | A plugin survives theme updates; editing the theme file does not |
| Webflow | Site settings, then Custom code, then Footer code | Publish the site again for it to take effect |
| Shopify | Online Store, Themes, Edit code, then the theme.liquid layout, before </body> | Back up the theme before editing |
| Wix | Settings, then Custom code, placed in Body – end | Usually needs a paid plan with a connected domain |
| Squarespace | Settings, then Code injection, Footer | Usually needs a paid plan |
| Custom HTML or a framework | Your base layout or index.html, before </body> | One layout file covers every page |
Which pages should show the chatbot?
Most sites show it everywhere, but a few pages are worth a second thought:
- Pricing, product and contact pages. The pages where visitors have questions. Always show it here.
- Checkout and payment pages. A bubble over a payment form can distract at the worst moment. Many sites leave it off.
- Pages with their own form. A lead form and a chat bubble asking for the same details compete. Pick one; see lead form vs chatbot.
- Long articles. Show it, but let it appear after the visitor has read a while. Greeting messages and when to show them covers timing.
What should you check if the chatbot does not appear?
Work down this list in order; the first three cover most cases.
- The page you are looking at is the published one. Many builders need you to publish or save the site before custom code goes live. Reload the live page, not the editor's preview.
- The tag is really there. View the page source in your browser and search for the script's file name. If it is not in the source, the code was saved in the wrong place.
- The id matches. One wrong character in the bot id loads nothing.
- Nothing is blocking the script. Open the browser's developer console and look for an error about a blocked script. Sites with a strict Content Security Policy must allow the chatbot's script host.
- The bubble is not hidden. A cookie banner or sticky bar can sit on top of it. Most widgets let you raise the bubble from the bottom of the screen.
- It is not set to wait. If the chatbot is set to appear after a delay or a scroll, it will not show the instant the page loads.
Does a chatbot slow down a website?
A well-built one has little effect, because it loads after the page's own content and stays small until a visitor opens it. Check yours: run your page through a speed test with and without the tag, and compare. If the difference is large, ask your provider why.
How Vyostra AI handles it
The Vyostra AI chat agent is one script tag you copy from your bot's settings and paste before the closing </body> tag. It works on WordPress, Webflow and custom HTML sites. The greeting, colour and when the widget appears are all set in the dashboard, so changing them needs no change to your page.
If the bubble covers a cookie banner or a sticky bar, add data-bottom-offset to the tag to raise it. The widget embed guide has the full tag, its options, and the same troubleshooting steps for lead forms and the voice agent.
Common questions
- How do I add a chatbot to my website?
- Copy the embed code from your chatbot provider and paste it just before the closing </body> tag of a template every page shares, such as the site footer. Most website builders have a place for this called custom code, footer code or code injection. No programming is needed.
- Where do I paste a chatbot script?
- Just before the closing </body> tag, on every page where the chatbot should appear. Pasting it into a shared footer or layout adds it to every page at once; paste it once only, or the bubble may load twice.
- Why is my chatbot not showing on my website?
- Most often the site was not published after the code was added, the code was saved somewhere that is not in the live page, or the bot id in the tag is wrong. After those, check the browser console for a blocked script, whether a cookie banner covers the bubble, and whether the chatbot is set to appear only after a delay or scroll.
- Does a chatbot slow down my website?
- A well-built one has little effect, because it loads after the page’s own content and stays small until a visitor opens it. Run a speed test on the page with and without the tag to check yours.