# Widget de callback

En esta sección, aprenderá a configurar e instalar el widget de devolución de llamada en su sitio web. Este widget de comentarios permite a los visitantes ponerse en contacto fácilmente con su empresa y hacer preguntas, ayudándole a:

* Mejorar la interacción con los clientes,
* Brindar soporte oportuno,
* Recopilar comentarios y sugerencias valiosos para mejorar la satisfacción del usuario.

## Configuración

{% hint style="warning" %}

## Tenga en cuenta

Asegúrese de que [la integración de telefonía](/doc/es/integrations/other.md) esté habilitada antes de configurar el widget de comentarios. Esto es necesario para la instalación. 
{% endhint %}

### Información principal

#### **Configuración de la información principal**

Esta sección contiene dos campos obligatorios para configurar su widget.

1. **Nombre**\
   Introduzca un nombre para el widget, que se mostrará en su sitio web. Este campo es obligatorio.
2. **Dominio donde se usará el widget**\
   Introduzca el dominio del sitio web donde se incrustará el widget. Este campo también es obligatorio. Puede especificar un sitio web creado en:
   * **MaviBot**
   * **Tilda**
   * Su propio **sitio web personalizado**

**Configuración avanzada**\
Dentro de la sección de información principal, también puede habilitar **notificaciones de devolución de llamada** en la configuración avanzada.

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

{% hint style="info" %}
Las devoluciones de llamada del widget de comentarios no coinciden con las devoluciones de llamada de la telefonía conectada.
{% endhint %}

Puede configurar más adelante la respuesta del chatbot a las devoluciones de llamada recibidas.

También puede elegir mostrar u ocultar el logotipo "Usamos MaviBot" mediante esta casilla de verificación.

### Condiciones de activación

<div data-with-frame="true"><figure><img src="/files/0654e72043a3fcfbc77874998f651163f34c7897" alt="" width="521"><figcaption></figcaption></figure></div>

#### Intervalo de tiempo

Puede establecer el momento en que el widget aparecerá en el sitio web. Para ello, use la función "Cuándo mostrar el widget".

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

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

El widget aparecerá una cantidad específica de segundos después de que el usuario abra el sitio web.

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/78945f19857efc4c00a8f5a02bf335ea2e3d37ee" alt=""><figcaption></figcaption></figure></div>

El **La condición "Después de desplazarse"** significa que en cuanto el usuario se desplace por el sitio web — ya sea hasta el final o solo una pequeña parte — el widget aparecerá en el sitio web después del número de segundos especificado.&#x20;

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

### Condiciones de visualización en el sitio web

Puede configurar el widget para que se muestre con o sin condiciones específicas. Exploremos las condiciones disponibles.

1. Parámetros UTM

{% hint style="info" %}
Para aprender sobre los parámetros UTM y cómo utilizarlos, le recomendamos leer el artículo, **"**[**Cómo transferir parámetros UTM**](/doc/es/faq/questions/...transferir-etiquetas-utm.md)**."**
{% endhint %}

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

Introduzca el nombre del parámetro requerido en el campo correspondiente.

<div data-with-frame="true"><figure><img src="/files/656f0a09c95ef9e51b9201589c07dc8a5cc6cb3a" 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/ade3acfc3d2804df008aa9fdca8cffa98d8df39f" alt=""><figcaption></figcaption></figure></div>

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

La diferencia principal es que **"contiene/no contiene"** comprueba si el parámetro UTM incluye (o no incluye) un valor específico en cualquier parte de él.

\
En cambio, el operador **"es igual a"** requiere una coincidencia exacta, lo que significa que el sistema busca una igualdad estricta del valor del parámetro UTM (y, en consecuencia, "no es igual a" es lo opuesto).
{% endhint %}

Luego introduzca el valor requerido para el parámetro UTM:

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

2. País

También puede seleccionar la condición "País", que muestra el widget según el país de IP del usuario.
\
Elija el país requerido de la lista, así como el tipo de operador ("es" o "no es").

3. **Dispositivo del usuario**

Si es necesario, establezca la condición "Dispositivo" para mostrar el widget según el tipo de dispositivo del usuario.

La configuración también incluye una función para agregar varios valores y controlar la visualización del widget. Para ello, simplemente haga clic en **"+ Agregar valor"** y establezca una o más condiciones adicionales.

### Telefonía

<figure><img src="/files/9ae3e1097a48835bd66791ce69b863367569e772" alt=""><figcaption></figcaption></figure>

