> ## Documentation Index > Fetch the complete documentation index at: https://docs.thunderphone.com/llms.txt > Use this file to discover all available pages before exploring further. # CDN / Script Tag > Add the ThunderPhone voice widget to any website without a bundler The CDN build bundles React internally, so you can use the widget on static sites, WordPress, Webflow, or any page where you can add HTML. No npm, no bundler, no framework required. ## CDN URLs ```html Latest (recommended) theme={null} ``` ```html Pinned version theme={null} ``` The `latest` URLs are what the dashboard's embed snippet generator produces. They are cached for 5 minutes and pick up new stable releases automatically. Pinned `/widget/vX.Y.Z/` paths are immutable and cached long-term -- if you pin, match the version to the `@thunderphone/widget` npm release you develop against. *** ## Basic Usage ```html theme={null}

``` The widget mounts into the target element and renders as a **fixed-position bar in a corner of the viewport** (default `bottom-right`, controlled by the `position` option). The mount element is only the React root -- its location in the page does not affect where the widget appears. *** ## Mount Options `ThunderPhone.mount()` accepts the same options as the React component, plus the `element` property: | Option | Type | Required | Default | Description | | ---------------- | -------------------------------------------------------------- | -------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | | `element` | `string \| HTMLElement` | Yes | -- | CSS selector (e.g., `'#thunderphone'`) or a DOM element reference. | | `publishableKey` | `string` | Yes | -- | Publishable API key (`pk_live_...`). The agent is resolved automatically from the key's widget configuration. | | `theme` | `'light' \| 'dark'` | No | `'light'` | Color scheme. | | `primaryColor` | `string` | No | `'#000000'` (light) / `'#ffffff'` (dark) | CSS color string used as the accent color. | | `title` | `string` | No | `'Voice assistant'` | Text displayed in the widget bar. | | `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | No | `'bottom-right'` | Fixed viewport position. | | `apiBase` | `string` | No | `'https://api.thunderphone.com/v1'` | API base URL override. | | `language` | `string` | No | -- | Per-session language override -- a language code or locale such as `en`, `es`, or `fr-FR`. When unset, the agent's configured language applies. | | `voice` | `string` | No | -- | Per-session voice override -- a voice name such as `maria`. When unset, the agent's configured voice applies. | | `context` | `string` | No | -- | Per-session factual page or site context passed to the agent. Truncated server-side to 12,000 characters. | | `onConnect` | `() => void` | No | -- | Called when the voice session connects. | | `onDisconnect` | `() => void` | No | -- | Called when the session ends. | | `onError` | `(error) => void` | No | -- | Called on errors. Error has `error` (code) and `message` fields. | | `ringtone` | `boolean \| string` | No | `false` | Play a ringtone while connecting. `true` for the default ringtone, or a URL string for custom audio. | *** ## Cleanup `ThunderPhone.mount()` returns a widget instance with cleanup methods: ```html theme={null} ``` Both `unmount()` and `destroy()` do the same thing -- they disconnect any active voice session and remove the widget from the DOM. Use whichever reads better in your code. Always clean up the widget when navigating away in single-page applications or when the containing element is removed. This ensures active voice sessions are properly disconnected. *** ## Examples ### Dark Theme with Custom Color ```html theme={null}

``` ### Custom Position ```html theme={null}

``` ### With Event Callbacks ```html theme={null}

``` ### With Ringtone ```html theme={null}

``` ### Using a DOM Element Reference ```html theme={null}

``` ### WordPress / CMS Integration Add this to a Custom HTML block or your theme's footer: ```html theme={null} ``` The `

` can go anywhere -- it is only the mount point. The widget itself renders as a fixed overlay in a viewport corner (set by the `position` option) and does not flow with surrounding content. *** ## Troubleshooting Make sure both the CSS and JS files are loaded. Check the browser console for network errors. Verify that the target element exists in the DOM before calling `ThunderPhone.mount()`. The script has not loaded yet. Ensure the `