Install Yaplet on a Shopify store

Shopify lets you edit your theme's code directly, so you can add Yaplet to every page by inserting the embed script into your theme's main layout file. No app installation is required — just a copy-and-paste into the theme editor.

1. Get your embed code

Log in to your Yaplet dashboard and go to Brand → (your brand) → Chat widget → Install. The script is printed on that tab with your Widget ID already filled in — copy it from the code block. There is no Widgets list, no Embed button and no pop-up.

If you haven't set up a widget yet, start with Install Yaplet with the JavaScript snippet to understand what the code does.

2. Open the theme code editor

In your Shopify admin, go to Online Store → Themes. Find your active theme, click the three-dot menu (…) next to it, and choose Edit code.

3. Open theme.liquid

In the code editor's left sidebar, open the Layout folder and click theme.liquid. This is the master template that wraps every page on your store.

4. Paste the embed script

Scroll to the bottom of theme.liquid and find the closing </body> tag. Paste your Yaplet embed code just above that tag, then click Save.

5. Verify the widget appears

Open your Shopify store in a new browser tab and reload any page. You should see the Yaplet launcher button in the bottom-right corner. Click it to confirm the widget opens.

For a more thorough check, see Verify your installation.

Troubleshooting

• Widget doesn't appear after saving — Shopify caches pages aggressively. Open your store in an incognito window, or append ?nocache=1 to the URL to bypass caching.
• Script is inside a comment block — Check that the code isn't inside a {%- comment -%} block or after the closing </body> tag.
• Multiple layout files — Some themes use additional layout files (e.g. customers/account.liquid). Add the snippet there too if you want the widget on account pages.
• Content Security Policy errors — If your browser console shows CSP errors, you may need to whitelist yaplet.com and embed.yaplet.com in your store's CSP configuration.

Identify logged-in customers

If your store has customer accounts, you can pass Shopify customer data to Yaplet so your team sees real names instead of "Visitor 1234". Identifying a customer requires a signature proving the ID really is theirs — without it anyone could claim to be one of your customers, so unsigned calls are rejected. Shopify renders Liquid on its own servers and ships a built-in hmac_sha256 filter, so your theme can produce that signature with no extra app.

Find your identity secret in the Yaplet dashboard under Brand → (your brand) → Chat widget → Install → Identity verification — press Show identity secret to reveal it. Paste it into the snippet below and add the block inside a Liquid conditional:

{% if customer %}
<script>
  Yaplet.identify("{{ customer.id }}", {
    name: "{{ customer.name }}",
    email: "{{ customer.email }}",
  }, "{{ customer.id | append: '' | hmac_sha256: 'paste-your-secret-here' }}");
</script>
{% endif %}

Place this block directly after the main Yaplet embed script, still before </body>.

Why this is safe: Liquid runs on Shopify's servers, so visitors only ever receive the finished signature — never the secret itself. Do keep in mind that anyone who can edit your theme's code can read the secret, so if it ever leaks, rotate it in the same dashboard section and update the snippet.