Install on a website

When AI replies are enabled for the App, the chat identifies AI answers and offers “Talk to a Member”. No extra SDK option or AI secret is required. Provider keys stay on the server.

The Install code adds the chat to any website, whatever it is built with. It never changes: chat updates and your appearance changes arrive without touching it.

1. Set your Domain

The chat only shows on your App’s Domain. localhost is always allowed: you test on your computer with nothing to set.

1. Open App settings > Developers > Domain, apps and pages.
2. In “Domain”, type your site’s domain, for example kibomarket.com, then save.
3. It also covers www.kibomarket.com. Another subdomain, such as shop.kibomarket.com, is another site: it needs its own App.

On any other domain, the chat stays hidden and the browser console says why. All the rules: Set your site’s Domain.

2. Paste the code

Copy the Install code and paste it just before the </body> tag, on every page. Keep both script tags together, in this order.

<script>  window.zean = { appKey: "app_your_app_key" };</script><script async src="https://widget.zean.chat/loader.js"></script>

Open your site on your computer: the chat button shows at the bottom of the page.

Control the chat from your page

While the Contact has replies to read, your tab’s title shows their count and its icon a red dot. To turn this off, add tabAlert: false to window.zean. See Show the unread count.

Once the code has loaded, window.zean holds the chat’s methods:

window.zean.open();   // opens the chatwindow.zean.close();  // closes itwindow.zean.toggle(); // switches between the two// The number of replies the Contact has not readconst count = window.zean.getUnreadCount();// Called each time that number changesconst stop = window.zean.onUnreadChange(count => {  document.querySelector("#help-badge").textContent = count > 0 ? String(count) : "";});

Before the chat has loaded, window.zean only holds your settings: call these methods once the page has loaded, for example after a click, or use the @zean-chat/js package, which queues the calls. See Website and @zean-chat/js reference.

Pick the language

The chat follows the Contact’s browser language, or your App’s default language when it does not speak it. Add locale, "fr" or "en", to pick it:

<script>  window.zean = { appKey: "app_your_app_key", locale: "fr" };</script><script async src="https://widget.zean.chat/loader.js"></script>

Single-page apps

On a site that changes page without reloading, paste the code once, in the page that serves all the others. The chat stays open from page to page. With React or Vue, prefer your framework’s SDK.

Before production

In App settings > Developers > Getting started, your site is in Development or Production Mode. The Mode only changes the steps shown: same App key, same Inbox, nothing to change in your code. In production, the chat still works on localhost.

• Domain (required): set your site’s domain in App settings > Developers > Domain, apps and pages.
• Chat seen on the Domain (required): open your live site, not localhost. The first time the chat shows there, the site moves to Production by itself.
• Webhook (optional, if you use one): set your server’s address in App settings > Developers > Webhook, then check a first successful delivery. See Receive events with a webhook.

Next

• Identify signed-in people.
• Send attributes about the Contact.
• Pick the language of the chat.