How to Integrate an AI Chatbot with WordPress, Shopify, and Wix: Complete Guide (2026)

The Heeya Snippet to Copy and Paste

Before going further: grab your embed script. In your Heeya dashboard, go to Agent Settings > Integration. You'll find a snippet that looks like this:

<script
  src="https://heeya.fr/static/js/widget.js"
  data-agent-id="YOUR_AGENT_ID"
  defer
></script>

Replace YOUR_AGENT_ID with the ID shown in your dashboard. This single block is what you'll insert in the sections below — the process varies by CMS, but the code itself doesn't change.

Don't have a chatbot yet? Create one in minutes with our guide on how to build an AI chatbot without coding.

WordPress Integration

Two methods depending on your comfort level. Both work in under 5 minutes.

Method 1: via the "Insert Headers and Footers" plugin (recommended)

This is the cleanest approach — it doesn't touch your theme files and survives theme updates.

1. In your WordPress admin, go to Plugins > Add New Plugin.
2. Search for "Insert Headers and Footers" (by WPBeginner) and install it.
3. Go to Settings > Insert Headers and Footers.
4. Paste your Heeya snippet into the "Scripts in Footer" section.
5. Click Save. That's it.

The widget appears on every page of your site. Reload a page in a private/incognito window to confirm.

Method 2: directly in the footer.php file

If you'd rather not install a plugin, you can edit your theme directly.

1. Go to Appearance > Theme File Editor (or use an FTP editor).
2. Open the footer.php file in your child theme (critical: child theme, never the parent theme).
3. Paste your snippet just before the </body> tag.
4. Click Update File.

Important: always edit the child theme, never the parent. A parent theme update will overwrite your changes. If you don't have a child theme, create one — or use Method 1.

For a complete guide specific to WooCommerce: WooCommerce AI Chatbot: Integration Guide.

Shopify Integration

Shopify allows custom code injection directly via its theme editor. No third-party app required.

Shopify Integration Steps

1. In your Shopify admin, click Online Store > Themes.
2. Next to your active theme, click the three-dot menu and select "Edit code."
3. In the left file tree, under Layout, open the file theme.liquid.
4. Locate the </body> tag (use Ctrl+F to find it quickly).
5. Paste your Heeya snippet just before that tag.
6. Click Save.

The widget appears across your entire store — including product pages, the cart, and the checkout page (if your theme allows it). Ideal for automating e-commerce customer service — real-time answers on shipping timelines, returns, and sizing.

Target Specific Pages Only on Shopify

If you want to limit the widget to product pages only, wrap the snippet in a Liquid conditional:

{% raw %}{% if template == 'product' %}
  <script
    src="https://heeya.fr/static/js/widget.js"
    data-agent-id="YOUR_AGENT_ID"
    defer
  ></script>
{% endif %}{% endraw %}

Wix Integration

Wix allows custom code injection through its built-in code manager. The feature is available on all paid plans.

Wix Integration Steps

1. In your Wix editor, click Site Settings (gear icon, bottom-left corner).
2. Select Custom Code under the Advanced section.
3. Click + Add Custom Code.
4. Paste your Heeya snippet into the text area.
5. Give it a name (e.g., "Heeya Chatbot") and choose the placement "Body - end".
6. Select "All Pages" for site-wide deployment.
7. Click Apply, then publish your site.

Note: the widget is not visible in the Wix editor preview — that's expected. It only appears on the published site. Don't assume the integration failed if you don't see it in edit mode.

Webflow Integration

Webflow offers two injection points: at the project level (all pages) or page by page.

Option A: Global code (all pages)

1. In your Webflow dashboard, open your project.
2. Click the W icon in the top-left, then click Project Settings.
3. Go to the Custom Code tab.
4. Paste your Heeya snippet into the "Footer Code" area.
5. Click Save Changes, then republish your site.

Option B: Code on a specific page

1. In the editor, select the target page in the Pages panel.
2. Click the gear icon to open the page settings.
3. Scroll down to "Custom Code" and paste the snippet in "Before </body> tag".
4. Publish the page.

Custom HTML Site Integration

The most direct method. Open each HTML file (or your base template if you're using a framework) and add the snippet just before </body>:

<!-- Heeya Chatbot -->
<script
  src="https://heeya.fr/static/js/widget.js"
  data-agent-id="YOUR_AGENT_ID"
  defer
></script>
</body>
</html>

If your site is generated with a static site generator (Next.js, Gatsby, Hugo, Astro), inject the script in your root layout or the _document.js / app.html component depending on the framework. The defer attribute ensures the widget loads without blocking your page render.

For more on integration best practices, see our full guide on adding a chatbot to your website.

CMS Comparison Table

Common Errors and How to Fix Them

The integration is straightforward, but a few recurring pitfalls cost time. Here are the 6 most frequent errors and their solutions.

Error 1: The widget doesn't appear at all

Likely cause: the script is misplaced (in the <head> without defer, or the file wasn't saved).

Diagnosis: open your browser console (F12 > Console) and look for a script loading error. If you see a 404 on the widget URL, the agent ID is incorrect or the snippet was truncated during copy-paste.

Fix: go back to your Heeya dashboard, copy the complete snippet again, and verify your editor hasn't added invisible characters.

Error 2: The widget shows in editor mode but not on the published site (Wix)

This is expected on Wix. Custom code is only injected on the published site, not in the editor preview. Publish your site and test via the public URL.

Error 3: The widget disappears after a theme update (WordPress)

Cause: you edited the footer.php of the parent theme, not the child theme. A theme update overwrote your changes.

Fix: switch to Method 1 (the "Insert Headers and Footers" plugin). It's independent of the theme — updated or not.

Error 4: The widget loads but the chatbot doesn't respond

Likely cause: the agent ID in the snippet doesn't match the agent you configured, or the agent doesn't yet have a knowledge base attached.

Fix: in the Heeya dashboard, confirm the agent is active and documents have been indexed. Always test via the built-in test chat before testing on your live site.

Error 5: The widget overlaps page elements (z-index conflict)

On some sites, the widget can appear behind a sticky navigation menu or a cookie banner. This is a CSS z-index conflict.

Fix: contact Heeya support to adjust the widget's z-index value. You can also add this CSS rule to your stylesheet:

#heeya-widget-container {
  z-index: 9999 !important;
}

Error 6: The widget slows the site down (PageSpeed impact)

If you placed the script in the <head> without the defer attribute, it blocks page rendering.

Fix: make sure the defer attribute is present in the snippet (it is by default in the Heeya code). The widget then loads after the initial page render — no impact on LCP or FID.

To go deeper on performance and optimization: understand the RAG technology behind your chatbot.

FAQ

Further Reading

• How to Build an AI Chatbot Without Coding: Complete No-Code Guide
• WooCommerce AI Chatbot: Step-by-Step Integration Guide
• Adding a Chatbot to Your Website: Everything You Need to Know
• E-commerce Chatbot Solution: Automate Sales and Support
• Automate Your Customer Service with an AI Chatbot
• What Is RAG? The Complete Business Guide
• Automate Customer Service Without a Developer in 2026
• AI Chatbot for Marketing and Web Agencies — resell chatbot integration as a service to your clients
• Shopify AI Chatbot: Deep Integration Guide 2026 — embed script, theme.liquid, RAG on product pages