# Widget de prueba social

El widget de prueba social simula pedidos o compras de tu producto en el sitio web, mostrándolos como notificaciones emergentes.

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

#### **Cómo funciona el widget**

El widget funciona según un principio psicológico simple: cuando los visitantes ven a otros realizando compras, también se sienten más inclinados a comprar.

#### **Beneficios clave**

Integrar este widget en tu sitio web ofrece varias ventajas estratégicas:

* **Impulsa compras impulsivas:** atrae al instante a nuevos clientes aprovechando la prueba social y la toma de decisiones impulsiva. Las personas se sienten naturalmente atraídas por los artículos populares y quieren imitar las elecciones de otros.
* **Genera confianza y fidelidad:** muestra un alto volumen de pedidos en tiempo real para generar credibilidad. Es más probable que los clientes confíen en las empresas que demuestran una base de usuarios activa y satisfecha y permanezcan fieles a ellas.
* **Interactúa con actualizaciones segmentadas:** mantén informados a los clientes sobre eventos importantes y promociones especiales. Puedes personalizar por completo con qué frecuencia aparece el widget y quién lo ve, según criterios específicos de audiencia.

## Cómo crear y configurar el widget

Para crear un widget, ve a la pestaña correspondiente de "Widgets".

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

Luego haz clic en el botón **"Crear un widget".**

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

Aparecerá un menú desplegable que mostrará los widgets disponibles para la integración en el sitio web; selecciona el que necesites de la lista:

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

Luego serás dirigido a la página de configuración del widget:

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

### Información general

#### Nombre del widget

Especifica el nombre de tu widget en el campo de configuración "Nombre del widget":

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

{% hint style="info" %}
El nombre del widget es un campo obligatorio y solo se mostrará en la sección "Widgets"; no será visible para tus clientes.
{% endhint %}

#### Dominio

Este es el segundo campo obligatorio, donde debes especificar el dominio de tu sitio web:

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

Puede ser un sitio web creado en MaviBot, realizado con la plataforma Tilda o tu propio sitio personalizado.

### Configuración general del contenido

La configuración general del contenido determina qué se mostrará en las notificaciones emergentes del widget en el sitio web.

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

{% hint style="info" %}
Presta atención a los marcadores de posición como \[name], \[city] y otros: los usarás al crear mensajes dentro del widget, en la pestaña "Opciones del widget".
{% endhint %}

#### Marcador de posición de nombre

Los campos de marcador de posición de nombre te permiten mostrar en el sitio web nombres específicamente masculinos o femeninos:

Para cambiar los nombres a masculinos o femeninos, usa el campo correspondiente:

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

También puedes seleccionar nombres según la ubicación geográfica:

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

Entonces la selección de nombres se ajustará.

#### Marcador de posición de ciudad

También puedes elegir nombres según la ubicación geográfica:

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

#### **Marcador de posición de suma**

Puedes insertar una suma en el bloque de texto del widget, que puede ser un valor fijo o un número generado aleatoriamente dentro de un rango específico:

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

Para introducir una suma exacta, utiliza el campo vacío de la derecha:

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

Si seleccionas el tipo "suma de un rango", debes ingresar los valores mínimo y máximo en los campos para generar un número aleatorio dentro de ese rango:

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

Si es necesario, también puedes establecer el número de decimales para el redondeo:

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

### Marcador de posición de variable personalizada

Para insertar tus propias variables personalizadas en el widget, haz clic en **"Añadir variable"** botón.

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

Deberás definir el nombre de la variable usando corchetes en la ventana modal que se abrirá.

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

A continuación, introduce los valores de la variable, asegurándote de que cada nuevo valor se escriba en una **nueva línea** sin comas ni otros separadores:

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

Después, haz clic en "Guardar" para almacenar los valores en el sistema:

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

Luego verás que la variable personalizada se ha guardado en la configuración general del contenido:

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

Para usar la variable más adelante, inserta su nombre entre corchetes en el campo "Texto principal" de la sección "Contenido":

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

### Condiciones de activación del widget

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

#### Intervalo de tiempo

Puedes establecer el momento de visualización del widget en el sitio web usando la función "Cuándo mostrar el widget":

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

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

El widget aparecerá en el sitio web después del número de segundos especificado una vez que el usuario lo haya abierto.

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

3. **Después de desplazarse**

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

La condición "Después del desplazamiento" indica que los widgets comenzarán a funcionar en el sitio después de que tu usuario haya desplazado la página la distancia correspondiente a una cantidad determinada de píxeles.

#### Intervalo de tiempo

También existe la siguiente condición de activación:

