---
language: en
title: Button designer
category: Online booking
summary: Learn how to design a custom booking button in TuCalendi and generate the embed code to add it to your website.
---

# Button designer

We have developed the **button designer** so you can add a button to your website, customized with multiple options, that gives access to your online calendar.

Each button you design will have its [own integration code that must be used to embed the button on your website](https://www.tucalendi.com/en/s/online-booking/embed-tucalendi-widget-as-a-button).

[Log in to TuCalendi](https://account.tucalendi.com/login) with your username and password. Go to the **"Embed codes"** option in the vertical menu:

![Embed codes](https://www.tucalendi.com/images/content/online-booking/v2-embed-codes.png)

In the **"Button"** section, click **"Select"**.

![Widget button type](https://www.tucalendi.com/images/content/online-booking/en/v2-widget-type-button.png)

Choose the **type of widget** you want to embed on your website.

- Calendar.
- Smart Survey.

> [!TIP]
> The process is exactly the same for both widget types.

Select **"Calendar"**:

![Embed code](https://www.tucalendi.com/images/content/online-booking/en/v2-embed-button-calendar-code.png)

Click the drop-down menu and choose the **Calendar** or **Event** you want to display when someone clicks the booking button.

In this case, we have chosen the event called **"First Event (30 Min)"**.

Activate the **"Use button designer"** option.

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

Clicking **"Button designer"** takes you to the designer, where you'll find numerous options to create the button just the way you want.

![Button designer](https://www.tucalendi.com/images/content/online-booking/en/v2-button-designer.png)

There are many ways to design and customize your buttons:

- **Button text**. The message displayed on the button. You can create an attractive **call to action** that will make your customers want to click and book an appointment.
- **Button color**.
- **Text color**.
- **Font family**. You can choose between different fonts for the button text.
- **Text align**. Aligns the text on the button.
- **Font style**.
- **Font weight**. Lets you choose the font weight.
- **Font size**. Change the font size by simply moving the slider to increase or decrease the size.
- **Minimum width**. The minimum width of the button.

There are also other options that, besides having a slider to change the value, get unlocked when you click the **"Padlock"**, so you can experiment more with these settings.

- **Padding**.

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

- **Border radius**.

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

- **Box shadow**.

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

When you have designed the button:

![Button designed](https://www.tucalendi.com/images/content/online-booking/en/v2-button-designed.png)

Click **"Save"** and the **embed code** for the button you have designed will be generated:

![Embed code for a button](https://www.tucalendi.com/images/content/online-booking/en/v2-embed-code-for-button.png)

You only need to **copy the code and paste it into your website** to display the button exactly as you designed it.