---
language: es
title: Diseñador de botones
category: Online booking
summary: Aprende a crear y personalizar un botón para tu web con el diseñador de TuCalendi y a obtener su código de inserción.
---

# Diseñador de botones

Hemos desarrollado el **diseñador de botones** para que puedas añadir en tu sitio web un botón, personalizado con múltiples opciones, que dé acceso a tu calendario online.

Cada botón que diseñes tendrá su [propio código de integración, que debes usar para insertar el botón en tu sitio web](https://www.tucalendi.com/es/s/reserva-online/incrustar-widget-tucalendi-como-boton).

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

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

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

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

Elige el **tipo de widget** que quieres insertar en tu sitio web:

- Calendario.
- Encuesta inteligente.

> [!TIP]
> El proceso es exactamente el mismo para ambos tipos de widget.

Selecciona **"Calendario"**:

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

Haz clic en el menú desplegable y elige el **Calendario** o el **Evento** que quieres mostrar cuando alguien haga clic en el botón de reserva.

En este caso hemos elegido el evento llamado **"First Event (30 Min)"**.

Activa la opción **"Usar diseñador de botones"**.

![Diseñador del código del botón](https://www.tucalendi.com/images/content/online-booking/en/v2-embed-button-code-designer.png)

Al hacer clic en **"Diseñador de botones"** accederás al diseñador, con numerosas opciones para que crees el botón como quieras.

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

Las posibilidades para diseñar y personalizar los botones son múltiples:

- **Texto del botón**. El mensaje que aparece en el botón. Puedes crear una **llamada a la acción** atractiva que anime a tus clientes a hacer clic y reservar una cita.
- **Color del botón**.
- **Color del texto**.
- **Familia de fuente**. Puedes elegir entre diferentes fuentes para el texto del botón.
- **Alineación del texto**. Alinea el texto dentro del botón.
- **Estilo de fuente**.
- **Grosor de fuente**. Para elegir el grosor de la fuente.
- **Tamaño de fuente**. Para cambiar el tamaño de la fuente simplemente moviendo la barra para aumentarlo o reducirlo.
- **Ancho mínimo**. El ancho mínimo del botón.

Y otras opciones que, además de tener la barra para cambiar el valor, se desbloquean al hacer clic en el **"Candado"**, para que puedas jugar más con estas funciones:

- **Relleno** (padding).

![Diseñador de botones padding](https://www.tucalendi.com/images/content/online-booking/v2-disenador-boton-padding.png)

- **Radio del borde**.

![Diseñador de botones radio del borde](https://www.tucalendi.com/images/content/online-booking/v2-disenador-boton-radio-borde.png)

- **Sombra de caja**.

![Diseñador de botones sombras](https://www.tucalendi.com/images/content/online-booking/v2-disenador-boton-sombras.png)

Cuando hayas diseñado el botón:

![Botón diseñado](https://www.tucalendi.com/images/content/online-booking/en/v2-button-designed.png)

haz clic en **"Guardar"** y se generará el **código de inserción** del botón que has diseñado:

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

Solo tienes que **copiar el código y pegarlo en tu sitio web** para que se muestre tal y como lo has diseñado.