Skip to main content
Version: next

Frontend — add the widget

This is Axis 2: the talking widget your end users see on your website. Every option here is a thin wrapper over the same deployed VoiceBot browser bundle — you hand it your public key, and the bundle self-mounts, grounded in whatever your backend has ingested. Pick the framework you ship; it composes with any backend.

No merchant backend required for the widget itself

The widget exchanges your pk_ for an origin-locked session token and connects directly to VoiceBot. The only data it needs is the catalog your backend axis pushes.

How every wrapper works​

The shape is the same regardless of framework:

  1. Get a publishable key pk_… and register the exact origins allowed to use it.
  2. Render once — drop one component (or one script tag) near your app root with the pk_.
  3. The deployed bundle self-mints its session and mounts the widget.

The key model and the origin allow-list rules are the same everywhere — see Tenant isolation. The per-framework pages below are the shortest path to a mounted widget.

React​

Available now. @monoverse/voicebot-react drops the widget with one component. Start at the React overview.

Vue​

Available now. @monoverse/voicebot-vue is a Vue 3 wrapper with the same single-prop API (and a useVoiceBot composable), SSR-safe for Nuxt. Start at the Vue overview.

Next.js​

Available now. @monoverse/voicebot-next is a Next-aware wrapper that loads via next/script (afterInteractive, SSR-safe) — render it once in your App Router root layout. Start at the Next.js overview. The React wrapper also works in Next.js inside a client boundary if you prefer a useEffect injector.

Vanilla JS​

Available now. A no-framework snippet: one <script> plus your pk_, no package at all. The deployed widget bundle is plain JS, so a script-tag embed self-bootstraps. Start at the Vanilla overview.

Next steps​