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

# Widget web

> Embebe el agente de pre-venta con IA de Quikly en tu sitio web para calificar leads técnicos y generar propuestas 24/7.

El widget web es un agente de pre-venta impulsado por IA que vive en tu sitio web. Saluda a los visitantes, hace preguntas de discovery técnico, califica leads y puede generar borradores de propuestas — todo mientras duermes. Tú revisas y apruebas antes de que algo salga.

## Configurar el widget

<Steps>
  <Step title="Ve a la configuración del widget">
    En la app de Quikly, navega a **Configuración → Integraciones → Instalar Widget Web**.
  </Step>

  <Step title="Configura el agente">
    Establece las siguientes opciones:

    * **Mensaje de bienvenida** — el primer mensaje que ven los visitantes cuando se abre el widget
    * **Tono** — profesional, amigable o técnico (afecta cómo se comunica el agente)
    * **Dominios permitidos** — lista de dominios donde el widget puede cargarse (ej., `tuagencia.com`, `www.tuagencia.com`)
  </Step>

  <Step title="Copia el script de embebido">
    Quikly genera un snippet con tu `publicKey` único. Cópialo.
  </Step>

  <Step title="Agrega el script a tu sitio web">
    Pega el snippet antes de la etiqueta de cierre `</body>` en cada página donde quieras que aparezca el widget.
  </Step>
</Steps>

## Código de embebido

El snippet de embebido se ve así:

```html theme={null}
<script
  src="https://widget.getquikly.com/agent.js"
  data-public-key="pk_your_public_key_here"
  async
></script>
```

El `publicKey` identifica tu cuenta y carga la configuración de tu widget (saludo, tono, dominios permitidos). No se expone ninguna clave de API en código del lado del cliente.

## Lista de dominios permitidos

Por seguridad, el widget solo se carga en dominios que permitas explícitamente. Si una página intenta cargar el widget desde un dominio no autorizado, el script no hace nada silenciosamente.

Agrega dominios en **Configuración → Integraciones → Instalar Widget Web → Dominios Permitidos**. Incluye todas las variaciones que usa tu sitio:

* `tuagencia.com`
* `www.tuagencia.com`
* `staging.tuagencia.com` (si quieres que también esté en staging)

<Warning>
  No uses comodines. Cada dominio debe listarse explícitamente.
</Warning>

## Qué hace el widget

Cuando un visitante abre el widget:

1. El agente muestra tu **mensaje de bienvenida**
2. Pregunta sobre el **proyecto, stack y cronograma** del visitante
3. Basándose en la conversación, **califica al lead** como potencial cliente
4. Si califica, el agente puede generar un **borrador de propuesta** usando tus tarjetas de tarifas y servicios
5. Recibes una **notificación** en Quikly con los detalles de la sesión de lead
6. Tú **revisas, ajustas y apruebas** — nada se comparte sin tu aprobación explícita

El widget usa el mismo motor de IA que el Agent Mode dentro de la app, calibrado al tono y servicios de tu agencia.

## Disponibilidad por plan

| Plan         | Widgets         | Conversaciones |
| ------------ | --------------- | -------------- |
| Starter      | 1 widget        | 10 por mes     |
| Professional | 1 widget        | Ilimitadas     |
| Agency       | Hasta 3 widgets | Ilimitadas     |
| Lifetime     | 1 widget        | Ilimitadas     |

## Personalización

Desde la página de configuración del widget, puedes configurar:

| Ajuste                    | Descripción                                               |
| ------------------------- | --------------------------------------------------------- |
| **Mensaje de bienvenida** | El mensaje inicial que el agente muestra a los visitantes |
| **Tono**                  | Estilo de comunicación: profesional, amigable o técnico   |
| **Dominios permitidos**   | Dominios donde el widget tiene permiso para cargarse      |
| **Idioma**                | Idioma principal del agente (inglés o español)            |

El widget hereda el nombre de tu empresa, servicios y tarjetas de tarifas de tu perfil de Quikly. Asegúrate de que tu perfil esté completo para que el agente tenga contexto sobre lo que ofreces.

## Solución de problemas

<AccordionGroup>
  <Accordion title="El widget no aparece en mi sitio">
    * Verifica que el dominio esté en tu lista de **dominios permitidos** (incluyendo `www` si corresponde)
    * Confirma que el script esté colocado antes de `</body>` y se cargue sin errores en la consola
    * Verifica que tu `publicKey` sea correcto comparándolo con **Configuración → Integraciones**
  </Accordion>

  <Accordion title="El widget carga pero el agente no responde">
    * Verifica que tu suscripción de Quikly esté activa
    * Confirma que te quedan conversaciones de widget para el mes (plan Starter: 10/mes)
    * Busca errores de red en la consola de desarrollador del navegador
  </Accordion>

  <Accordion title="El agente da respuestas irrelevantes sobre mis servicios">
    El agente extrae contexto de tu **perfil de Quikly**. Ve a **Mi Perfil** y asegúrate de que la descripción de tu empresa, servicios, habilidades y tarjetas de tarifas estén completos. Mientras más contexto tenga, mejor califica los leads.
  </Accordion>
</AccordionGroup>