---
language: es
title: Insertar el widget de TuCalendi como botón
category: Online booking
summary: Descubre cómo obtener el código HTML para añadir el widget de calendario o de encuesta inteligente de TuCalendi como botón en tu web.
---

# Insertar el widget de TuCalendi como botón

Hemos desarrollado una forma sencilla e intuitiva de obtener los **códigos de integración del widget de TuCalendi**, ya sea el widget de calendario o el widget de encuesta inteligente con enrutamiento.

Vamos a ver cómo **insertar el widget de TuCalendi como un botón** en una web con solo unos clics y la simple acción de copiar y pegar un código HTML.

[Inicia sesión en TuCalendi](https://account.tucalendi.com/login) con tu usuario y contraseña y ve a la opción **"Códigos de integración"** del menú vertical:

![Códigos de integración](https://www.tucalendi.com/images/content/online-booking/v2-embed-codes.png)

Debes seleccionar la forma en la que quieres insertar el widget de TuCalendi en una web.

- Como un [calendario online](https://www.tucalendi.com/es/s/reserva-online/como-integrar-tucalendi-en-un-sitio-web).
- Como un botón.

En este tutorial elegiremos **insertar el widget de TuCalendi como un botón**.

> [!TIP]
> Al añadir el botón de TuCalendi en tu web, ya sea en línea o flotante, el **widget** se **abre como una ventana emergente**.

En la opción **"Botón"**, haz clic en **"Seleccionar"**.

![Tipo de widget como botón](https://www.tucalendi.com/images/content/online-booking/en/v2-widget-type-button.png)

Tenemos dos tipos de widget que puedes añadir en tu web:

- **Widget de calendario**.
- **Widget de encuesta inteligente con enrutamiento**.

Tienes que elegir el widget que quieres insertar.

## Widget de calendario

Para obtener el código de integración de un calendario con todos sus eventos o de un solo evento, en la sección **"Calendario"** haz clic en el botón **"Seleccionar"**:

![Código de integración del botón de calendario](https://www.tucalendi.com/images/content/online-booking/en/v2-embed-button-calendar-code.png)

Haz clic en el desplegable y te mostrará los distintos **calendarios (Marcas)** que has creado y también todos los **eventos (Tipos de reunión)** que tienes en cada calendario, para que puedas seleccionar lo que quieres que se abra cuando la gente haga clic en el botón:

![Lista de calendarios y eventos](https://www.tucalendi.com/images/content/online-booking/en/v2-calendars-events-list.png)

> [!TIP]
> Si eliges un **calendario**, con el código de integración el widget mostrará todos los eventos que tiene ese calendario. En cambio, si seleccionas un **evento concreto**, el código de integración solo mostrará un evento en el widget.

Para este ejemplo práctico elegiremos un evento concreto, el llamado **"First event (30 Min)"**, y obtendremos el código de integración de ese evento.

![Código de integración para el botón](https://www.tucalendi.com/images/content/online-booking/en/v2-embed-code-button-event.png)

En el caso del botón tenemos varios ajustes:

- **Texto del botón**. Es el mensaje que se muestra en el botón.
- **Tipo de botón**. Puedes elegir entre botón en línea o flotante.
- **Opciones predeterminadas** de apariencia y colores del botón.
- **Usar el diseñador de botones**.

Si quieres diseñar tu propio botón, activa la opción **"Usar el diseñador de botones"**.

![Diseñador de botones activado](https://www.tucalendi.com/images/content/online-booking/en/v2-embed-button-code-designer.png)

Y haz clic en la [opción **"Diseñador de botones"** para crear y diseñar tu propio botón](https://www.tucalendi.com/es/s/reserva-online/disenador-de-botones).

Cuando tengas el botón como quieres, solo tienes que hacer clic en el icono de la esquina superior derecha del código para **copiar el código HTML y pegarlo en tu web**, así tus clientes podrán empezar a reservar contigo.

## Widget de encuesta inteligente con enrutamiento

Para obtener el código de integración de la encuesta inteligente con enrutamiento, en la parte **"Formulario/Encuesta"** haz clic en el botón **"Seleccionar"**:

![Código de integración de la encuesta](https://www.tucalendi.com/images/content/online-booking/en/v2-embed-survey-code.png)

Haz clic en el desplegable, que mostrará las distintas **encuestas** que has creado para que puedas elegir la encuesta de la que quieres obtener el código de integración:

![Lista de encuestas](https://www.tucalendi.com/images/content/online-booking/en/v2-survey-with-routing-list.png)

En este caso vamos a seleccionar la encuesta llamada **"Demo survey with routing"** y obtener el código de integración de esa encuesta inteligente:

![Código de integración de la encuesta para el botón](https://www.tucalendi.com/images/content/online-booking/en/v2-embed-code-button-survey.png)

Igual que en el caso del widget de calendario, el botón tiene varios ajustes:

- **Texto del botón**. Es el mensaje que se muestra en el botón.
- **Tipo de botón**. Puedes elegir entre botón en línea o flotante.
- **Opciones predeterminadas** de apariencia y colores del botón.
- **Usar el diseñador de botones**.

Si quieres diseñar tu propio botón, activa la opción **"Usar el diseñador de botones"**.

Cuando hayas diseñado el botón para el widget de encuesta inteligente con enrutamiento, solo tienes que hacer clic en el icono de la esquina superior derecha del código para **copiar el código HTML y pegarlo en tu web**, así tus clientes podrán empezar a reservar contigo.

> [!TIP]
> En otro tutorial veremos en detalle el **diseñador de botones**.