Installing the Widget
Installing on a Shopify App
Add the Convot widget to a Shopify app storefront using the standard JavaScript embed snippet.
Convot is built for Shopify app developers. The widget loads via a two-line JavaScript snippet that you add to your storefront or embedded app UI. There is no Shopify app extension required.
What you need
- Your App key from Settings → Apps → [your app] → Setup (looks like
app_3f9c…). - Access to edit the HTML of the page where you want the widget to appear.
Where to add the snippet
Liquid storefront themes
If your Shopify app injects content into a merchant’s storefront (for example via a theme app extension or by editing theme.liquid), paste the snippet just before the closing </body> tag of the relevant layout file.
Embedded app (Shopify Admin iframe)
If you ship a Shopify embedded app rendered inside the Shopify Admin, add the snippet to the <head> or just before </body> in your own HTML shell - the same one that hosts your React/Next.js/Remix app.
The embed snippet
Go to Settings → Apps → [your app] → Setup and copy the snippet shown there. It looks like this:
<script>
window.Convot = { app_id: "app_YOUR_KEY_HERE" };
</script>
<script async src="https://app.convot.com/widget-loader.js"></script>
Your real app_id is pre-filled on the Setup page - no need to type it.
What each line does
-
window.Convot- tells the loader which app to load. Set this before the loader script so it’s ready immediately. -
widget-loader.js- the loader script. It injects a sandboxed iframe with the full widget.asynckeeps it from blocking your page.
Identifying logged-in merchants (recommended)
Once you know who the visitor is (for example, after OAuth), call Convot.identify so the contact in your inbox shows the merchant’s name and store:
<script>
Convot.identify({
email: "[email protected]",
external_id: "your_user_id_123",
name: "Jane Doe",
company: "Acme Store",
custom_data: {
plan: "pro",
shopify_store: "my-store.myshopify.com"
}
});
</script>
Call identify after the loader has run - you can call it at any point after the snippet is on the page.
Convot.identify is optional but recommended. Without it, each new browser session creates an anonymous contact. With it, conversations are tied to the merchant’s record so your team has context.
Verifying the install
After adding the snippet, reload the page. You should see a chat bubble in the corner. See Verifying your install for a full checklist if the bubble does not appear.
Next steps
- App key and identity secret - keep the secret safe and sign identities on your server.
- Verifying your install - confirm the widget is loading correctly.
- Widget customization - match the widget to your brand.
Was this article helpful?
Thanks for your feedback!