---
language: en
title: How to Get the Button-Style Embed Code for the TuCalendi Widget
category: Widget
summary: Generate and customize a button embed code that opens the TuCalendi booking widget as a pop-up on your website.
---

# How to Get the Button-Style Embed Code for the TuCalendi Widget

This tutorial explains how to get the **button-style embed code** for the TuCalendi Widget. Unlike the [inline widget](https://www.tucalendi.com/en/s/widget/how-to-get-the-embed-code-for-the-tucalendi-widget), which is displayed directly on the page, the **Button** type adds a button to your website that, when clicked, opens the booking widget as a **pop-up window**. Additionally, the button can be configured as a **floating button** that remains visible at all times while the user browses the page.

Before you begin: TuCalendi lets you customize the **button text**, its **visual appearance**, and its **colors** directly from the **code generator**, no technical knowledge required.

## Step 1. Go to the Widgets section

From the TuCalendi side menu, click on **Widgets** and select **"Embed Code"** or click the **"Select"** button on the Embed Code card.

![Widget embed codes](https://www.tucalendi.com/images/content/widget/en/widgets-embed-codes.png)

## Step 2. Select the "Button" embed type

On the embed type selection screen, click the **"Select"** button on the **Button** card.

![Button embed code](https://www.tucalendi.com/images/content/widget/en/widget-embed-code-button.png)

## Step 3. Choose between Calendar and Survey

Next, choose which type of widget will open when the button is clicked: **Calendar** for the appointment booking widget, or **Survey** for a survey with routing. Click **"Select"** on the corresponding card. In this tutorial, it's the "Calendar" card.

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

## Step 4. Select the event

Click the **"Event"** field to open the dropdown menu and select the **event or calendar** for which you want to generate the code.

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

The menu displays the calendars and events available in your account, **organized by category**.

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

## Step 5. Customize the button and copy the code

Once you've selected the event, TuCalendi displays two sections on the same screen:

- **Settings**: lets you customize the button before copying the code. You can modify the **button text** (default: "Book"), the **button type** (inline or floating), the **appearance** (rounded or other options), the **button color**, and the **text color**. You can also enable the **button designer** for additional options.
- **Embed Code**: displays the automatically generated **HTML code** based on your selected settings.

Once the button looks the way you want, click the **"copy icon"** in the upper-right corner of the code box to copy it to the **clipboard**.

![copy button embed code](https://www.tucalendi.com/images/content/widget/en/widget-embed-button-code-copy.png)

## Process Overview

To get the button-type embed code for the TuCalendi Widget, go to **"Widget Embed Codes"**, select the **"Button"** type, and choose **"Calendar"** or **"Survey"**. Select the desired event in the **Event** field. In the **"Settings"** section, you can customize the button's text, appearance, and colors. When you're ready, click the **"copy icon"** in the code box to copy it to the clipboard and paste it onto your website.