Zean

Installer

Installer avec Vue

Nuxt ou Vue : installez @zean-chat/vue et ajoutez son plugin à votre application.

Mis à jour le 28 octobre 2026

Les exemples affichent app_your_app_key. Ouvrez ce guide depuis Paramètres de l’App > Développeurs > Démarrage pour y voir la clé de votre App.

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 Vue ajoute le chat à un site Nuxt ou Vue. Il charge le même chat que le code d’installation : ses mises à jour arrivent sans mettre à jour le paquet.

Avec un assistant IA, un seul prompt installe le chat pour vous.

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

Terminal
npm install @zean-chat/vue

3. Ajouter le plugin

Avec Nuxt, créez ce plugin. Il ne fait rien sur le serveur.

app/plugins/zean.ts
import { createZean } from "@zean-chat/vue";export default defineNuxtPlugin(nuxtApp => {  nuxtApp.vueApp.use(createZean({ appKey: "app_your_app_key" }));});

Avec Vue, ajoutez-le là où l’application est créée :

src/main.ts
import { createApp } from "vue";import { createZean } from "@zean-chat/vue";import App from "./App.vue";createApp(App).use(createZean({ appKey: "app_your_app_key" })).mount("#app");

Les options

JSX
createZean({  appKey: "app_your_app_key",  locale: "fr",  user: { id: "1042", name: "Awa Diallo", email: "awa@example.com" }});
  • 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 : la personne déjà connectée au chargement. Ensuite, utilisez identify() et signOut(). Voir Identifier vos Contacts.

Piloter le chat depuis vos composants

useZean() donne open(), close() et toggle(), unreadCount, une ref du nombre de réponses non lues, et identify(), signOut() et setAttributes().

components/HelpButton.vue
<script setup lang="ts">import { useZean } from "@zean-chat/vue";const { open, unreadCount } = useZean();</script><template>  <button @click="open">Aide ({{ unreadCount }})</button></template>

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

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