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

# Pon tu agente en tu sitio web

> Agrega a tu sitio una burbuja de chat y voz con una sola etiqueta script. Tus visitantes hablan o escriben con la versión publicada de tu agente del Constructor.

El **widget web** es una burbuja en la esquina de tu sitio. Tus visitantes le hacen clic y pueden **escribirle** a tu agente o **hablar** con él desde el navegador, con el mismo agente que contesta tus llamadas y tu WhatsApp.

<Info>
  Esta guía es para agentes hechos en el **Constructor**. El widget usa siempre la versión **publicada** del agente, nunca el borrador que estás editando.
</Info>

## Lo que necesitas

1. Un agente **publicado**. Para ofrecer voz, el agente necesita su voz y su transcripción configuradas, igual que para las llamadas.
2. Un **método de pago** guardado y **créditos** en tu cuenta.
3. Acceso al código de tu sitio, o al lugar donde tu constructor de sitios te deja pegar un script.

## Configura el widget

<Steps>
  <Step title="Abre el agente en el Constructor">
    Desde **Agentes**, abre el agente y entra a la pestaña **Canales**. Haz clic en **Configurar** en la tarjeta **Widget web**.
  </Step>

  <Step title="Elige dónde se puede mostrar">
    En **Dominios Permitidos**, escribe el dominio de tu sitio sin `https://`, uno por línea: `tudominio.com`. Usa `*.tudominio.com` para permitir todos sus subdominios; no incluye `tudominio.com` a secas, así que escribe los dos si quieres los dos. `localhost:3000` sirve para probar en tu computadora.
  </Step>

  <Step title="Elige qué puede hacer el visitante">
    Enciende o apaga **Escribir** (chat de texto) y **Hablar** (una llamada desde el navegador), luego enciende **Mostrar el widget** y haz clic en **Guardar cambios**.
  </Step>

  <Step title="Pega el código">
    Copia el código de **Código para tu sitio** y pégalo antes de `</body>` en cada página donde quieras la burbuja.
  </Step>
</Steps>

El código se ve así:

```html theme={null}
<script src="https://app.ryvo.so/widget.js" data-ryvo-widget="ryvo_pk_..." async></script>
```

Dos atributos opcionales:

| Atributo | Valores | Qué hace |
| - | - | - |
| `data-language` | `es`, `en` | El idioma del widget. Por omisión sigue el atributo `lang` de tu página, luego el navegador del visitante, y si no es ninguno cae a inglés. (`data-idioma` sigue funcionando.) |
| `data-position` | `left` | Pone la burbuja a la izquierda. Por omisión va a la derecha. (`data-posicion="izquierda"` sigue funcionando.) |

## Cómo está protegido

El código lleva una **llave publicable** (`ryvo_pk_...`). Es pública a propósito: cualquiera que abra tu sitio puede verla, igual que ve el resto de tu código. Lo que impide que alguien use tu agente desde otro sitio:

* **Los dominios permitidos.** El widget sólo se abre dentro de los dominios que escribiste. Lo hace cumplir el propio navegador del visitante, así que otro sitio que copie tu código recibe un marco vacío.
* **Una verificación humana.** Cada conversación y cada llamada empiezan con una verificación invisible que distingue a una persona de un bot.
* **Límites de uso** por visitante, por agente y por cuenta.
* **Los límites de tu propia cuenta.** El saldo, las llamadas simultáneas de tu plan y el resto de las verificaciones de cualquier conversación siguen aplicando.

Si tu llave termina donde no debe, haz clic en **Rotar llave** y pega el código nuevo. El código viejo deja de abrir conversaciones nuevas en ese momento. Para cortar todo de una vez, apaga **Mostrar el widget**.

## Cuánto cuesta

Cada conversación del widget se cobra **igual que una conversación web**: el texto por mensaje y la voz por minuto, a la tarifa de tu plan. Las conversaciones aparecen en tu historial con el canal **Widget**, junto al resto de las conversaciones de tu agente.

## Solución de problemas

<AccordionGroup>
  <Accordion title="La burbuja aparece pero el panel sale en blanco">
    El dominio de la página no está en **Dominios Permitidos**. Revisa que lo hayas escrito tal como aparece en la barra de direcciones, sin `https://` y sin ruta. `www.tudominio.com` y `tudominio.com` son dominios distintos.
  </Accordion>

  <Accordion title="El widget dice que el asistente no está disponible">
    El agente no está publicado o está en pausa, el widget está apagado, o tu cuenta se quedó sin créditos. Revisa la tarjeta **Widget web** en la pestaña **Canales** y tu saldo.
  </Accordion>

  <Accordion title="La voz no arranca">
    El visitante tiene que permitir el micrófono. Si no aparece el modo **Hablar**, el agente no tiene voz y transcripción configuradas en su versión publicada.
  </Accordion>
</AccordionGroup>