The best thing about modern AI chatbots is how little stands between you and a live bot on your site. No plugins to vet, no framework to learn, no developer ticket. If you've ever pasted a Google Analytics snippet, you already know how to do this. Here's the whole process.
The one line
Every embeddable chatbot boils down to a single script tag that looks like this:
<script src="https://spideychat.com/widget.js" data-bot-id="YOUR_BOT_ID"></script>
The src loads the widget code, and the data-bot-id tells it which trained bot to connect to. You copy your real bot ID from your dashboard and swap it in. That's the entire integration.
Where to paste it
The rule is simple: paste it right before the closing </body> tag so it loads on every page. Doing it once, site-wide, means the chat bubble appears everywhere without editing individual pages. Here's where that lives on the platforms most people use.
WordPress
You have two easy options. Use a "header and footer scripts" plugin (there are several free ones) and paste the snippet into the footer box. Or, if your theme has a footer-code setting, drop it there. It loads across your whole site, including WooCommerce stores.
Shopify
Open your theme code editor and find theme.liquid. Paste the snippet just before </body> and save. It now loads on every storefront page. Some themes also offer a custom-code section where you can add it without touching Liquid.
Webflow
Go to Project Settings → Custom Code and paste the snippet into the Footer Code box, then publish. Webflow injects it before the closing body tag for you.
Wix
Open Settings → Custom Code, add a new snippet, paste it in, and set it to load on all pages in the body. Save and publish.
Squarespace
Settings → Advanced → Code Injection, and paste the snippet into the Footer field. It applies site-wide.
React, Next.js, and custom sites
On a plain HTML site, paste the tag before </body>. In React, add the script on mount or include it in index.html. In Next.js, use next/script in your root layout with whichever loading strategy you prefer. The widget itself is framework-agnostic — it just needs to be on the page.
The four-step setup
Installing the script is the last step, not the first. The full flow looks like this:
- Create your bot in the dashboard.
- Train it — describe your business, crawl your website, or upload documents so it can answer from your content.
- Customize it — set the name, welcome message, brand color, and suggestion pills.
- Copy the snippet and paste it into your site.
Between creating the bot and pasting the code, you've done everything that makes the bot useful. The installation is the easy part.
Common questions before you ship
Will it hurt performance? A good widget loads asynchronously, so it never blocks your page from rendering. Your content shows first; the chat bubble arrives alongside it.
Can I control where it appears? Yes — because you decide which pages include the script. Site-wide is the norm, but you can limit it to specific templates if you only want it on, say, product or pricing pages.
What if I redesign my site? As long as the one line stays in your footer, the bot keeps working. You manage everything else — its knowledge, appearance, and behavior — from the dashboard, with no code changes.
That's the whole job
Adding an AI chatbot to your website really is a copy-paste. The work that matters is teaching the bot your business well; the installation is a single line you'll spend more time reading about than actually doing. Train your bot, paste the snippet, and it's answering customers before you've finished your coffee.