--- title: "CDN / Etiqueta de script" description: "Agrega el widget de voz de ThunderPhone a cualquier sitio web sin un empaquetador" --- La compilación de CDN incluye React internamente, por lo que puedes usar el widget en sitios estáticos, WordPress, Webflow o cualquier página donde puedas agregar HTML. No se requiere npm, empaquetador ni framework. ## URL de CDN ```html Latest (recommended) ``` ```html Pinned version ``` Las URL de `latest` son las que genera el generador de fragmentos de inserción del panel. Se almacenan en caché durante 5 minutos e incorporan automáticamente nuevas versiones estables. Las rutas fijadas `/widget/vX.Y.Z/` son inmutables y se almacenan en caché a largo plazo -- si fijas una versión, haz que coincida con la versión de npm de `@thunderphone/widget` con la que desarrollas. --- ## Uso básico ```html

``` El widget se monta en el elemento de destino y se muestra como una **barra de posición fija en una esquina de la ventana gráfica** (el valor predeterminado es `bottom-right`, controlado por la opción `position`). El elemento de montaje solo es la raíz de React -- su ubicación en la página no afecta dónde aparece el widget. --- ## Opciones de montaje `ThunderPhone.mount()` acepta las mismas opciones que el componente de React, además de la propiedad `element`: | Opción | Tipo | Obligatorio | Predeterminado | Descripción | |--------|------|-------------|----------------|-------------| | `element` | `string \| HTMLElement` | Sí | -- | Selector CSS (p. ej., `'#thunderphone'`) o referencia a un elemento del DOM. | | `publishableKey` | `string` | Sí | -- | Clave de API publicable (`pk_live_...`). El agente se resuelve automáticamente a partir de la configuración del widget de la clave. | | `theme` | `'light' \| 'dark'` | No | `'light'` | Esquema de color. | | `primaryColor` | `string` | No | `'#000000'` (claro) / `'#ffffff'` (oscuro) | Cadena de color CSS utilizada como color de acento. | | `title` | `string` | No | `'Voice assistant'` | Texto mostrado en la barra del widget. | | `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | No | `'bottom-right'` | Posición fija en la ventana gráfica. | | `apiBase` | `string` | No | `'https://api.thunderphone.com/v1'` | Anulación de la URL base de la API. | | `language` | `string` | No | -- | Anulación de idioma por sesión -- un código de idioma o configuración regional como `en`, `es` o `fr-FR`. Si no se establece, se aplica el idioma configurado del agente. Requiere `language` en las [anulaciones del navegador](/es/guides/embed-web-widget) de la clave. | | `voice` | `string` | No | -- | Anulación de voz por sesión -- un nombre de voz como `maria`. Si no se establece, se aplica la voz configurada del agente. Requiere `voice` en las [anulaciones del navegador](/es/guides/embed-web-widget) de la clave. | | `context` | `string` | No | -- | Contexto factual de la página o el sitio por sesión que se pasa al agente. Se trunca del lado del servidor a 12,000 caracteres. Requiere `context` en las [anulaciones del navegador](/es/guides/embed-web-widget) de la clave. | | `onConnect` | `() => void` | No | -- | Se llama cuando se conecta la sesión de voz. | | `onDisconnect` | `() => void` | No | -- | Se llama cuando termina la sesión. | | `onError` | `(error) => void` | No | -- | Se llama cuando ocurren errores. El error tiene los campos `error` (código) y `message`. | | `ringtone` | `boolean \| string` | No | `false` | Reproduce un tono de llamada mientras se conecta. `true` para el tono predeterminado o una cadena de URL para audio personalizado. | --- ## Limpieza `ThunderPhone.mount()` devuelve una instancia del widget con métodos de limpieza: ```html ``` Tanto `unmount()` como `destroy()` hacen lo mismo -- desconectan cualquier sesión de voz activa y eliminan el widget del DOM. Usa el que se lea mejor en tu código. Siempre limpia el widget al navegar fuera de aplicaciones de una sola página o cuando se elimina el elemento contenedor. Esto garantiza que las sesiones de voz activas se desconecten correctamente. --- ## Ejemplos ### Tema oscuro con color personalizado ```html

``` ### Posición personalizada ```html

``` ### Con callbacks de eventos ```html

``` ### Con tono de llamada ```html

``` ### Uso de una referencia a un elemento DOM ```html

``` ### Integración con WordPress / CMS Agrega esto a un bloque de HTML personalizado o al pie de página de tu tema: ```html ``` El `

` puede ir en cualquier lugar -- solo es el punto de montaje. El widget se muestra como una superposición fija en una esquina de la ventana gráfica (definida por la opción `position`) y no fluye con el contenido circundante. --- ## Solución de problemas Asegúrate de que se carguen los archivos CSS y JS. Revisa la consola del navegador para detectar errores de red. Verifica que el elemento de destino exista en el DOM antes de llamar a `ThunderPhone.mount()`. El script aún no se ha cargado. Asegúrate de que la etiqueta `