> ## Documentation Index
> Fetch the complete documentation index at: https://docs.voiceaiwrapper.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

> Hide the floating widget completely and start AI voice calls or chat from your own buttons

Headless Mode lets you hide the floating widget completely and start AI voice calls or chat from your own buttons - your website keeps its design while the widget does the work invisibly in the background.

Embed the widget with the `hide-launcher` attribute, drive it with imperative methods (`startCall()`, `sendChatMessage()`, …) and react to namespaced DOM events (`voice.*`, `chat.*`, `widget.*`). The widget renders nothing - your page owns 100% of the UI.

<Warning>
  **Pro feature:** Headless Mode is available on our Pro tiers only. To use `hide-launcher` and the JavaScript API, upgrade your plan from the [dashboard](https://dashboard.voiceaiwrapper.app).
</Warning>

## Why Headless Mode?

You embed our widget on your website, but you may want the call or chat trigger to be *your own* branded button - a navbar link, a hero CTA, an image - not our floating launcher. Headless Mode removes our UI from the page entirely (even during an active call) and exposes a small, stable JavaScript API so any element on the page can become the trigger, and any part of the page can display the call or chat state.

## What you can rely on

<CardGroup cols={2}>
  <Card title="Truly invisible" icon="eye-off">
    With `hide-launcher`, the widget renders **nothing - ever**, even in the
    middle of an active call.
  </Card>

  <Card title="One API for every provider" icon="layers">
    The API is **identical across Vapi, Retell, and ElevenLabs** - same methods,
    same events, same payloads, same ordering. You never branch on the provider.
  </Card>

  <Card title="Never lose a click" icon="inbox">
    Calls and chat messages triggered before the widget finishes loading are
    **buffered**, never lost.
  </Card>

  <Card title="Guaranteed terminal events" icon="flag">
    Every started flow reaches a **guaranteed terminal event** - your state
    machine cannot get stuck.
  </Card>
</CardGroup>

## How it works

* **No SDK, no npm package.** One script tag plus one custom element. The API is plain DOM methods and events, so it works in React, Vue, Svelte, vanilla JS, and Webflow custom code alike.
* **Per-embed, not per-campaign.** `hide-launcher` is an attribute on the embed snippet. The same widget can be embedded normally on one page and headless on another.
* **Voice and chat are independent.** One invisible widget can power a call button and a custom chat panel at the same time.

## Next steps

<CardGroup cols={2}>
  <Card title="Quick start" icon="rocket" href="/documentation/widget/headless-mode/quickstart">
    A 5-minute integration: one attribute, five methods, copy-paste examples.
  </Card>

  <Card title="Methods" icon="square-code" href="/documentation/widget/headless-mode/methods">
    `startCall()`, `stopCall()`, `sendChatMessage()`, `endChatSession()`,
    `acceptConsent()`.
  </Card>

  <Card title="Events" icon="radio" href="/documentation/widget/headless-mode/events">
    The full `widget.*`, `voice.*`, and `chat.*` event reference with ordering
    guarantees.
  </Card>

  <Card title="Consent in Headless Mode" icon="shield-check" href="/documentation/widget/headless-mode/consent">
    How to show your own consent UI when "Require consent" is enabled.
  </Card>

  <Card title="Examples" icon="file-code" href="/documentation/widget/headless-mode/examples">
    Complete, copy-paste HTML examples for voice, chat, and both together.
  </Card>

  <Card title="Troubleshooting & FAQ" icon="wrench" href="/documentation/widget/headless-mode/troubleshooting">
    Requirements, gotchas, and answers to common questions.
  </Card>
</CardGroup>