Getting StartedGuide

How to embed an AI chatbot on any website (WordPress, Webflow, Shopify)

A step-by-step guide to adding an AI chatbot to a client website using a single embed script — covers WordPress, Webflow, Shopify, Squarespace, Wix, and plain HTML.

May 30, 2026 6 min read

Adding an AI chatbot to a website is a copy-paste job, not a development project. You get a script from the chatbot platform and put it in the site's footer. The chatbot appears on all pages immediately. The whole thing takes about five minutes once you know where the footer code field is on whichever platform you're working with.

This guide covers the most common ones.

What you're adding and where it goes

Every website builder has a field for custom scripts in the footer. The chatbot embed is a single line of JavaScript that goes there. Once it's in, the chatbot widget loads on every page of the site without any further changes.

You build and configure the chatbot separately, in the Octively dashboard. That part doesn't involve touching the client's site at all. The embed is just the step that connects the bot you built to the site where it needs to appear.

WordPress

WordPress has a few ways to add footer scripts, depending on how the site is built.

Through your theme settings

Most modern themes (Divi, Astra, GeneratePress, and others) have a field for footer code in their customisation options. In the WordPress admin, go to Appearance, then Customise, and look for a section called Additional CSS or Scripts, or check the theme's own settings panel. Paste the embed script there and save.

Using a plugin

If the theme doesn't have a footer code field, the Insert Headers and Footers plugin (by WPCode) is the easiest option. Install it, go to Settings, then Insert Headers and Footers, and paste the script in the Footer Scripts field. It applies to the whole site immediately.

For WooCommerce stores

The same methods work. The chatbot will appear on product pages, the cart, and checkout unless you restrict it using conditional logic. For most small stores, site-wide is fine.

Webflow

In your Webflow project, go to the Project Settings tab (the gear icon), then the Custom Code section. You'll see a Footer Code field. Paste the embed script there, save, and publish the site. The chatbot appears on all published pages.

If you want the chatbot on only specific pages, open the page settings for that page (the gear icon next to its name in the Pages panel) and paste the script in the Before tag field at the bottom of the page.

Shopify

In your Shopify admin, go to Online Store, then Themes. Click the three dots next to your active theme and choose Edit Code. In the Layout folder, open theme.liquid. Find the closing </body> tag near the bottom of the file and paste the embed script on the line just before it. Save the file.

The chatbot will appear on every page of the store, including the product pages, cart, and checkout.

Squarespace

In your Squarespace dashboard, go to Settings, then Advanced, then Code Injection. Paste the embed script in the Footer field and save. The chatbot appears on all pages.

Note: Code injection is only available on Business plans and above in Squarespace.

Wix

In your Wix editor, go to Settings (the gear icon in the left sidebar), then Custom Code. Click Add Custom Code, paste the script, give it a name, and set it to load in the Body — End. Choose to apply it to All Pages and save. Publish the site.

Plain HTML

Open the HTML file you want to add the chatbot to. Find the closing </body> tag at the bottom and paste the embed script on the line just before it. Save and upload the file. For sites with multiple pages, you'll need to add the script to each one, or to a shared footer template if the site uses one.

Testing it

Once the script is in place, visit any page on the site. The chatbot widget should appear in the corner within a few seconds. Click it to make sure it opens and responds correctly.

If the widget doesn't appear, check that the script was saved in the right place and that any caching plugins or CDN settings aren't serving a cached version of the page without the new script. Clearing the site cache usually fixes it.

What to do after the embed is live

The embed is the last technical step. After this, the chatbot configuration is all handled in the Octively dashboard: updating what the bot knows, reviewing conversations, adjusting its responses. None of that touches the client's site.

The next step is setting up the client's portal so they can log in and see their conversations themselves. That's done entirely in the Octively dashboard and takes about two minutes.

Frequently Asked Questions

Try it on your next client project

Free plan — no credit card required.

Start free

More articles