Shopify

Copianto integrates smoothly with Shopify via custom code injection, adding a fast, cache-busting script and stylesheet that render the chat widget across your site.

Method 1: Add via Theme Code Editor (Recommended)

1. Log in to your Shopify Admin.

2. Navigate to Online Store → Themes.

3. On your current theme, click Actions → Edit Code.

4. In the file tree, open theme.liquid (usually under Layout).

5. Scroll down and find the closing </body> tag.

6. Paste the full Copianto script just above </body>.

7. Replace demo-public-key-12345 with your real Public Key.

8. Click Save.

9. Visit your storefront and refresh — the Copianto widget should appear.

Method 2: Add via Theme Customizer (App Embed)

(For Shopify 2.0 themes)

1. Go to Online Store → Themes → Customize.

2. In the left sidebar, scroll to App embeds.

3. If you’ve published a private app block for Copianto, toggle it On.

4. Paste your Public Key into the settings field.

5. Save & Publish.

(This method requires building an app embed block — use Method 1 if you’re adding manually.)

<script>
(function () {
  const timestamp = new Date().getTime();

  // Demo public key — replace with your real public key when ready
  const publicKey = "demo-public-key-12345";

  // Append stylesheet with cache-busting query
  const link = document.createElement("link");
  link.rel = "stylesheet";
  link.href = "https://copiantoai.ams3.cdn.digitaloceanspaces.com/widget/v4/copianto-widget.css?" + timestamp;
  document.head.appendChild(link);

  // Create and append widget container (at top of body)
  const widgetDiv = document.createElement("div");
  widgetDiv.id = "copianto-chat";
  widgetDiv.setAttribute("data-public-key", publicKey);
  document.body.insertBefore(widgetDiv, document.body.firstChild);

  // Append main widget script with cache-busting query
  const script = document.createElement("script");
  script.src = "https://copiantoai.ams3.cdn.digitaloceanspaces.com/widget/v4/copianto-widget.js?" + timestamp;
  document.body.appendChild(script);
})();
</script>

Notes: The script appends Copianto’s CSS/JS with a timestamp to avoid caching and inserts a div with your Public Key near the start of the body for visibility.

Testing & Verification

1. Open your store in an incognito window.

2. The Copianto widget should appear at the bottom of the site.

3. Start a test conversation — confirm it shows up in your Copianto dashboard under Inbox/Leads.

4. If not visible, check:

   • That you pasted the code in theme.liquid above </body>.

   • That your Public Key is correct.

   • Clear your browser cache or try incognito.