- Docs
- Install
Install on Shopify
Add the TalkingDot messenger to your Shopify store by pasting your snippet into your theme's theme.liquid layout. There's no app to install, and it takes about two minutes.
Before you start: copy your snippet from Settings → Install in your TalkingDot dashboard. It contains your workspace key and looks like this:
<script src="https://talkingdot.com/widget.js" data-key="YOUR_WORKSPACE_KEY" async></script>Add the snippet to your theme
- Open the code editor. In your Shopify admin, go to Online Store → Themes. Next to your current theme, open the … (actions) menu and choose Edit code.
- Open
theme.liquid. It's in the Layout folder in the file list. - Find the closing
</body>tag near the end of the file. Use Ctrl+F (⌘+F on a Mac) inside the editor to search for it. - Paste your snippet on the line just above
</body>, then click Save.
{% section 'footer' %}
<!-- TalkingDot messenger -->
<script src="https://talkingdot.com/widget.js" data-key="YOUR_WORKSPACE_KEY" async></script>
</body>
</html>Your theme's last lines will differ from this example. All that matters is that the snippet sits just before </body>. Because theme.liquid wraps every storefront page, the messenger now appears across your whole store.
Theme updates and new themes: the snippet lives inside one theme. If you switch themes, or install an updated version of your theme (Shopify adds it as a new copy), paste the snippet into that theme's theme.liquid before you publish it.
Checkout pages
Shopify controls the checkout, so the messenger shows on your storefront pages: home, collections, products, cart, blog and other pages.
Optional: show logged-in customers' details
When a customer is signed in to your store, you can pass their name and email so your team knows who they're chatting with. Use this version instead of the plain snippet:
{% if customer %}
<script>
window.TalkingDotSettings = {
email: {{ customer.email | json }},
name: {{ customer.name | json }}
};
try { localStorage.setItem('talkingdot_shop', '1'); } catch (e) {}
</script>
{% else %}
<script>
// Signed out since the last page? Start a fresh, anonymous messenger session.
try {
if (localStorage.getItem('talkingdot_shop')) {
localStorage.removeItem('talkingdot_shop');
window.TalkingDot = window.TalkingDot || function () { (TalkingDot.q = TalkingDot.q || []).push(arguments); };
TalkingDot('shutdown');
}
} catch (e) {}
</script>
{% endif %}
<script src="https://talkingdot.com/widget.js" data-key="YOUR_WORKSPACE_KEY" async></script>A few limits apply:
- These details are unverified. Identity verification needs a
user_hashcomputed with your secret, and a theme can't keep a secret: anything in Liquid ends up readable in the page. Treat the name and email as labels, not proof of who's chatting. - That's why the example leaves out
customer.id. An unverified user ID could be copied by someone else to open that customer's conversation history. Name and email only label the current visitor. - Leave Require identity verification off in Settings → Security. When it's on, unverified details are rejected and customers chat as anonymous visitors.
- Need verified identities? That requires server-side code that knows the secret, such as a small endpoint behind a Shopify app proxy that returns the
user_hashfor the signed-in customer. This is custom development.
Verify it works
- Open your storefront in a private window. The launcher bubble appears in the bottom-right corner, or on whichever side you chose in Settings → Messenger.
- Send a test message. It appears in your TalkingDot Inbox.
- Check Settings → Install. It shows when the messenger was last seen on your store.
Troubleshooting
- Password-protected store: while your store is behind a password page, only people who enter the password see the storefront and the messenger.
- Domain allow-list: if you set one in Settings → Security, add your custom domain and your
your-store.myshopify.comaddress. The messenger stays hidden on domains that aren't listed. - Edited the wrong theme: make sure you edited the theme marked as Current theme, not a draft copy.
- Still nothing: open the browser console and look for
TalkingDot: missing or invalid data-key. If you see it, copy the snippet again from Settings → Install.
Next steps
- Proactive messages: offer help on product or cart pages after a visitor lingers.
- Chatbots: answer shipping and returns questions automatically.
- Office hours & away mode: set expectations when nobody's online.
- JavaScript API: open the messenger from a "Chat with us" link.