Install with React

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 SDK for React adds the chat to a Next.js, React Router, TanStack Start or React site. It loads the same chat as the Install code: its updates arrive without updating the package.

1. Set your Domain

In App settings > Developers > Domain, apps and pages, type your site’s domain in “Domain”, for example kibomarket.com: it also covers www.kibomarket.com. On any other domain, the chat stays hidden. Nothing to set on your computer: localhost is always allowed.

2. Install the package

npm install @zean-chat/react

3. Add the chat to every page

Render ZeanChat once, in what wraps all your pages. It renders nothing itself: the chat lives in its own frame and stays open from page to page.

Next.js, in the root layout:

import { ZeanChat } from "@zean-chat/react";export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html>      <body>        {children}        <ZeanChat appKey="app_your_app_key" />      </body>    </html>  );}

React Router, next to Outlet:

import { Outlet } from "react-router";import { ZeanChat } from "@zean-chat/react";export default function App() {  return (    <>      <Outlet />      <ZeanChat appKey="app_your_app_key" />    </>  );}

TanStack Start, in the root route:

import { Outlet, createRootRoute } from "@tanstack/react-router";import { ZeanChat } from "@zean-chat/react";export const Route = createRootRoute({ component: Root });function Root() {  return (    <>      <Outlet />      <ZeanChat appKey="app_your_app_key" />    </>  );}

React, in the app component:

import { ZeanChat } from "@zean-chat/react";export default function App() {  return (    <>      {/* Your app */}      <ZeanChat appKey="app_your_app_key" />    </>  );}

Server rendering is supported: the package already carries 'use client', and ZeanChat does nothing on the server.

Props

<ZeanChat  appKey="app_your_app_key"  locale="fr"  user={user ? { id: user.id, name: user.name, email: user.email } : undefined}  attributes={{ plan: "pro", orders: 12 }}/>

• appKey: your App’s key. Required.
• locale: "fr" or "en". Without it, the browser’s language. See Language.
• tabAlert: false stops showing the unread count in your tab’s title and a red dot on its icon. See Show the unread count.
• user: while a person is signed in, their ID, name and email. See Identify your Contacts.
• attributes: what the page knows about the person. See Attributes.

Control the chat from your components

useZean() works in any component, even before the chat has loaded. It gives open(), close() and toggle(), unreadCount, the number of unread replies, and identify(), signOut() and setAttributes().

import { useZean } from "@zean-chat/react";export function HelpButton() {  const { open, unreadCount } = useZean();  return <button onClick={open}>Help ({unreadCount})</button>;}

Every prop and method: @zean-chat/react reference.

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.