Support

Embed the CZL Connect live chat widget on your site. Visitor messages arrive in your inbox in real time. You can optionally bind a WeCom bot so agents reply by quoting messages in WeCom. Available on the Plus plan and above.

Quick start

1. Open your app's detail page, go to "Support" > "Settings", enter the allowed sites (one origin per line: protocol + domain, optional port, no path. For example https://www.example.com or http://localhost:3000; https://*.example.com matches all subdomains, and http://127.0.0.1:* matches all ports, which suits desktop apps with changing local ports; * on its own allows any site to embed, which suits widgets distributed to third-party sites, and makes other entries redundant), turn on Support, and save
2. Copy the embed code from the settings page and place it before </body>:

<script src="https://connect.czl.net/support/widget.js" data-key="your-widget-key" async></script>

A chat button appears in the bottom-right corner of the page. Visitor messages show up in the "Support" inbox on the app detail page, and in the cross-app inbox under "Support" in the navigation bar.

Only the listed sites can embed the widget (browsers block other origins through frame-ancestors). The address of the page the visitor is currently on is shown to agents with every message.

After the page finishes loading and the browser is idle, the script preloads the chat panel in the background, so the content appears immediately when the visitor opens it. If the visitor opens it before preloading finishes, a placeholder skeleton is shown first. To disable preloading, add data-preload="none" to the script (browsers with data saver enabled do not preload either).

The widget UI is available in Chinese and English. By default it follows the visitor's browser language (anything other than Chinese shows English). To pin a language, add data-lang="zh" or data-lang="en" to the script.

Custom launcher

If you do not want the bottom-right button, add data-launcher="none" to the script, then add the data-czl-support attribute to any element on the page. Clicking it opens the chat panel next to that element:

<button data-czl-support>Contact support</button>
<script src="https://connect.czl.net/support/widget.js" data-key="your-widget-key" data-launcher="none" async></script>

• The panel opens below the launcher by default and flips above or to the side when there is not enough space; on phones it goes full screen
• Click elsewhere on the page or press Esc to close it
• The unread count is written to the launcher element's data-czl-support-unread attribute, so you can show a badge with CSS; you can also listen for the czl-support:unread event on window (event.detail.count)
• JS API: CZLSupport.open(element?), CZLSupport.close(), CZLSupport.toggle(element?)

Choose a launcher per page: public-facing pages (home, pricing, docs, help center) suit the bottom-right button. On pages that already have a button or fixed bar in the bottom-right corner, full-screen editors, mobile bottom navigation, or payment flows, use a custom launcher on the page instead. Login and authorization callback pages do not need support. A single-page app loads the script once; call CZLSupport.setLauncher(true / false) on route changes to show or hide the bottom-right button, and call CZLSupport.close() when leaving a page that offers support. Once the script is ready, it dispatches the czl-support:ready event on window.

Inline mode

To put the chat panel directly in a page (such as a "Contact us" page or a help center sidebar) instead of opening it from a button, use inline mode.

Embed with the script (recommended): add data-mode="inline" and data-target (a CSS selector for the container) to the script. The panel fills the container and stays visible, and no bottom-right button appears:

<div id="support-box" style="height: 600px"></div>
<script src="https://connect.czl.net/support/widget.js" data-key="your-widget-key" data-mode="inline" data-target="#support-box" async></script>

• The panel size follows the container; if the container has no height set, it renders at 560px. A width of at least 320px is recommended
• Visitor details such as data-identity and data-name, as well as CZLSupport.setIdentity / setVisitor, work as usual, and the visitor's page address is reported normally
• A page can use only one mode; do not load the default widget script on a page that uses inline mode

Write the iframe directly: where you can paste an iframe but cannot add a script (site builders, CMS rich text), embed the panel page directly:

<iframe src="https://connect.czl.net/support/embed/your-widget-key?mode=inline" title="Support" style="width: 100%; height: 600px; border: 0"></iframe>

This approach cannot pass visitor details, so every visitor is treated as anonymous; the visitor's page address comes from the referrer provided by the browser and may contain only the domain. Both approaches work only on origins listed in the allowed sites.

Other contact methods

In "Other contact methods" on the settings page, add up to 5 channels. When a visitor opens the widget, they can choose live chat or switch to these channels:

• Link: for example a WeCom customer service link https://work.weixin.qq.com/kfid/..., opened in a new window when clicked
• Image: for example an official account QR code, shown enlarged inside the widget when clicked so the visitor can scan or long-press it

Addresses must start with https://. Visitors who already have a conversation go straight back to it, and can switch to the other contact methods using the icon at the top of the widget.

Pre-chat form

On the settings page, configure the fields visitors fill in before starting a conversation: name, email, phone, and message. Each field can be shown or required independently; if all are turned off, visitors go straight into the conversation. The form content appears in the conversation header in the inbox and is pushed to WeCom with the new conversation notification.

When the email field is enabled, an agent's reply is delivered by email if the visitor is offline.

Pass visitor information

Logged-in users do not need to fill in the form again. There are two methods, depending on how much you want to trust the data:

Prefill (no backend required)

Set attributes on the script, or call CZLSupport.setVisitor when the user's login state changes:

<script src="https://connect.czl.net/support/widget.js" data-key="your-widget-key"
        data-name="Jane Doe" data-email="[email protected]" async></script>

CZLSupport.setVisitor({ name: 'Jane Doe', email: '[email protected]', phone: '' });