## Horario laboral

<figure><img src="/files/7a5bcb72d13bc69de8b690ad49e0359ce349e7bc" alt=""><figcaption></figcaption></figure>

El horario laboral desempeña un papel clave para las casillas de verificación **"Desactivar el widget fuera del horario laboral"** y **"Desactivar las devoluciones automáticas fuera del horario laboral"**"

<figure><img src="/files/e31c614d938cccbfd0afdc7daef2a3a2d702b342" alt=""><figcaption></figcaption></figure>

Cuando estas casillas están habilitadas, el widget estará inactivo y/o la función de devolución automática no funcionará fuera del horario laboral de su personal.

\
Esto es muy conveniente porque sus clientes no se quedarán preguntándose por qué solicitaron una devolución de llamada pero no recibieron ninguna.

El **"Habilitar devoluciones de llamada programadas en un momento conveniente"** la casilla de verificación también utiliza el horario laboral: permite al sistema ofrecer al cliente la hora disponible más cercana para una llamada según el horario establecido.

<figure><img src="/files/31e21f3acc477518fa3c21a4df1133441e3f51eb" alt=""><figcaption></figcaption></figure>

Para configurar el horario laboral, simplemente utilice los siguientes ajustes:

<figure><img src="/files/e2025d7448369f289468a771af9d7a06c003d00d" alt=""><figcaption></figcaption></figure>

Puede configurar cada día laborable individualmente cambiando el interruptor a la posición de apagado.

<figure><img src="/files/9d07ac3d67578d721a541125b359ef17391eb532" alt=""><figcaption></figcaption></figure>

## Apariencia

<figure><img src="/files/eb538f9d5032239029c449aa861d88f6d61db883" alt=""><figcaption></figcaption></figure>

La configuración de apariencia puede dividirse en la configuración del botón y del widget.

### Configuración del botón

1. Tamaño del botón: puede elegir entre tamaños de botón de widget grande, mediano y pequeño.

<figure><img src="/files/06006a2907a80de148495c4d59efae7711545d75" alt=""><figcaption></figcaption></figure>

2. Texto del botón

<figure><img src="/files/d76ec16f5f47b9fbcf77f5f0fcdc2ed1b7bf9158" alt=""><figcaption></figcaption></figure>

Puede reemplazar el icono del teléfono con cualquier texto que desee.

<div><figure><img src="/files/fa9c2253ab19b8b5e04ba878813981aa8acf1454" alt="" width="135"><figcaption></figcaption></figure> <figure><img src="/files/a4d27a65918b391a486b0949617a48fb6591ee4e" alt=""><figcaption></figcaption></figure></div>

3. Color del botón: use la amplia paleta de colores para elegir el color que mejor se adapte a sus necesidades.

<div><figure><img src="/files/2d3065abe6a12b3c67a6278d7fb76758b4658f86" alt=""><figcaption></figcaption></figure> <figure><img src="/files/6297f8a2e0704cf4ef0c75e93451c9a2989a0b36" alt=""><figcaption></figcaption></figure></div>

4. Color del texto del botón: si completa el campo vacío para el texto que se muestra en el icono del widget, podrá cambiar la combinación de colores del texto.

<figure><img src="/files/435f5c4169d535787310b4662ad83100332d8f53" alt=""><figcaption></figcaption></figure>

5. La animación del botón ayuda a mejorar la apariencia de su sitio web y a hacerlo más dinámico.

<figure><img src="/files/752e0eb208a0b4d684da47614b208173c23bfff9" alt=""><figcaption></figcaption></figure>

Así se ve cada animación del botón:

<div><figure><img src="/files/77c4ce6d57cdbf25e9cb24b1f7cc3ece14462cde" alt="" width="188"><figcaption><p>Pulso</p></figcaption></figure> <figure><img src="/files/cccf5dfddf4c7b617a4bfe2da0aceb98d03ca837" alt="" width="188"><figcaption><p>Sacudida</p></figcaption></figure> <figure><img src="/files/204ceaea345a1e566331260ca3022afeafcd6cdd" alt="" width="188"><figcaption><p>Onda</p></figcaption></figure></div>

### Configuración del widget

Una vez que haya configurado la apariencia del botón, pasemos al contenido y a la apariencia del propio widget.

<figure><img src="/files/30753937b8ec0f35c052c83c9be08557c72ac130" alt=""><figcaption></figcaption></figure>

