# Widget de reservas en línea para el sitio web El widget ayudará a los clientes a reservar tus servicios a través de Telegram y en tu sitio web.

El widget se puede integrar tanto en un sitio web creado con MaviBot como en una página de aterrizaje creada con otros constructores. ## Cómo crear un widget {% hint style="info" %} Primero, necesitas crear una sucursal y configurar los servicios asignándolos a los empleados. Explicamos cómo hacerlo en el artículo "Configuración del servicio de reservas." {% endhint %} Para comenzar, ve a la sección "Widgets", que puedes encontrar en el menú superior.

Si aún no se han creado widgets en el proyecto, verás cuatro botones en el centro de la pantalla en la sección "Widgets".

Haz clic en el botón "Widget de reserva en línea" y accederás a la configuración del widget.

### Información básica

En esta pestaña, debes introducir el nombre del widget (que se mostrará en el sitio web) y el dominio del sitio donde quieres que aparezca el widget de reserva en línea (si el sitio no está creado con MaviBot). Si el sitio está creado con el constructor de MaviBot, no necesitas especificar el dominio. A continuación, selecciona la sucursal cuyos servicios y personal se mostrarán en el widget:

Ahora puedes pasar a personalizar el widget.

### Configuración de apariencia El logotipo y el nombre del widget se mostrarán en su encabezado:

A continuación, puedes introducir un título y un subtítulo en el widget, que aparecerán sobre los botones de selección de servicio o especialista:

**Esquema de color del widget** Puedes elegir el esquema de color del widget según tu preferencia: 1. Fondo del widget:

2. El tema principal de marca del widget mostrará botones, precios e iconos en el esquema de color seleccionado:

3. Color del texto: cambia el color del texto del botón o del texto principal según la opción seleccionada.

4. Texto del botón:

De forma predeterminada, los botones muestran el texto **"Seleccionar servicios"** y **"Seleccionar especialista**", pero puedes personalizar el texto como desees:

Ahora guarda la configuración:

### Cómo incrustar el widget en tu sitio web Ve al modo de edición del sitio web:

A continuación, busca la sección **"Reserva en línea"** en la lista y añádela:

En la configuración del contenido, elige qué widget mostrar en el sitio (si tienes varios widgets de reserva en línea):

Si es necesario, puedes editar el fondo y la configuración de visualización de la sección del widget. Para ello, pasa el cursor sobre la sección y haz clic en el botón **"Configuración"** :

Establece el fondo deseado y la configuración de visualización:

Guarda la configuración del sitio. \ Ahora tus clientes pueden reservar servicios las 24 horas del día simplemente visitando tu sitio web:

**Cómo incrustar el widget en otro sitio web** Después de guardar el widget, actualiza la página para ver el siguiente bloque con el script del widget y un campo para introducir el nombre de la sección:

Si necesitas incrustar el código en tu sitio web, copia el script y pégalo en tu página de aterrizaje.
Si estás usando el widget en tus propios sitios que NO están creados con MaviBot, asegúrate de introducir la clase del elemento en el campo proporcionado:

## Widget de Telegram Ahora que sabes cómo crear un widget e incrustarlo en tu sitio web, puedes crear un **botón Web App en Telegram** que abre tu sitio como una aplicación dentro del mensajero. {% hint style="info" %} En lugar de un sitio web completo, puedes crear una página de aterrizaje con una sola sección que incluya el widget de reserva en línea y compartirla con tus clientes como un botón de Telegram usando el botón Web App. {% endhint %} Necesitas usar la función `quiz_link(mini_landing_page_id, display_my_domain)`pero solo el `mini_landing_page_id` parámetro es obligatorio.
A continuación, crea un bloque donde, en la calculadora, asignas una variable (en este ejemplo, la variable se llama `booker_link`) que usa la función `quiz_link(mini_landing_page_id)`, con el ID de la página del sitio pasado como parámetro: **Paso 1. Crear el bloque con la función**
Crea un bloque en el constructor y, en la calculadora, define una variable con la función así: booker\_link = quiz\_link('YOUR\_SITE\_ID')

{% hint style="success" %} ¡Nota! No olvides guardar la configuración del bloque. {% endhint %} **Paso 2. Encuentra el ID de la página del sitio requerida.**
Para encontrar el ID de la página del sitio, ve a la sección correspondiente:

Haz clic en la tarjeta del sitio deseado para ir a la configuración de la página de ese sitio:

Luego, pasa el cursor sobre la fila con la página en la que has creado la **"Reserva en línea"** sección:

Copia el ID y pégalo en el bloque dentro del constructor del embudo:

**Paso 3. Añade un botón al bloque en el constructor.**
A continuación, despliega la pestaña de configuración "Botones" (haz clic en "Botones") y haz clic en **"+ Añadir botón"**:

Después de hacer clic, se abrirá la configuración del botón para añadir un nuevo botón:

Aquí necesitas: * Establecer el nombre del botón: puede ser cualquier nombre que quieras. * Establecer la función del botón: debe ser un botón Web App de Telegram.

* Especificar el enlace para abrir el sitio cuando se haga clic en el botón: El enlace ya está almacenado en una variable usando la calculadora y la `quiz_link` función, así que en el campo URL, introduce la variable asignada `booker_link` usando interpolación, es decir, incluye la variable dentro de `#{}`que contiene el enlace a tu sitio y widget.

A continuación, haz clic en el botón **“Añadir”** para guardar la configuración del botón y añadirlo al bloque. Asegúrate de hacer clic en **“Guardar”** después para garantizar que la configuración del bloque no se pierda.

El bloque completamente configurado se ve así:

{% hint style="success" %} **¡Consejo útil!**\ No es necesario crear un bloque condicional (como una comprobación de condición principal o el inicio de una conversación) específicamente para el botón Web App. Puedes crear el botón y añadir la `quiz_link` función en cualquier bloque de tu embudo, ya sea un bloque de estado, un bloque sin estado, etc. (consulta el ejemplo "Bloque de estado de diálogo con botón Web App de Telegram"). {% endhint %}

Ejemplo: "Bloque de estado de diálogo" con un botón Web App de Telegram

El botón Web App con el widget de reserva en línea estará entonces disponible en el bot:

## Callback de reserva Después de que un cliente reserve una cita, se enviará una notificación callback sobre la reserva en el diálogo, con este aspecto:

**new\_order\_in\_calendar** - la parte invariable del callback **\[489046159]** - order\_id ID de la reserva **Appointment\_date\_and\_time añadido** **por 30 minutos** - duración del servicio **Al objeto: Test 30** - a qué objeto específico se añadió la reserva La apariencia del mensaje callback: *new\_order\_in\_calendar: \[489046159] Se ha añadido una cita desde 2025-06-01 14:00 hasta 2025-06-01 14:30 por 30 minutos. Objeto: Test 30* Puedes configurar una reacción al callback especificando su valor en la condición del bloque:

En el bloque, puedes especificar el mensaje de respuesta deseado para enviarlo al cliente. --- # 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/booking/settings/widget.md?ask= ``` 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.