VoiceThere

Embed widget designer

The Widget tab on each project lets you style the floating chat launcher visitors see on your site — presets, brand colors, launcher label, greeting, and corner position. Preview updates live in the dashboard; Deploy publishes appearance settings to the VoiceThere CDN so customer pages can load theme changes without redeploying their own HTML.

Dashboard: Widget tab

  • Path: Project → Widget (/projects/:projectId/widget)
  • Presets: pill-dark, pill-light, rounded-card, minimal-bar, voice-orb
  • Brand colors: primary, background, and text (hex)
  • Save draft: stores styling in the project database — preview reflects the draft immediately
  • Deploy: publishes a public config.json to the VoiceThere CDN and purges the stable URL so browsers fetch the latest revision

After Deploy, copy the embed snippet from Project → Access. It uses createVoiceThereWidgetAsync to load launcher appearance from the CDN URL while keeping your clientKey inline on the host page.

Public config (no client API key)

The published JSON contains appearance and bootstrap fields only— preset, theme, position, labels, projectId, apiBase, mode, and revision. It never includes your clientKey or other secrets.

After Deploy succeeds, the Widget tab and Access page show the stable CDN URL:

https://cdn.voicethere.io/widgets/w_…/config.json

The opaque w_… segment is a public widget id — not your project UUID. Appearance is served from a dedicated VoiceThere CDN hostname (production cdn.voicethere.io).

Embed on your site

Paste the embed snippet from Project → Access (@voicethere/client 0.8.1). Keep your clientKey, projectId, and apiBase in the host page — the CDN JSON never includes the key.

<script type="module">
  import { createVoiceThereWidgetAsync } from "https://esm.sh/@voicethere/[email protected]/embed";

  await createVoiceThereWidgetAsync({
    apiBase: "https://sessions.voicethere.io/v1",
    projectId: "your-project-uuid",
    clientKey: "vtc_…",
    mode: "chat",
    configUrl: "https://cdn.voicethere.io/widgets/w_…/config.json",
  });
</script>

configUrl is included only after you Deploy the widget. If the CDN JSON is missing or unreachable, the client still mounts from your inline options and logs a console warning — useful before the first Deploy or during a brief CDN propagation window.

For iframe permissions, microphone fallback, and autoplay behavior, see Browser client → Embed widget.

CORS for your site

The CDN JSON is a public GET (no credentials). Your production and staging site origins still belong on Project → Access → Allowed web origins so the browser can call the sessions API with your client key.

Browser CORS origins

Related

← All documentation