Installer avec React Native

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 React Native ajoute le chat de votre App à votre application iOS et Android. Il est écrit en React Native simple : il ne demande aucun module natif à lui seul. Vos Contacts écrivent comme sur votre site, et leurs messages arrivent dans la même boîte de réception.

1. Saisir le Bundle ID et le nom de package

1. Ouvrez Paramètres de l’App > Développeurs > Domaine, apps et pages.
2. Dans « Domaine, apps et pages », saisissez le « Bundle ID (iOS) » et le « Nom de package (Android) » de votre application, par exemple com.kibomarket.app, puis enregistrez.
3. Avec Expo, ce sont ios.bundleIdentifier et android.package dans app.json.

Le chat ne s’affiche que dans ces deux applications : une autre application qui reprend votre clé n’affiche rien, et une plateforme sans son identifiant non plus. Dans Expo Go, il s’affiche toujours, pour l’essayer avant la publication de l’application.

Une App prend un seul Bundle ID et un seul Package name. Votre application a d’autres builds avec leurs propres identifiants, comme com.kibomarket.app.staging ? Créez une App pour chacun, et donnez à chaque build sa clé d’App depuis la configuration de votre application.

2. Installer les paquets

Dites ce que votre application a déjà : les commandes et le code de cette documentation n’ajoutent que ce qui manque.

npx expo install @zean-chat/react-native expo-application @react-native-async-storage/async-storage expo-image-picker

• Le chat garde la conversation sur le téléphone avec le stockage que votre application a déjà, AsyncStorage, MMKV ou Expo SQLite : il le trouve seul, sans code. Sans stockage, la commande ajoute AsyncStorage.
• expo-application (Expo) ou react-native-device-info (React Native CLI) lit le Bundle ID et le nom de package de votre application : sans lui, le chat reste caché.
• Le sélecteur de photos, expo-image-picker ou react-native-image-picker, est facultatif : sans lui, le chat n’a pas de bouton photo. Voir Photos.
• Ces modules sont natifs : ajoutez-les dans une nouvelle version de votre application. Expo Go les contient déjà.

3. Autoriser l’accès aux photos

{  "expo": {    "plugins": [      [        "expo-image-picker",        {          "photosPermission": "Envoyer une photo dans le chat."        }      ]    ]  }}

• Le plugin est déjà dans app.json : gardez ses options et ajoutez seulement ce qui manque.
• Votre application n’utilise jamais l’appareil photo ? Vous pouvez ajouter "cameraPermission": false au plugin, et "microphonePermission": false si elle n’enregistre jamais de son : l’application ne demande alors rien de plus que ce dont le chat a besoin. Sinon, ne les ajoutez pas : ils coupent l’appareil photo ou le micro dans toute l’application.
• Votre application a déjà un texte pour les photos, dans app.json ou Info.plist : gardez le vôtre. Le chat n’en demande pas.

4. Ajouter le chat

Affichez ZeanChat une seule fois, à la racine de l’application, avec la clé de votre App. Le chat s’ouvre dans un Modal de React Native : il fonctionne avec Expo Router, React Navigation ou sans navigation.

import { NavigationContainer } from "@react-navigation/native";import { ZeanChat } from "@zean-chat/react-native";export default function App() {  return (    <>      <NavigationContainer>        {/* Vos écrans */}      </NavigationContainer>      <ZeanChat appKey="app_your_app_key" />    </>  );}

5. Ouvrir le chat

Le chat n’a pas de bouton flottant : appelez open() de useZean() depuis un de vos boutons, sur n’importe quel écran. unreadCount donne le nombre de réponses que le Contact n’a pas lues.

import { useZean } from "@zean-chat/react-native";import { Button } from "react-native";export function HelpButton() {  const { open, unreadCount } = useZean();  return <Button title={unreadCount > 0 ? `Aide (${unreadCount})` : "Aide"} onPress={open} />;}

• Sur iPhone, le chat s’ouvre en feuille, que le Contact glisse vers le bas pour la fermer.
• Sur Android et sur iPad, il s’ouvre en plein écran, fermé avec le bouton retour ou la croix.

Les props

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

• appKey : obligatoire.
• storage : laissez-le de côté, le chat trouve l’AsyncStorage, le MMKV ou l’Expo SQLite de votre application. Passez-en un pour le choisir.
• locale : "fr" ou "en". Sans elle, la langue du téléphone. Voir Langue.
• colorScheme : "light" ou "dark". Sans elle, le thème du téléphone. Voir Apparence.
• maxPhotos : les photos par message, de 1 à 6. Sans elle, 4. Voir Photos et fichiers.
• user et attributes : comme sur le web. Voir Identifier vos Contacts et Attributs.

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

Dans Paramètres de l’App > Développeurs > Démarrage, choisissez « React Native » : l’installation est cochée dès que votre application se connecte avec son Bundle ID ou son nom de package.

Avant la production

Dans Paramètres de l’App > Développeurs > Démarrage, votre application 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 s’affiche toujours dans Expo Go.

• Bundle ID ou nom de package (obligatoire) : saisissez celui d’au moins un système, iOS ou Android, dans Paramètres de l’App > Développeurs > Domaine, apps et pages.
• Build de release vu (obligatoire) : lancez un build de release de l’application avec cet identifiant, pas un build de développement ni Expo Go, et ouvrez le chat. La première fois, l’application passe en Production toute seule.
• 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.