---
language: en
title: How to Get the Embed Code for the TuCalendi Widget
category: Widget
summary: Step-by-step guide to generating and copying the inline embed code so the TuCalendi booking widget appears directly on your website.
---

# How to Get the Embed Code for the TuCalendi Widget

This tutorial explains how to get the **inline embed code** for the **TuCalendi Widget**. Once you've copied it, simply **paste it into your website**, and the **booking widget** will appear directly on your site.

If you're not sure what an embed code is or what it's used for, we recommend reading the introductory tutorial on [what the TuCalendi Widget embed code is](https://www.tucalendi.com/en/s/widget/what-is-the-embed-code-for-the-tucalendi-widget) first.

## Step 1. Go to the Widgets section

From the TuCalendi side menu, click on **Widgets**. You'll see two options: **Appearance** and **Embed Codes**. Click on **"Embed Codes"** 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 "Inline" embed type

TuCalendi offers two **embedding types**: Inline and Button. The **"Inline"** type embeds the widget directly on the page, at the location where you paste the code. The **"Button"** type adds a button that opens the widget as a **pop-up window**.

For this tutorial, we'll select **"Inline"**. Click the **"Select"** button on the Inline card.

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

## Step 3. Choose between Calendar and Survey

Next, TuCalendi asks you what type of widget you want to embed: **Calendar** or **Form/Survey**. Select **"Calendar"** if you want to display the **appointment booking widget**. Select **"Survey"** if you want to embed a **survey with branching**.

In this tutorial, we'll select **"Calendar"**. Click the **"Select"** button on the Calendar card.

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

## Step 4. Select the Event

On the next screen, you'll see the **"Event"** field. Click it to open the menu and select the **individual event** or **calendar with multiple events** for which you want to generate the embed 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**.

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

## Step 5. Copy the embed code

Once you've selected the event, TuCalendi **automatically generates the embed code** and displays it in the box in the **Embed Code** section. Click the **"copy icon"** in the upper-right corner of the box to **copy the code to the clipboard**.

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

The code is now ready to be pasted onto your website.

## Process Overview

To obtain the embed code for the TuCalendi widget, go to **"Widgets" > "Embed Codes"**, select the **"Inline"** type, and choose **"Calendar"** or **"Survey"**. Next, select the desired event or calendar in the **"Event"** field. TuCalendi will **automatically generate the code**. Click the **"copy icon"** to copy it to the clipboard and paste it onto your website.