Guide

Add web chat to your site

Embed a floating WeTarseel chat widget on your site. Conversations appear in live chat under the Website Chat channel.

Visitors see a floating WeTarseel icon in the corner of your site. Clicking it opens the chat panel, and your team answers from the same inbox as WhatsApp, Instagram, Messenger and TikTok.

Set up

1. In app.wetarseel.ai, open Website Chat and switch on Enable website chat widget.
2. Under Allowed domains, add every hostname the widget will run on, one per line, without https://. Include your Shopify store hostname (your-store.myshopify.com) and any custom domain (for example shop.example.com). Add localhost for local testing. Then Save.
3. Copy the Embed script. It already contains your widget key.
4. Paste the script just before the closing </body> tag on every page where the chat should appear.
5. Open your site: visitors see the WeTarseel icon in the corner, and clicking it opens the chat panel. Use Open test page in the app to try it first.

Embed script

Paste this before </body>. Copy your own from Website Chat in app.wetarseel.ai: it carries your widget key in place of YOUR_WIDGET_KEY.

<script>
(function(w,d,s,o){w[o]=w[o]||function(){(w[o].q=w[o].q||[]).push(arguments)};
var j=d.createElement('script');j.async=1;j.src='https://app.wetarseel.ai/embed/webchat.js';
d.head.appendChild(j);})(window,document,'script','wtChat');
wtChat('init', { widgetKey: 'YOUR_WIDGET_KEY' });
</script>

The widget only loads on hostnames listed under Allowed domains. Add localhost while you test locally.

Add chat on Shopify

1. Enable Website Chat and add your Shopify domains to Allowed domains: both your-store.myshopify.com and your custom domain if you use one.
2. Copy the Embed script.
3. In Shopify admin, go to Online Store → Themes.
4. Click … on your live theme → Edit code.
5. Open layout/theme.liquid (Online Store 2.0) or the main layout file that wraps every page.
6. Paste the embed script just before the closing </body> tag, then save.
7. Visit your storefront and confirm the WeTarseel icon appears in the bottom corner. Open it once to check the pre-chat form loads.

Tips

• Prefer not to edit theme code? Add a Custom Liquid section in the theme editor (footer or a global app block) and paste the same script there.
• If you see “Domain not allowed”, check that the hostname in the browser's address bar matches an entry in Allowed domains (no https://).
• Password-protected storefronts still work for testing, as long as the domain is allowlisted.

Use your own button

To open the chat from your own button instead of the round launcher, pass hideLauncher: true and call wtChat('toggle') to open and close it.

wtChat('init', { widgetKey: 'YOUR_WIDGET_KEY', hideLauncher: true });

// then, from your own button:
document.querySelector('#chat-button')
  .addEventListener('click', () => wtChat('toggle'));