---
title: How to Embed Booking Calendar using HTML
description: "With the new **Embed Booking Calendar** feature, you can now display your booking calendar anywhere on your website using a simple HTML code. This allows your clients to view your availability and book appointments without ever leaving your site, creating…"
url: "https://fluentbooking.com/docs/how-to-embed-booking-calendar-using-html/"
updated: "2025-12-29"
category: Miscellaneous
---

# How to Embed Booking Calendar using HTML

With the new **Embed Booking Calendar** feature, you can now display your booking calendar anywhere on your website using a simple HTML code. This allows your clients to view your availability and book appointments without ever leaving your site, creating a seamless and professional user experience.

## Select Your Calendar

To get started, you need to generate the embed code for the specific calendar or host profile you wish to display.

Navigate to **Booking Calendars** on your FluentBooking dashboard. Choose the specific calendar you want to embed. Click the **Share** icon associated with that calendar.

![](https://fluentbooking.com/wp-content/uploads/2025/12/share-calendar-1-scaled.webp)

A pop-up window will appear. Click on the **Embed** tab. You will see a box containing the **HTML** code. Simply **copy** this code.

![](https://fluentbooking.com/wp-content/uploads/2025/12/copy-html-code-2-scaled.webp)

## Alternative: Get Code from Host Settings

You can also retrieve the embed code directly from your Host Settings to embed your entire profile.

Go to **Host Settings** in your dashboard. Select **Calendar Settings**. Click the **Share** icon to find the **HTML** code.

![](https://fluentbooking.com/wp-content/uploads/2025/12/host-settings-3-scaled.webp)

A pop-up window will appear. Click on the **Embed** tab. You will see a box containing the HTML code. Simply **copy** this code.

![](https://fluentbooking.com/wp-content/uploads/2025/12/host-embed-6-1-scaled.webp)

## Add the Calendar to Your Page

Once you have your code, you can place it on any website, including WordPress or external sites.

Go to the specific page or post where you want the calendar to appear.

- **For WordPress:** Add a **Custom HTML** block to your page editor.
- **For Non-WordPress Sites:** Open your page's HTML editor.

**Paste** the copied code into the block or editor. Click **Preview** to ensure the calendar renders correctly.

![](https://fluentbooking.com/wp-content/uploads/2025/12/preview-5.webp)

> **Note for WordPress Users:** Please ensure that your WordPress hosting server supports iframe embedding for the calendar to display correctly.

### Save and Publish

Once everything looks good in the preview, click **Save** or **Publish**. Your booking calendar is now live! Clients can book appointments directly from this embedded view.

**Congratulations!** You have successfully embedded your booking calendar. Embedding your schedule is a quick and easy way to keep clients engaged on your own website.

If you have any further questions, concerns, or suggestions, please do not hesitate to contact our **[support team](https://wpmanageninja.com/account/dashboard/)**. Thank you.