> ## 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.

# Crea un widget web en el dashboard

> Configura un widget de clic para hablar para tu sitio desde la página Widgets web; no se requieren llamadas a la API.

La página **Widgets web** (`/dashboard/web-widgets`) crea y administra
las claves publicables que impulsan el widget de voz insertable de ThunderPhone.
Todo lo que la [versión de API de esta guía](/es/guides/embed-web-widget)
hace con cURL, esta página lo hace con un formulario, además de generar el código
de inserción por ti.

## Crea un widget

<Steps>
  <Step title="Haz clic en Nuevo widget y elige un modo">
    * **Modo de agente** — el widget siempre ejecuta un agente que eliges en
      el menú desplegable. La configuración más sencilla.
    * **Modo webhook** — en cada sesión del widget, ThunderPhone llama a
      la URL de tu webhook y tu servidor devuelve la configuración del agente
      para ese visitante (enrutamiento por página, usuarios con sesión iniciada, lanzamientos graduales).
      Deja la URL en blanco para usar el webhook predeterminado de tu organización;
      cuando ingreses una URL nueva, también puedes establecerla como predeterminada de la organización.
  </Step>

  <Step title="Enumera los dominios permitidos">
    Las claves publicables están restringidas por origen: se requiere al menos un dominio,
    y el widget solo funciona en los nombres de host que enumeres. Se permiten
    comodines de subdominio como `*.example.com` (coinciden con subdominios,
    no con el dominio raíz); se rechazan los comodines sin dominio como `*`.
    `localhost` y `127.0.0.1` siempre están permitidos, por lo que el desarrollo local
    funciona sin necesidad de enumerarlos.
  </Step>

  <Step title="Ponle un nombre, actívalo y créalo">
    El interruptor **Activar widget** controla si la clave acepta
    sesiones; puedes crear un widget desactivado y activarlo al momento del lanzamiento.
  </Step>
</Steps>

## Obtén el código de inserción

Justo después de crearlo (o mediante el botón **Insertar** de cada fila), un cuadro de diálogo
de inserción genera código listo para pegar con tu clave publicable
incluida:

* **React** — un fragmento `<ThunderPhoneWidget />` para aplicaciones con empaquetador.
* **Etiqueta de script** — un par de `<script>` de CDN y hoja de estilos para cualquier sitio.

El cuadro de diálogo también muestra una vista previa de las opciones básicas de apariencia: título, color
principal, posición de la esquina y tema claro/oscuro, e incorpora tus elecciones
en el fragmento. Para consultar la referencia completa de props, los hooks de estilos y la
opción headless, consulta la [documentación del SDK del widget](/es/widget/overview).

<Note>
  Las claves publicables (`pk_live_…`) son públicas por diseño: puedes incluirlas sin riesgo en
  código de front-end. Copia una en cualquier momento con el botón Copiar de su fila.
</Note>

## Administra widgets desde la lista

Cada fila se edita directamente:

* **Modo / Agente** — cambia entre el modo de agente y webhook, o redirige
  el agente, con selectores integrados.
* **Dominios** — agrega o elimina dominios permitidos como etiquetas.
* **Activar/desactivar** — un interruptor por widget; los widgets desactivados dejan de
  aceptar sesiones de inmediato.
* **Transferir a organización** — copia o mueve el widget a otra organización
  a la que pertenezcas (moverlo lo elimina de aquí).
* **Eliminar** — revoca la clave publicable; el widget deja de funcionar
  de inmediato en todos los dominios. Esto no se puede deshacer.

Las sesiones del widget aparecen en el [historial de llamadas](/es/guides/review-calls) con la
misma transcripción, grabación y evaluación que las llamadas telefónicas.

## Próximos pasos

<CardGroup cols={2}>
  <Card title="Referencia del SDK del widget" icon="window-maximize" href="/es/widget/overview">
    Detalles del componente de React, hook headless y script de CDN.
  </Card>

  <Card title="Enrutamiento en modo webhook" icon="bolt" href="/es/guides/dynamic-call-config">
    Devuelve la configuración del agente por visitante desde tu servidor.
  </Card>
</CardGroup>