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 code is printed on that tab with your widget ID already filled in. If the tab asks where your website runs, choose Shopify. Copy the code with the copy button on the code block.

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. Next to your current theme, click the three-dot button (…) and choose Edit code.

Shopify's Starter plan only lets you change a few things in its built-in theme (logo, colors, links), so it has no place for the code; you need a plan that lets you edit your theme. If you are trying out a paid theme, Shopify lets you edit its code only after you buy it.

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. On a new line just above that tag, paste the Yaplet code. The code you paste must start with a <script> line and end with a </script> line; if what you copied starts with !function (Yaplet instead, type <script> on a new line before it and </script> on a new line after it. 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 — Open your store in a private (incognito) window, so your browser doesn't show an older copy of the page.
• The code shows up as text at the bottom of the page — The <script> and </script> lines around the code are missing. Add them and save.
• Script is inside a comment block — Check that the code isn't inside a {%- comment -%} block or after the closing </body> tag.
• No Edit code option — Check your plan, and if the theme is a paid theme on trial, buy it first (see step 2).
• Content Security Policy errors — If your browser console shows CSP errors, you may need to allow yaplet.com, sdk.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.