Use this guide to install the AI Agent widget on Shopify.
Copy the Embed Code from your portal as described in Installation Overview.Two embed methods are supported:1.
Script-based loader (recommended): Adds an AI Agent bubble. The chat opens in an iframe popover when the visitor clicks the bubble.
2.
Iframe-based embed: Loads the AI Agent directly as an iframe appended to the page body (best for a dedicated page).
Best placement#
Script-based loader: Add in layout/theme.liquid just above </body> so it loads across the store.
Iframe-based embed: Add only on a specific page/template where you want a direct embedded chat experience.
The embed code appends to document.body. Footer placement in theme.liquid is safest.
Script-based loader (AI Agent Bubble)#
1.
Go to Shopify Admin → Online Store → Themes.
2.
On the active theme, click ... → Edit code.
3.
Open layout/theme.liquid.
4.
Find the closing </body> tag.
5.
Paste the Script-based loader code just above </body>.
7.
Open your storefront and confirm the bubble appears.
Iframe-based embed (Direct AI Agent Chat)#
This method appends the iframe to the page body. It is best used on a dedicated page (for example: /pages/support).Option A: Add to a specific page template (recommended for reliability)#
1.
Go to Shopify Admin → Online Store → Themes.
3.
Open the template for your target page (theme-dependent, commonly under templates/ or sections/).
4.
Paste the Iframe-based embed code in the appropriate location.
Option B: Add via a theme section/block that supports Custom HTML (depends on theme)#
1.
Open the page/template where you want the embedded AI Agent.
2.
Add a section/block that supports custom HTML (varies by theme).
3.
Paste the Iframe-based embed code.
To control size, adjust iframe.style.width and iframe.style.height in the code (example: 600px, 80vh, 100vh).
If the theme block sanitizes or strips <script> tags, use Option A instead.
Verify installation#
1.
Open the storefront in an incognito/private window.
2.
Confirm the bubble or embedded AI Agent loads on the intended pages.
3.
Send a test message and confirm replies.
Troubleshooting#
Confirm you edited the active theme.
Hard refresh the storefront (Ctrl+Shift+R / Cmd+Shift+R).
If the iframe embed is inside a page block: some themes/apps strip <script> tags. Add it in the theme code instead.
If using performance/optimization apps, check they are not delaying or blocking scripts.
Check browser console for errors.
Confirm no theme performance app is rewriting, deferring, or blocking requests.
Ensure the embed code is added only once.
Check if another app or snippet is injecting the same widget code.
Modified at 2026-02-19 07:22:50
