---
language: es
title: Cómo obtener el código de inserción tipo botón del Widget de TuCalendi
category: Widget
summary: Genera y personaliza un botón que abre el widget de reservas de TuCalendi en una ventana emergente y copia su código para tu web.
---

# Cómo obtener el código de inserción tipo botón del Widget de TuCalendi

Este tutorial explica cómo obtener el **código de inserción tipo botón** del Widget de TuCalendi. A diferencia del [widget en línea](https://www.tucalendi.com/en/s/widget/how-to-get-the-embed-code-for-the-tucalendi-widget), que se muestra directamente en la página, el tipo **Botón** añade un botón a tu sitio web que, al hacer clic, abre el widget de reservas en una **ventana emergente**. Además, puedes configurar el botón como **botón flotante**, que permanece visible en todo momento mientras el usuario navega por la página.

Antes de empezar, ten en cuenta que TuCalendi te permite **personalizar el texto del botón**, su apariencia visual y sus colores directamente desde el **generador de código**, sin necesidad de conocimientos técnicos.

## Paso 1. Ve a la sección Widgets

En el menú lateral de TuCalendi, haz clic en **Widgets** y selecciona **"Código de inserción"** o haz clic en el botón **"Seleccionar"** de la tarjeta Código de inserción.

![Códigos de inserción del widget](https://www.tucalendi.com/images/content/widget/en/widgets-embed-codes.png)

## Paso 2. Selecciona el tipo de inserción "Botón"

En la pantalla de selección del tipo de inserción, haz clic en el botón **"Seleccionar"** de la tarjeta **Botón**.

![Código de inserción tipo botón](https://www.tucalendi.com/images/content/widget/en/widget-embed-code-button.png)

## Paso 3. Elige entre Calendario y Encuesta

A continuación, elige qué tipo de widget se abrirá al hacer clic en el botón: **Calendario** para el widget de reserva de citas, o **Encuesta** para una encuesta con enrutamiento. Haz clic en **"Seleccionar"** en la tarjeta correspondiente. En este tutorial, la tarjeta "Calendario".

![Códigos de inserción del widget de calendario](https://www.tucalendi.com/images/content/widget/en/widget-embed-codes-inline-calendar.png)

## Paso 4. Selecciona el evento

Haz clic en el campo **"Evento"** para abrir el menú desplegable y selecciona el evento o calendario para el que quieres generar el código.

![Seleccionar evento](https://www.tucalendi.com/images/content/widget/en/widget-embed-codes-inline-calendar-select.png)

El menú muestra los calendarios y eventos disponibles en tu cuenta, organizados por categoría.

![Elegir calendario o evento](https://www.tucalendi.com/images/content/widget/en/widget-embed-codes-inline-calendar-select-event.png)

## Paso 5. Personaliza el botón y copia el código

Una vez que hayas seleccionado el evento, TuCalendi muestra dos secciones en la misma pantalla:

- **Configuración**: te permite personalizar el botón antes de copiar el código. Puedes modificar el **texto del botón** (por defecto: "Reservar"), el **tipo de botón** (en línea o flotante), la **apariencia** (redondeado u otras opciones), el **color del botón** y el **color del texto**. También puedes activar el **diseñador de botones** para obtener opciones adicionales.
- **Código de inserción**: muestra el **código HTML** generado automáticamente según la configuración que hayas elegido.

Cuando el botón tenga el aspecto que quieres, haz clic en el **"icono de copiar"** que aparece en la esquina superior derecha del cuadro de código para copiarlo al **portapapeles**.

![Copiar el código de inserción del botón](https://www.tucalendi.com/images/content/widget/en/widget-embed-button-code-copy.png)

## Resumen del proceso

Para obtener el código de inserción tipo botón del Widget de TuCalendi, ve a **"Códigos de inserción del widget"**, selecciona el tipo **"Botón"** y elige **"Calendario"** o **"Encuesta"**. Selecciona el evento que quieras en el campo **Evento**. En la sección **"Configuración"** puedes personalizar el texto, la apariencia y los colores del botón. Cuando lo tengas listo, haz clic en el **"icono de copiar"** del cuadro de código para copiarlo al portapapeles y pégalo en tu sitio web.