How to Add an AI Chatbot to Your Website (WordPress, Shopify, Wix, Webflow, Squarespace)

To add an AI chatbot to your website, create an agent trained on your content, copy its embed script, and paste it before the closing </body> tag of your site, using your site builder's custom code or footer setting. With Elk, the snippet is one <script> tag. It works on WordPress, Shopify, Wix, Webflow, Squarespace and plain HTML.

Adding the code takes about five minutes. This guide covers getting the snippet, where to paste it on each major platform, how to make the widget look right, and what to check if it doesn't appear.

Paste your URL and build your agent free

Elk crawls your site, trains an AI agent on it, and gives you a chat widget you can test in a few minutes. No credit card required.

Step 1: Create and train your agent

The widget is only as useful as the agent behind it. If you haven't built one yet:

Sign up at elkagent.com and enter your website URL during onboarding.
Let Elk crawl your site or import your sitemap, and deselect pages that don't help customers.
Test 20 or so real customer questions in the Playground.

The full process is in how to train an AI chatbot on your website content.

Step 2: Copy your embed code

Open your agent, go to Integrate → Website Widget, and pick one of three formats:

Format	What it does	Use it for
Script	Floating chat bubble in the corner of every page	Most websites
Iframe	Chat embedded inline in a page	Help center or contact page
Link	Full-page chat at its own URL	Email signatures, social bios, QR codes

The script looks like this, with your own agent ID:

<script
  async
  data-agent-id="YOUR_AGENT_ID"
  src="https://elkagent.com/widget.js"
></script>

Step 3: Paste it into your site

Plain HTML

Paste the script just before </body> in your HTML template, or on every page if you don't use a shared template. Then upload the files.

WordPress (self-hosted)

The simplest option without touching theme files:

Install a code-insertion plugin such as WPCode (Plugins → Add New).
Open the plugin's header and footer settings.
Paste the script into the Footer box and save.

If you're comfortable editing your theme, you can paste it before </body> in your child theme's footer.php. Use a child theme, because a parent theme update overwrites your edits.

WordPress.com

Custom scripts only work on WordPress.com sites with a plugin-enabled plan and hosting features activated. On those plans, install a code-insertion plugin and follow the self-hosted steps above. On other plans, scripts are stripped out.

Shopify

From Shopify's theme code guide:

Go to Online Store → Themes and duplicate your theme first as a backup.
On the live theme, click the … menu → Edit code.
Open layout/theme.liquid.
Paste the script just before </body> and click Save.

Shopify notes that theme updates can remove your code changes. Re-check the widget after updating your theme.

For store-specific setup, like answering shipping and returns questions, the same agent works. Train it on your shipping, returns and FAQ pages.

Wix

From Wix's custom code guide. Your site needs to be published with a connected domain.

In your site's dashboard, go to Settings.
Under Development & integrations, click Custom Code.
Click + Add Custom Code and paste the script.
Name it (for example, "Elk chat"), choose All pages, and set Place Code in to Body – end.
Click Apply.

Wix warns that custom code snippets are deleted if you assign a different domain to your site.

Webflow

Site-wide custom code requires a paid Site plan or a qualifying Workspace plan.

Open Site settings → Custom code.
Paste the script in Footer code, which is placed before </body>.
Click Save changes, then publish your site.

To add it to a single page instead, open that page's settings in the Designer and use the Before </body> tag field.

Squarespace

From Squarespace's code injection guide. Code injection is available on Core, Plus and Advanced plans.

Open the Code Injection panel (under Website Tools).
Paste the script in the Footer field.
Click Save.

Checkout pages don't support injected code.

Step 4: Make it look like part of your site

In Elk, open Playground → Appearance and set:

Display name and agent image so the chat feels like your brand
Theme and colors for the chat bubble and user messages, to match your site
Welcome message. Say what the agent can help with: "Hi! Ask me about orders, shipping or returns."
Suggested messages: your three or four most common questions as one-tap buttons
Chat button position: left or right, so it doesn't cover your own buttons or cookie banner
Input placeholder and footer text

Step 5: Lock it down

Under the agent's Settings → Security:

Allowed domains: only let the widget load on your own domains, so nobody can embed your agent elsewhere and use your credits
Rate limiting: cap how many messages a visitor can send in a time window to stop abuse

If you add allowed domains, include every domain the widget runs on, including www and staging if you need them.

Step 6: Test it live

Open your site in a private browser window and on your phone, then check:

The bubble appears on desktop and mobile and doesn't cover important buttons
The welcome message and suggested questions show
A few real questions get correct answers
A question it shouldn't answer gets a polite redirect or handoff

Conversations from the widget appear in Chats in Elk, alongside WhatsApp, Instagram and other channels.

Symptom	Likely cause	Fix
Nothing appears anywhere	Site not republished, or code saved to the wrong place	Republish; confirm the script is in the page source
Works in preview, not live	Builder only adds code on publish, or a paid plan is required	Publish; check your plan supports custom code
Appears on some pages only	Code added at page level	Move it to site-wide footer code
Was working, now gone	Theme update (Shopify), domain change (Wix), or cache	Re-add the code; clear your caching plugin or CDN
Loads, but chat won't respond	Domain not in Allowed domains, or out of credits	Add the domain; check usage

Frequently asked questions

Do I need to know how to code to add an AI chatbot to my website?

No. You copy one script tag and paste it into your site builder's custom code or footer area. Every major builder has a place for this, and the steps for each are above.

Will a chatbot slow down my website?

The Elk widget script loads asynchronously, so it does not block your page from rendering. Placing it just before the closing body tag, as recommended, keeps your main content loading first.

Why is the chatbot not showing on my site?

The most common causes are: the site was not republished after adding the code, the code was added to a plan that does not allow custom scripts (for example free Webflow or some WordPress.com plans), the allowed domains list in Elk does not include your domain, or a caching plugin is serving an old version of the page.

Can I show the chatbot on only some pages?

Yes. Add the script to individual pages instead of site-wide. Wix, Webflow and Squarespace support page-level code, and on WordPress you can use a plugin that inserts code on selected pages.

Can I embed the chatbot inside a page instead of as a floating bubble?

Yes. Elk also gives you an iframe snippet that embeds the chat inline, for example on a help or contact page, and a direct link you can share or put behind a button.

Is the same chatbot available on WhatsApp or Instagram?

Yes. The same agent and knowledge base can be connected to WhatsApp, Instagram, Messenger and Slack from the Integrate tab, so answers stay consistent across channels.

Wrap-up

Adding an AI chatbot to your website is one script tag in your site's footer. Most of the value comes from what happens before and after: a well-trained agent, a welcome message that sets expectations, suggested questions for your top topics, and a weekly look at real conversations. Once it's live, the same agent can answer on WhatsApp and Instagram too. See how to reduce support tickets with AI for what to do next.

Check what's included on each plan on the Elk pricing page.

Get your embed code in a few minutes