Prefilled information only fills in the form. Visitors can edit it, and the inbox does not mark it as verified.

Verified identity (recommended)

Your backend calls the app-level API to issue an identity token. The profile agents see carries a "Verified" mark, these fields are locked in the form, and the same user shares conversation history across devices.

1. In the app detail page under "API access", create a credential with the scope support:identity
2. After the user logs in, your backend issues a token (the credential must stay on the server):

curl -X POST https://connect.czl.net/api/v1/app/support/visitor-identity \
  -H "Authorization: Bearer czlc_live_xxx" \
  -H "Content-Type: application/json" \
  -d '{"externalId":"10086","name":"Jane Doe","email":"[email protected]"}'

{ "token": "svi_...", "expiresAt": "2026-11-04T12:00:00+08:00" }

• externalId is required and is the user identifier in your system (1-128 characters); name / email / phone are optional
• The token is valid for 24 hours, so issuing it when you render the page is enough; after it expires, the widget treats the visitor as anonymous

1. Pass the token to the widget:

<script src="https://connect.czl.net/support/widget.js" data-key="your-widget-key"
        data-identity="svi_..." async></script>

In a single-page app, call CZLSupport.setIdentity('svi_...') after the user logs in or switches accounts, and call CZLSupport.setIdentity('') when the user logs out.

Example: a site where users log in through CZL Connect (such as CZL AI) issues the token from its backend once it has the logged-in user, using the site's user ID as externalId and the account profile for name / email. Visitors can open support and chat right away, and agents see verified account information.

Images and files

Both visitors and agents can send images and files in a conversation, up to 10 MB each. Images display inline in the conversation, and files download on click. Besides the attachment button, you can paste a screenshot or drag a file into the conversation box, then confirm to send. When conversation records are purged according to the plan's retention period, the related images and files are deleted too.

Delete a conversation

App owners and admins can permanently delete a conversation from the inbox. Its messages, images, and files are deleted with it and cannot be recovered. If the visitor writes again, a new conversation starts (and counts toward the new conversation quota).

Team members

On the app detail page, "Team members" lets you invite colleagues to collaborate. You can only invite users who are registered with CZL Connect: enter their username or verified email, and the invitation takes effect once they accept it under "Account settings > Teams". Invitations are valid for 7 days, and if the invitee has a verified email, they receive an invitation notification.

• Members are independent of your app's logged-in users: they do not count toward monthly active users, do not appear in the user list, and do not appear in the groups sent to your app
• After an invitee declines, you cannot invite them again for 7 days; members can leave the team at any time
• Invitations, role changes, removals, acceptances, and departures are all recorded in the activity log

WeCom forwarding

Visitor messages can be forwarded to a WeCom group or direct chat, and agents reply to visitors by quoting the message.

Add a bot

1. In the WeCom admin console, create a smart bot, turn on "API mode", choose "Long connection", and get the BotID and Secret. We recommend having a WeCom super admin create it; otherwise reply records can only show an encrypted member ID
2. In CZL Connect, go to "Account settings > Integrations" and add the bot. One bot can be shared by multiple apps under your account; a bot can only be added by one account
3. A bot can hold only one long connection at a time. If another program also opens a long connection with it, CZL Connect stops connecting and shows a notice in the bot status; once you have confirmed, click "Reconnect"

Bind an app

1. On the app detail page, go to "Support" > "Settings" > "WeCom forwarding", select a bot, and generate a binding code (valid for 10 minutes)
2. Send the binding code to the bot in WeCom: send it directly in a direct chat, or @ the bot in a group chat. Conversations are forwarded to whichever chat the code was sent in
3. Multiple apps can be bound to the same group; forwarded messages begin with the app name

Messaging rules

• A new conversation (including one where the visitor only submitted the form) immediately pushes a full card with the visitor's details, the page they came from, and a link to the inbox; later messages in the same conversation carry only a one-line header with the visitor name and conversation ID, plus a page line when the visitor's page changes. Consecutive messages from the same visitor are merged into a single forwarded message
• Images sent by visitors appear directly in the forwarded message, and files follow as file messages
• Reply: quote the forwarded message and type your reply. In a group chat, @ the bot. The conversation ID in the forwarded message (such as #S7K2Q) determines which visitor receives the reply, so do not delete it
• Send images / files: image and file messages in WeCom cannot be quoted. First reply with a text message that quotes the visitor's message; for the next 30 minutes, images or files you send directly to the bot go to the same visitor. The bot replies with "Sent N attachments to #ID" so you can confirm you did not send to the wrong person when handling several visitors at once
• "Branch replies" in group chats can only @ members, not the bot, so use quote replies
• WeCom limits each chat to 30 messages per minute and 1,000 per hour (replies and forwards share the limit). Messages over the limit remain in the inbox, and the next forwarded message states how many were not forwarded

Offline email

After an agent replies, if the visitor has left and provided an email, the reply is sent to the visitor's email 2 minutes later, with at most one email per conversation every 30 minutes. The email contains the reply text and a link back to your site to continue the conversation.

Offline emails count toward the account's monthly broadcast quota. Visitors can unsubscribe from the app's notifications with one click in the email, and no longer receive offline emails after unsubscribing.

Plan limits

• If the same visitor writes again within 24 hours and the conversation has not ended, the original conversation continues and does not count as a new one
• Once this month's new conversation quota is used up, existing conversations continue as normal and new visitors see "Support is busy right now"
• Only Enterprise can hide "Powered by CZL Connect" at the bottom of the widget