# Widget generador de leads

El widget generador de leads te ayudará a recopilar solicitudes de usuarios de tu sitio las 24 horas del día. Veamos cómo puedes instalar y configurar el widget.

## Configuración

<div data-with-frame="true"><figure><img src="/files/e5a25f61ca69d6fc50603b38d300ed11b9170ece" alt="" width="346"><figcaption></figcaption></figure></div>

En la configuración del widget, en la sección "Información básica", debes completar los siguientes campos obligatorios:

1. **Nombre del widget;**
2. **El dominio del sitio web donde colocas el widget:** puede ser tanto un sitio web diseñado en Mavibot, como en el servicio Tilda, así como en uno propio.

A continuación, hay casillas de verificación que ayudarán a enviar devoluciones de llamada al sistema después de que el cliente envíe la solicitud, así como a mostrar el logotipo.

Los siguientes campos de configuración te ayudarán a determinar qué información se debe solicitar al cliente:

<div data-with-frame="true"><figure><img src="/files/f9f4b572fa8d31d3e55043480465fa4fa7efc3b2" alt=""><figcaption></figcaption></figure></div>

Si es necesario, el formulario que se envía a los clientes no se enviará a tu sitio web hasta que el cliente complete el campo obligatorio.

## Condiciones de activación

<div data-with-frame="true"><figure><img src="/files/aed30c31a7fc6c3b95992ef6c66574411c104ac4" alt=""><figcaption></figcaption></figure></div>

### Intervalo de tiempo

Puedes establecer el tiempo de visualización del widget en el sitio web. Para ello, utiliza la función "Cuándo mostrar el widget":

1. **Inmediatamente**\
   Esta configuración mostrará el widget cuando el usuario visite el sitio.
2. **Después de un retraso de tiempo**

<div data-with-frame="true"><figure><img src="/files/9220e8aeadb47cb475d7159c78e1fc82877e9aa1" alt=""><figcaption></figcaption></figure></div>

El widget se mostrará en el sitio web después de que hayan transcurrido una cierta cantidad de segundos desde que el cliente visitó el sitio web.

El intervalo de tiempo se establece en segundos, donde el valor mínimo es 1 segundo y el valor máximo es 15 segundos.

3. **Después de desplazarse**

<div data-with-frame="true"><figure><img src="/files/c958ec7452a3617affc427c5e41163b60caa96bc" alt=""><figcaption></figcaption></figure></div>

La condición "Después de desplazarse" significa que, en cuanto el usuario realice una acción para desplazarse por el sitio, independientemente de si lo ha recorrido completo hasta el final o solo ha visto una pequeña parte, el widget se mostrará en el sitio después de un número establecido de segundos.

El valor mínimo del intervalo de tiempo es 1 segundo; el máximo es 15.

## Apariencia visual

<div data-with-frame="true"><figure><img src="/files/e186549b4288a8682051b9e643c0956dfe03838e" alt=""><figcaption></figcaption></figure></div>

Usa la función de carga de imágenes en la configuración de apariencia para añadir una portada.
\
Recomendamos elegir un diseño llamativo e interesante para atraer la mayor atención posible del usuario.

<div data-with-frame="true"><figure><img src="/files/6db73db81acad7d28287084c64b91e5422e0eaa0" alt=""><figcaption></figcaption></figure></div>

A continuación, coloca la imagen alineándola con respecto a los bordes superior, izquierdo y derecho:

<div data-with-frame="true"><figure><img src="/files/28b4af8f66990c9e59e03e445c9c99790a1e2281" alt=""><figcaption></figcaption></figure></div>

Luego se configuran los campos vacíos: los necesitarás si quieres especificar el título y el subtítulo del widget:

<div data-with-frame="true"><figure><img src="/files/ecede732f5fec7048a4e31e024f52e1e40aa49e8" alt=""><figcaption></figcaption></figure></div>

Luego escribe un texto motivador para que el usuario se interese por tu oferta:

<div><figure><img src="/files/28865dfc121b0831b097ceda75fe10ffb4f0e9b3" alt=""><figcaption></figcaption></figure> <figure><img src="/files/e7cb4ac1d8a4bfa2e44d2b239c3b54883e17c5f8" alt=""><figcaption></figcaption></figure></div>

#### **Personalización gráfica**

En la configuración de apariencia, puedes aplicar tus habilidades de diseño gráfico para crear un widget completamente único.

<div data-with-frame="true"><figure><img src="/files/f2ae2c2b4c9200ddd6c9dd3f18722c0bb46fe5e3" alt=""><figcaption></figcaption></figure></div>

Tienes acceso a una amplia paleta de colores.

También recomendamos experimentar con patrones únicos para el fondo del widget para mejorar su atractivo visual.

## **Cómo añadir tu widget a un sitio web**

Después de haber ajustado toda la configuración y editado la apariencia del widget según su diseño único, haz clic en el botón "Añadir widget" en la parte inferior de la pantalla:

<div data-with-frame="true"><figure><img src="/files/1a21c59f1e9427bc9071709971dbd2c349765c26" alt=""><figcaption></figcaption></figure></div>

Después de eso, irás a la lista de widgets ya preparados, donde debes hacer clic en el botón "Insertar código en el sitio":

<div data-with-frame="true"><figure><img src="/files/856c2f7bdf00d4e4ca3a288234888737559688cf" alt=""><figcaption></figcaption></figure></div>

Después de eso, verás una ventana modal con un script:

<div data-with-frame="true"><figure><img src="/files/3a8802e1f1ca85358d7fe40ba6f9968613a3c934" alt=""><figcaption></figcaption></figure></div>

A continuación, copia el script y ve a la configuración del sitio web (el dominio especificado en la configuración de tu widget). Inserta el script en el HTML `<head>` sección.

{% hint style="info" %}
**Para incrustar el widget en un sitio web de Tilda:**

1. Copia el script del widget haciendo clic en **"Insertar código en el sitio web"** botón.
2. En tu editor de Tilda, pega el script en la configuración del proyecto o en un bloque HTML de la página correspondiente.
   {% endhint %}

**¡Perfecto!** La configuración e instalación de tu widget ya están completas.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.mavibot.ai/doc/es/websites/widgets/leads.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.