Getting started with ZChat

Before you start

• Difficulty: Easy
• Time: 5 minutes
• You need: A ZChat workspace (the free plan is enough)
• You need: Access to your site's HTML, theme or tag manager

Steps

1. Copy your embed code

   In ZChat, open Settings → Embed Code. The snippet already contains your site's widget token. The token is a public site identifier, not a secret; each site in your workspace has its own.

2. Paste it before the closing </body> tag

   Add it to your site template so it loads on every page. Keep the snippet as it is; only data-widget-token differs between sites.

   <script async src="https://widget.zchat.com/loader.js"
           data-api="https://api.zchat.com"
           data-widget-token="YOUR_WIDGET_TOKEN"></script>

3. Choose the widget language

   The widget interface follows the visitor's browser language (en, es, fr, de, pt, it, nl, ja, zh-CN, ko; others English). A workspace "Widget language" setting under the widget settings (default Auto) fixes one language for every visitor, and data-locale on the script tag of a page overrides both for that page.

   <script async src="https://widget.zchat.com/loader.js"
           data-api="https://api.zchat.com"
           data-widget-token="YOUR_WIDGET_TOKEN"
           data-locale="fr"></script>

4. Send a test message

   Open your site, click the launcher and ask something your content answers. The conversation appears in your ZChat inbox straight away, and you can reply from there.

Script tag attributes

• data-api: Required. The ZChat API address, https://api.zchat.com.
• data-widget-token: Required. Your site's widget token from Settings → Embed Code. Without it, or without data-api, the widget does not load.
• data-locale: Optional. A language code such as fr or zh-CN for the widget interface on this page.
• data-identity-token: Optional. A token your server signs with the workspace's HMAC secret (AI & Answers → AI Tools) so the AI knows which signed-in customer it is talking to. Anonymous chat works without it.

Good to know

• The loader passes every data- attribute on to the widget, so the attributes work on the loader tag.
• If your site sends a Content-Security-Policy header, allow widget.zchat.com for scripts and styles, the ZChat API host for connections, and cdn.jsdelivr.net for scripts (the realtime client).
• The same script works on Shopify, WordPress, Webflow, Squarespace and Wix; the platform guides show where each keeps custom code.