@velnai/chat-svelte

Drop the Velnai web-chat widget into any Svelte app.

npm install @velnai/chat-svelte

Usage

Mount the Provider once in your root layout:

<!-- +layout.svelte -->
<script lang="ts">
  import { VelnaiChatProvider } from '@velnai/chat-svelte'
</script>

<VelnaiChatProvider
  publicKey="wac_xxx"
  visitorAttrs={{ email: user.email, plan: user.plan }}
  on:ready={() => console.log('chat ready')}
>
  <slot />
</VelnaiChatProvider>

Control the widget from any child component:

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

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

<button on:click={open}>Need help?</button>
<button on:click={reset}>Log out</button>

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. |

Hook API

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

License

MIT