# Widget de reservas online para el sitio web

El widget ayudará a los clientes a reservar sus servicios a través de Telegram y en su sitio web.

<div data-with-frame="true"><figure><img src="/files/17207d0fd81cf5d0dc8ffb827fbd5f18933d426a" alt="" width="563"><figcaption></figcaption></figure></div>

El widget se puede integrar tanto en un sitio web creado con MaviBot como en una página de destino creada con otros constructores.

## Cómo crear un widget

{% hint style="info" %}
Primero, debe 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 empezar, vaya a la sección "Widgets", que puede encontrar en el menú superior.

<div data-with-frame="true"><figure><img src="/files/97f7ab2d81e31481796e4409a08c24db123a64ab" alt="" width="563"><figcaption></figcaption></figure></div>

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

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

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

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

### Información principal

En esta pestaña, debe introducir el nombre del widget (que se mostrará en el sitio web) y el dominio del sitio donde desea que aparezca el widget de reservas en línea (si el sitio no está creado con MaviBot).&#x20;

<figure><img src="/files/e1601552c2d4290886da69ef4772a0664e7469bd" alt="" width="563"><figcaption></figcaption></figure>

Si el sitio está creado con el constructor de MaviBot, abra la pestaña “Sitios” y copie el enlace de su sitio de MaviBot.

<div data-with-frame="true"><figure><img src="/files/5256e7fbf93809e186286c18eceb83299f15256c" alt="" width="563"><figcaption></figcaption></figure></div>

&#x20;A continuación, seleccione la sucursal cuyos servicios y personal se mostrarán en el widget.

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

También puede añadir un enlace a la política de privacidad y un enlace de consentimiento de datos.

<div data-with-frame="true"><figure><img src="/files/00588f4b2ca44d1847352c371a813d33306bf8c8" alt="" width="563"><figcaption></figcaption></figure></div>

Ahora puede pasar a personalizar el widget.

### Analítica

También puede configurar eventos de analítica.

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

Para ello, introduzca el ID de Facebook Pixel, Google Analytics o Metrica en el campo correspondiente y especifique el valor del evento.

<div data-with-frame="true"><figure><img src="/files/7f352032409ea0526c0f1036be432082b8f11e82" alt="" width="325"><figcaption><p>Por ejemplo, cómo introducir los datos</p></figcaption></figure></div>

### Configuración de apariencia

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

El logotipo y el nombre del widget se mostrarán en su encabezado.

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

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

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

**Esquema de color del widget**

Puede elegir el esquema de color del widget según su preferencia:

1. Fondo del widget:.
2. El tema principal de marca del widget mostrará los botones, los precios y los 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.

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

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

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

Vaya al modo de edición del sitio web.

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

A continuación, busque la **"Reserva en línea"** sección en la lista y añádala.

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

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

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

Si es necesario, puede editar el fondo y la configuración de visualización de la sección del widget. Para ello, pase el cursor sobre la sección y haga clic en la pestaña **"Configuración avanzada"** .

<div data-with-frame="true"><figure><img src="/files/4096ef5ec624e89bda7897979027cec46dc302ff" alt="" width="375"><figcaption></figcaption></figure></div>

Establezca el fondo y la configuración de visualización deseados.

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

Guarde la configuración del sitio.
\
Ahora sus clientes pueden reservar servicios las 24 horas simplemente visitando su sitio web&

**Cómo incrustar el widget en otro sitio web**

Después de guardar el widget, actualice la página para ver el siguiente bloque con el script del widget y un campo para introducir el nombre de la sección.

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

Si necesita incrustar el código en su sitio web, copie el script y péguelo en su página de destino .

Si usa el widget en sus propios sitios NO creados con MaviBot, asegúrese de introducir la clase del elemento en el campo proporcionado.

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


---

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