Skip to main content
Version: v1

Vue (Browser Widget)

@monoverse/voicebot-vue is an npm package that drops the VoiceBot talking widget onto a Vue 3 or Nuxt app with one component and your public key.

It is a thin wrapper over the already-deployed VoiceBot browser embed. The package injects the CDN bundle and hands it your pk_; the deployed widget self-bootstraps — it exchanges the pk_ (plus the browser-set Origin) for an origin-locked session token and mounts, grounded in your store's catalog. No merchant backend is required, and there is no widget code in this package.

<script setup lang="ts">
import { VoiceBotWidget } from '@monoverse/voicebot-vue';
</script>

<template>
  <VoiceBotWidget public-key="pk_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" />
</template>

Embed vs. the Vue wrapper​

Two ways to load the same deployed bundle:

  • The wrapper (@monoverse/voicebot-vue) — a <VoiceBotWidget> component (and a useVoiceBot composable) that injects the script in onMounted, tears it down in onBeforeUnmount, and reuses any VoiceBot script already on the page. This is the idiomatic Vue path.
  • The bare embed — a single <script ... data-public-key> tag. The deployed bundle is plain JS, so a script tag with no package works too. See the Vanilla path for the framework-free embed.

The wrapper is what most Vue apps want; the bare embed is there if you'd rather not add a dependency.

Channels​

This is Channel 2 — the browser widget for your end users. It is distinct from Channel 1 (server-side catalog/content sync, e.g. the Laravel package) that feeds the data the assistant is grounded in.

Origin locking​

Your pk_ is bound to an allow-list of exact origins that may use it. Matching is exact, with no wildcards — the origin is the security boundary.

  • List every origin explicitly. https://shop.example, https://www.shop.example, and https://app.shop.example are three different origins.
  • www and subdomains are not inherited — register each one separately.
  • An origin is scheme://host[:port]. http ≠ https, and a non-default dev port is part of the origin, so register your local origins too (e.g. http://localhost:5173).
  • Origin: null is never accepted — sandboxed iframes, file://, and other opaque origins cannot mint a token.
Two gates, same origin

The origin is checked twice: once when minting the session token (HTTP 403 on miss) and again on the WebSocket upgrade (close code 4403 on miss). Both must see an allow-listed origin.

What works now vs. the next tier​

Works now — a consultant grounded in your catalog: it answers product questions, recommends items, and describes your shipping and payment options from your store data.

Next tier (not in this package) — first-party actions: routing add_to_cart, navigation, or other writes into your own app state. That needs the handler-registration SDK (createWidget + merchant executors) and is a separate, heavier package. This wrapper is a script injector, not an action bridge.

Next steps​