Install the widget on Shopify

You can add the AgentMySite support chat in two places on Shopify:

• Your online store: the chat appears on your storefront for shoppers.
• Your embedded Shopify app: if you build a Shopify app with Remix, the chat appears inside your app for the merchants who use it.

Note

Looking for a shopping assistant that knows your products and orders? That’s AgentMyShop, a separate Shopify app. Its guides are coming later.

Before you begin

• Create your site and add content.
• Copy your embed snippet from Site Settings > Site key & embed snippet.

Online store theme

Add the chat to your online store

1. In AgentMySite, go to Site Settings > Allowed domains and add every hostname your store uses, for example your-store.myshopify.com and www.your-store.com.

2. In your Shopify admin, go to Online Store > Themes. Next to your current theme, open the ⋯ menu and select Edit code.

3. Open layout/theme.liquid.

4. Paste your embed snippet just before the closing </body> tag, then select Save.

   layout/theme.liquid

   <script async src="https://widget.agentmysite.com/loader/widget.js" data-site-key="YOUR_SITE_KEY" data-api-base="https://api.agentmysite.com" data-iframe-origin="https://widget.agentmysite.com"></script>
   </body>

5. Open your storefront. The chat button appears in the bottom-right corner.

Embedded app (Remix)

Add the chat to an embedded Remix app

This is for developers of Shopify apps built with Remix. Merchants who use your app see the chat inside your app, and the assistant answers from the content you added to AgentMySite, such as your app’s help articles.

Use one site for your whole app

Create one AgentMySite site for your app, not one per merchant. Chat history is kept separate for each store with the data-shop-domain attribute, so each merchant only sees their own store’s conversations.

1. Add a loader component

Remix navigates on the client. A plain <script> tag in root.tsx only runs on a full page load, so the widget can fail to appear after navigation. Inject the loader from a component instead:

app/components/AgentMySiteChat.jsx

import { useEffect } from "react";

const LOADER_SRC = "https://widget.agentmysite.com/loader/widget.js";
const SITE_KEY = "YOUR_SITE_KEY"; // from your embed snippet, or an env var
const API_BASE = "https://api.agentmysite.com";
const IFRAME_ORIGIN = "https://widget.agentmysite.com";

export function AgentMySiteChat() {
  useEffect(() => {
    if (document.querySelector("script[data-agentmysite-loader]")) return;
    // Embedded apps receive the store's myshopify domain as the ?shop= parameter.
    const shop = new URLSearchParams(window.location.search).get("shop") || "";
    const s = document.createElement("script");
    s.src = LOADER_SRC;
    s.async = true;
    s.setAttribute("data-agentmysite-loader", "");
    s.setAttribute("data-site-key", SITE_KEY);
    s.setAttribute("data-api-base", API_BASE);
    s.setAttribute("data-iframe-origin", IFRAME_ORIGIN);
    if (shop) s.setAttribute("data-shop-domain", shop); // keeps each store's history separate
    document.body.appendChild(s);
    return () => {
      for (const sel of [
        "script[data-agentmysite-loader]",
        '[data-testid="agentmysite-bubble"]',
        '[data-testid="agentmysite-widget-iframe"]',
      ]) document.querySelectorAll(sel).forEach((el) => el.remove());
    };
  }, []);
  return null;
}

Read the site key from an environment variable if your staging and production apps use different sites.

2. Mount it in your app layout

Render the component in your authenticated app layout, after <Outlet />, so the chat is on every page of your app:

app/routes/app.jsx

import { AgentMySiteChat } from "../components/AgentMySiteChat";

// ...inside the layout component's return, after <Outlet />:
<AgentMySiteChat />

3. Allow your app’s domain

An embedded app’s pages are served from your domain, such as your-app.fly.dev, not from admin.shopify.com. In AgentMySite, go to Site Settings > Allowed domains and add:

• every hostname your app is served from, for example your-app.example.com
• localhost for local development. Ports are ignored, so don’t add one.

4. Allow AgentMySite in your Content Security Policy

If your app sets a strict Content-Security-Policy, add these sources. If you only set Shopify’s frame-ancestors, you don’t need to change anything.

Content-Security-Policy

script-src  'self' https://widget.agentmysite.com;
connect-src 'self' https://api.agentmysite.com;
frame-src   https://widget.agentmysite.com;

Optional: hide the conversation list

Add data-single-conversation="true" to show only the current conversation and hide the list of past conversations.

Next: let the assistant take actions

To let the assistant do things in your app, such as look up orders, see AgentActions.

Check that it works

1. Open a page where you added the widget. The chat button appears in the corner.

2. Ask a question your content answers.

3. In your browser’s developer tools, open Network. You should see widget.js with status 200, then POST /widget/session with status 200, not 401.

If /widget/session returns 401, the page’s hostname isn’t in your allowed domains. For other problems, see Troubleshooting.