> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hiveku.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Add Booking to Your Website

> Put your booking calendar on a page of your website, so visitors pick a time without leaving your site

Your booking page has its own address, but visitors can also book straight from your website. Copy the calendar's code from **Share & embed** and put it on a page.

This guide adds Northwind's booking calendar to the home page of its Pearl District site, in the builder's preview.

## Copy the code

Click **Calendar** in the left rail, then **Share & embed**. **What to share** at the top picks your whole booking page or one meeting type. Northwind kept **Booking page (all meeting types)**.

Click the **Inline embed** tab. It puts the calendar inside a page. Leave **Code** on **Script (recommended)**, so the calendar grows and shrinks with the page. Then click **Copy code**.

![Options: Use a different colour here, off; Code, Script (recommended) picked, iframe only; then the Inline calendar HTML with Copy code outlined, and the note: Paste this into your website where it should appear](https://mintcdn.com/locusdigital/XF2CFoG5vS8OfiWJ/images/how-tos/calendar/emb-01-code-closeup.webp?fit=max\&auto=format\&n=XF2CFoG5vS8OfiWJ\&q=85\&s=3f3890a44556502756ecb600daa5dad1)

## Put it on a page

On a site made in Hiveku, let the builder's AI place it. Open the website in the builder and say where the calendar should go, then paste the code into the chat.

![The builder chat box: Add a Book a tasting section at the bottom of the home page, just above the footer, with our booking calendar in it. Here is the code from Hiveku Calendar, followed by the pasted code. The send button is outlined](https://mintcdn.com/locusdigital/XF2CFoG5vS8OfiWJ/images/how-tos/calendar/emb-02-ask-closeup.webp?fit=max\&auto=format\&n=XF2CFoG5vS8OfiWJ\&q=85\&s=407e32ab8fb125c0181242d6905144b5)

Click the arrow to send it. The AI added a **Book a tasting** section above the footer, checked that the site still builds, and updated the preview.

> [!NOTE]
>
> On a website made somewhere else, paste the code into that page's HTML where the calendar should appear.

## Try it in the preview

Scroll to the new section in the preview. Your meeting types appear as cards.

![The Book a tasting section of the Pearl District site with two meeting cards: Wholesale tasting call, 30 min, phone call, and 30 Minute Meeting, 30 min, each with Choose a time](https://mintcdn.com/locusdigital/XF2CFoG5vS8OfiWJ/images/how-tos/calendar/emb-03-preview-closeup.webp?fit=max\&auto=format\&n=XF2CFoG5vS8OfiWJ\&q=85\&s=3517cb959980b252fc9dda1c68d3f595)

Click **Choose a time** on a card. The dates and times open right there in the page, just as on your booking page.

![Inside the Book a tasting section: Wholesale tasting call, 30 min, phone call; a calendar for October 2026 with Monday Oct 26 picked; times from 11:00 AM; and the visitor's time zone](https://mintcdn.com/locusdigital/XF2CFoG5vS8OfiWJ/images/how-tos/calendar/emb-04-times-closeup.webp?fit=max\&auto=format\&n=XF2CFoG5vS8OfiWJ\&q=85\&s=7dd648bf6b559d1a1fa1b6644a4582f7)

Northwind stopped here and booked nothing. A visitor goes on to pick a time and fill in their details, just as on your booking page.

## Publish it

The calendar reaches your live site when you publish. See [Publish Your Changes](/how-tos/site-builder/publish).

## Good to know

* **A button instead.** **Popup button** gives you a button that opens the calendar over the page. **Floating button** keeps a button in a bottom corner: paste its code into **Footer code** on your site's Custom Code page to show it on every page, as in [Add a Tracking Code to Every Page](/how-tos/websites/add-code-to-every-page).
* **One meeting type only.** Pick it in **What to share** before you copy the code.
* **Your site's colors.** **Use a different colour here** gives the calendar a color to match this website instead of your booking page's.
* **More:** [Share Your Booking Link and QR Code](/how-tos/calendar/share-booking-link) and [Set Up Your Booking Page](/how-tos/calendar/booking-page).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.