Install with Vue

When AI replies are enabled for the App, the chat identifies AI answers and offers “Talk to a Member”. No extra SDK option or AI secret is required. Provider keys stay on the server.

The SDK for Vue adds the chat to a Nuxt or Vue site. It loads the same chat as the Install code: its updates arrive without updating the package.

1. Set your Domain

In App settings > Developers > Domain, apps and pages, type your site’s domain in “Domain”, for example kibomarket.com: it also covers www.kibomarket.com. On any other domain, the chat stays hidden. Nothing to set on your computer: localhost is always allowed.

2. Install the package

npm install @zean-chat/vue

3. Add the plugin

With Nuxt, create this plugin. It does nothing on the server.

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

With Vue, add it where the app is created:

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

Options

createZean({  appKey: "app_your_app_key",  locale: "fr",  user: { id: "1042", name: "Awa Diallo", email: "awa@example.com" }});

• appKey: your App’s key. Required.
• locale: "fr" or "en". Without it, the browser’s language. See Language.
• tabAlert: false stops showing the unread count in your tab’s title and a red dot on its icon. See Show the unread count.
• user: the person already signed in when the page loads. Later on, use identify() and signOut(). See Identify your Contacts.

Control the chat from your components

useZean() gives open(), close() and toggle(), unreadCount, a ref of the number of unread replies, and identify(), signOut() and setAttributes().

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

Every option and method: @zean-chat/vue reference.

Before production

In App settings > Developers > Getting started, your site is in Development or Production Mode. The Mode only changes the steps shown: same App key, same Inbox, nothing to change in your code. In production, the chat still works on localhost.

• Domain (required): set your site’s domain in App settings > Developers > Domain, apps and pages.
• Chat seen on the Domain (required): open your live site, not localhost. The first time the chat shows there, the site moves to Production by itself.
• Webhook (optional, if you use one): set your server’s address in App settings > Developers > Webhook, then check a first successful delivery. See Receive events with a webhook.

Next

• Identify signed-in people.
• Send attributes about the Contact.
• Pick the language of the chat.