Installer le chat sur un site React

Le SDK web pour React ajoute le chat à un site Next.js, React Router, TanStack Start ou React. Il charge le même chat que le code d’installation : les mises à jour du chat arrivent sans mettre à jour le paquet.

Vous utilisez un assistant IA dans votre éditeur de code ? Dans Paramètres de l’App > Développeurs > Démarrage, choisissez « Avec votre assistant IA » et copiez le prompt d’installation, aussi dans Documentation > Démarrage rapide. Il installe le chat pour vous, puis vous dit ce qu’il a fait.

1. Ouvrez Paramètres de l’App > Développeurs > Démarrage. Dans l’étape d’installation, choisissez votre framework dans « Outil » : « Next.js », « React Router », « TanStack Start » ou « React ».
2. Installez le paquet, puis collez le code affiché dans le fichier indiqué au-dessus.
3. Ouvrez votre site sur votre ordinateur : le bouton du chat apparaît en bas de la page.
4. Avant la mise en ligne, saisissez le domaine de votre site dans Paramètres de l’App > Développeurs > Domaine, apps et pages. Le site passe en Production dès que le chat s’affiche sur ce domaine : voir Les modes Développement et Production.

1. Installer le paquet

npm install @zean-chat/react

2. Ajouter le chat à chaque page

Placez le composant ZeanChat une seule fois, dans ce qui entoure toutes vos pages : le layout racine avec Next.js, app/root.tsx avec React Router, la route racine avec TanStack Start. Le chat reste ouvert d’une page à l’autre.

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

Ce code est un exemple : app_your_app_key tient la place de la vraie clé. Le code avec la clé de votre App, pour votre framework, se trouve dans Paramètres de l’App > Développeurs > Démarrage : copiez-le depuis cette page. Le rendu côté serveur est pris en charge : le composant ne fait rien sur le serveur.

Tant que le Contact a des réponses à lire, l’onglet de votre site affiche leur nombre dans son titre et un point rouge sur son icône. Vos développeurs peuvent le désactiver : voir Afficher le nombre de messages non lus.

Pour vos développeurs

React Router et TanStack Start, le bouton qui ouvre le chat, les messages non lus, l’identité du Contact et la langue : toutes les options sont dans la Documentation > React.