Install the chat on a React site

The web 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: chat updates arrive without updating the package.

Using an AI assistant in your code editor? In App settings > Developers > Getting started, pick “With your AI assistant” and copy the Setup prompt, also in Documentation > Quick start. It installs the chat for you, then tells you what it did.

1. Open App settings > Developers > Getting started. In the install step, pick your framework in “Tool”: “Next.js”, “React Router”, “TanStack Start” or “React”.
2. Install the package, then paste the code shown into the file named above it.
3. Open your site on your computer: the chat button shows at the bottom of the page.
4. Before going live, set your site’s domain in App settings > Developers > Domain, apps and pages. The site moves to Production as soon as the chat shows on that domain: see Development and Production Modes.

1. Install the package

npm install @zean-chat/react

2. Add the chat to every page

Put the ZeanChat component once, in what wraps all your pages: the root layout with Next.js, app/root.tsx with React Router, the root route with TanStack Start. The chat stays open from page to page.

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>  );}

This code is an example: app_your_app_key stands for the real key. The code with your App’s key, for your framework, is in App settings > Developers > Getting started: copy it from there. Server rendering is supported: the component does nothing on the server.

While the Contact has replies to read, your site’s tab shows their number in its title and a red dot on its icon. Your developers can turn it off: see Show the unread count.

For your developers

React Router and TanStack Start, the button that opens the chat, the unread count, the Contact’s identity and the language: every option is in Documentation > React.