@velnai/chat-vue

Drop the Velnai web-chat widget into any Vue 3 app.

npm install @velnai/chat-vue

Usage

Mount the Provider once at your app root:

<script setup lang="ts">
import { VelnaiChatProvider } from '@velnai/chat-vue'
</script>

<template>
  <VelnaiChatProvider
    public-key="wac_xxx"
    :visitor-attrs="{ email: user.email, plan: user.plan }"
    @ready="() => console.log('chat ready')"
  >
    <YourApp />
  </VelnaiChatProvider>
</template>

Control the widget from any child component via the composable:

<script setup lang="ts">
import { useVelnaiChat } from '@velnai/chat-vue'

const { open, reset } = useVelnaiChat()
</script>

<template>
  <button @click="open">Need help?</button>
  <button @click="reset">Log out</button>
</template>

Props

| Prop | Type | What it does | |---|---|---| | publicKey | string | The agent's public key (wac_xxx). | | visitorAttrs | Record<string, string \| number \| boolean \| null> | Visitor identity. Max 16 keys. | | widgetBase | string | Override the widget host. Default https://widget.velnai.com. |

Events

| Event | When | |---|---| | ready | The bubble has loaded. | | open | The visitor opened the panel. | | close | The visitor closed the panel. |

Composable API

useVelnaiChat() returns identify(attrs), reset(), getAttrs(), open(), close().

License

MIT