Installer avec React

Lorsque les Réponses IA sont activées pour l’App, le chat identifie les réponses de l’IA et propose « Parler à un membre ». Aucun paramètre SDK ni secret IA supplémentaire n’est nécessaire. Les clés du fournisseur restent sur le serveur.

Le SDK 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 : ses mises à jour arrivent sans mettre à jour le paquet.

1. Saisir votre domaine

Dans Paramètres de l’App > Développeurs > Domaine, apps et pages, saisissez le domaine de votre site dans « Domaine », par exemple kibomarket.com : il couvre aussi www.kibomarket.com. Sur un autre domaine, le chat reste caché. Sur votre ordinateur, rien à régler : localhost est toujours autorisé.

2. Installer le paquet

npm install @zean-chat/react

3. Ajouter le chat à chaque page

Affichez ZeanChat une seule fois, dans ce qui entoure toutes vos pages. Il n’affiche rien lui-même : le chat vit dans son propre cadre et reste ouvert d’une page à l’autre.

Next.js, dans la mise en page racine :

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, à côté de 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, dans la route racine :

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, dans le composant de l’application :

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

Le rendu serveur est pris en charge : le paquet porte déjà 'use client', et ZeanChat ne fait rien sur le serveur.

Les 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 : la clé de votre App. Obligatoire.
• locale : "fr" ou "en". Sans elle, la langue du navigateur. Voir Langue.
• tabAlert : false n’affiche plus le nombre de messages non lus dans le titre de votre onglet ni le point rouge sur son icône. Voir Afficher le nombre de messages non lus.
• user : tant qu’une personne est connectée, son ID, son nom et son email. Voir Identifier vos Contacts.
• attributes : ce que la page sait de la personne. Voir Attributs.

Piloter le chat depuis vos composants

useZean() fonctionne dans n’importe quel composant, même avant le chargement du chat. Il donne open(), close() et toggle(), unreadCount, le nombre de réponses non lues, et identify(), signOut() et setAttributes().

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

Chaque prop et chaque méthode : Référence de @zean-chat/react.

Avant la production

Dans Paramètres de l’App > Développeurs > Démarrage, votre site est en mode Développement ou Production. Le mode ne change que les étapes affichées : même clé d’App, même boîte de réception, rien à changer dans votre code. En production, le chat fonctionne toujours sur localhost.

• Domaine (obligatoire) : saisissez le domaine de votre site dans Paramètres de l’App > Développeurs > Domaine, apps et pages.
• Chat vu sur le domaine (obligatoire) : ouvrez votre site en ligne, pas sur localhost. La première fois que le chat s’y affiche, le site passe en Production tout seul.
• Webhook (facultatif, si vous en utilisez un) : saisissez l’adresse de votre serveur dans Paramètres de l’App > Développeurs > Webhook, puis vérifiez un premier envoi réussi. Voir Recevoir les événements par webhook.

Ensuite

• Identifier les personnes connectées.
• Envoyer des attributs sur le Contact.
• Choisir la langue du chat.