Puede completar los campos de texto dentro del widget:

1. Título

<figure><img src="/files/6d8fcb328fb432fa362211d05e34d2e82c440ad3" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/1d217c843920b7619403e7de37285fe55f5f3313" alt=""><figcaption></figcaption></figure>

2. Subtítulo

<figure><img src="/files/237bf72bc68d97fee4c9410a2562b66725df1221" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/128d6f7112739b737640ca7bf1f21ef73f69f495" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Este campo es obligatorio.
{% endhint %}

3. Texto del widget que se muestra después de que comienza el temporizador

<figure><img src="/files/56dca8f34de54d49f3a0ae774e1fc4b47e4499d3" alt=""><figcaption></figcaption></figure>

El texto aparecerá en el widget solo después de que el cliente haga clic en el botón "Llámame de vuelta" (o cualquier otro texto del botón) durante la cuenta regresiva del temporizador.

Usted configura el temporizador del widget con este ajuste:

<figure><img src="/files/29292d0b70fc1b324e8081c672b49bd3471c01cb" alt=""><figcaption></figcaption></figure>

4. Texto del botón

<figure><img src="/files/c06173b38c15255c7eb90c0b16ea8bfe704bf57b" alt=""><figcaption></figcaption></figure>

Puede alinear el texto dentro del widget al centro, a la izquierda o a la derecha usando estos botones, igual que en cualquier editor de texto.

<figure><img src="/files/2404a2dc80a11591be354fd4ebd580dcdfab1af0" alt=""><figcaption></figcaption></figure>

Usando la amplia paleta de colores, puede ajustar el tono o el degradado del fondo, los colores de los botones e incluso establecer un patrón.

<figure><img src="/files/f25128a6c1a86bf771ff2cca47d753415b23222e" alt=""><figcaption></figcaption></figure>

## Cómo incrustar un widget en su sitio

Después de configurar todos los ajustes y personalizar la apariencia del widget según su diseño único, haga clic en el **"Agregar widget"** botón en la parte inferior de la pantalla.

Se le llevará a la lista de widgets listos, donde deberá hacer clic en el **"Código de inserción en el sitio"** botón.

<figure><img src="/files/4de0f4288acad0955f6b6b0082d309a577778756" alt=""><figcaption></figcaption></figure>

Después de eso, se abrirá una ventana modal con el script.

<figure><img src="/files/8789ef8e51012c641affc55751cb33b9c09aec35" alt=""><figcaption></figcaption></figure>

Copie el script y vaya a la configuración del sitio web donde ingresó el dominio en los ajustes del widget.

Luego, inserte el código en el **encabezado HTML** sección.

{% hint style="info" %}
Para incrustar el widget en un sitio web de Tilda, copie también el script del widget usando el botón “Código de inserción en el sitio”, luego instálelo en el sitio.
{% endhint %}

¡Listo! ¡La configuración e instalación del widget en el sitio web ya están completas!

## Devoluciones de llamada

**Devoluciones de llamada disponibles:**

1. widget\_callback\_later widget\_id: 1 at 23.04.2024 18:00 - una devolución de llamada diferida, donde <mark style="color:verde;">**widget\_callback\_later**</mark>  es el tipo de devolución de llamada; <mark style="color:amarillo;">**widget\_id: 1 at 23.04.2024 18:00**</mark> - indica el ID del widget junto con la fecha y hora en que se debe hacer la llamada al cliente.
2. widget\_callback\_need\_call widget\_id: 1 at 23.04.2024 18:00 - indica que el cliente necesita una llamada, donde\ <mark style="color:verde;">**widget\_callback\_need\_call**</mark>  es el tipo de devolución de llamada; <mark style="color:amarillo;">**widget\_id: 1 at 23.04.2024 18:00**</mark> - muestra el ID del widget y la fecha y hora programadas para la llamada.
3. widget\_callback\_now widget\_id: 1 - devolución de llamada que indica la necesidad inmediata de llamar al cliente, donde<mark style="color:verde;">**widget\_callback\_now**</mark>  es el tipo de devolución de llamada;  <mark style="color:amarillo;">**widget\_id: 1**</mark>   es el ID del widget;
4. widget\_callback\_need\_call - devolución de llamada que indica que se necesita una llamada. Esta devolución de llamada se envía si la configuración correspondiente está habilitada.
5. widget\_callback\_now - devolución de llamada que indica la llamada actual.


---

# 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/widget-de-callback.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.