1. Duración de visualización:
   * Establece el valor en segundos.
   * Determina cuánto tiempo permanecerá visible el widget antes de que desaparezca la notificación.
2. Intervalo entre retrasos
   * Establece el valor en segundos.
   * Determina el retraso entre las visualizaciones del widget: después de que aparezca una notificación, la siguiente solo se mostrará una vez que haya transcurrido el número de segundos especificado.

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

#### Establecer una condición

&#x20;Veamos más de cerca las condiciones disponibles.

1. Parámetros UTM

{% hint style="info" %}
Para saber qué son las etiquetas UTM y cómo usarlas, te recomendamos leer el artículo "[Cómo transferir etiquetas UTM](/doc/es/faq/questions/...transferir-etiquetas-utm.md)."
{% endhint %}

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

Introduce el nombre de la etiqueta requerida en el campo designado:

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

A continuación, seleccione el operador que coincida con la etiqueta y el valor:

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

{% hint style="info" %}
¿Cuál es la diferencia entre contiene/no contiene y es igual/no es igual?

La principal diferencia es que el operador "contiene/no contiene" comprueba si la etiqueta UTM incluye (o no incluye) un determinado valor.<br>

En cambio, el operador "es igual" requiere una coincidencia exacta, lo que significa que el sistema busca una etiqueta UTM que coincida exactamente con el valor especificado (y, en consecuencia, "no es igual" funciona de forma opuesta).
{% endhint %}

Luego introduce el valor requerido para la etiqueta UTM:

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

2. País

También puedes elegir la condición "País", que mostrará el widget según el país de la IP del visitante.

Selecciona el país deseado de la lista, así como el tipo de operador ("es" o "no es"):

3. Dispositivo

Si es necesario, aplica la **"Dispositivo"** condición para mostrar el widget según el tipo de dispositivo que el visitante utilice para acceder al sitio:

La configuración también incluye una función para añadir varios valores para mostrar el widget. Simplemente haz clic en "+ Añadir valor" y establece una o más condiciones adicionales según sea necesario:

## Opciones del widget

Una vez que hayas terminado de configurar el widget, ve a **"Opciones del widget"** :

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

En esta pestaña, puedes configurar la apariencia y el contenido del widget que se mostrará a tus usuarios.

### Contenido

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

Puedes introducir texto estático o variables dinámicas (por ejemplo, `[name]`, `[sum]`, `[city]`) en el **Título** y **Texto principal** campos. Cuando el widget esté activo, el sistema reemplazará automáticamente estas variables con los valores reales configurados en los ajustes de tu widget.

#### Icono

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

El icono se mostrará dentro de la notificación emergente:

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

### Apariencia

La configuración de apariencia suele incluir opciones para seleccionar colores de una amplia paleta, ajustar el redondeo de las esquinas y configurar los niveles de sombra y transparencia:

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

1. Paleta de colores: elige colores para cualquier elemento del widget, desde el texto hasta el fondo del icono. También puedes seleccionar degradados.
2. La alineación del texto puede configurarse con respecto al centro, al borde derecho o al borde izquierdo:

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

2. Configuración de las esquinas de la notificación: puedes elegir esquinas redondeadas, cuadradas o totalmente circulares para el mensaje en el sitio web:

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

#### Ocultar el botón de cierre del widget

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

Esta casilla ocultará el botón de cierre (×) en la esquina del widget.

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

### Posición del widget en el sitio web

De forma predeterminada, las notificaciones están configuradas para aparecer en la esquina inferior derecha de la pantalla. Si es necesario, puedes cambiar la posición del widget en tu sitio web usando la configuración siguiente.

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

La posición del widget se calcula desde los bordes inferior y derecho de la pantalla. Para moverlo hacia el borde izquierdo, establece el **"Margen derecho"** campo a **60%**.

## Cómo incrustar el widget en el sitio web

Una vez que hayas configurado todos los ajustes y personalizado la apariencia del widget según tu diseño único, haz clic en **"Agregar widget"** botón en la parte inferior de la pantalla.

Serás llevado a la lista de widgets existentes, donde debes hacer clic en **"Código de inserción en el sitio web"** botón:

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

Se abrirá una ventana modal que mostrará el código del script:

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

Copia el script generado y luego ve a la configuración del sitio web para el dominio que especificaste anteriormente en la configuración del widget.

Después pega el script en el código HTML dentro de la sección:

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

{% hint style="info" %}
Para incrustar el widget en un sitio de Tilda, copia el script del widget usando el botón "Código de inserción en el sitio web", luego añádelo a la página de tu sitio web.
{% endhint %}

¡Listo! ¡La configuración e instalación del widget en tu sitio web 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/proof.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.