How to Set Up Booking Pages in Google Workspace

Last updated: January 8, 2026

Google Workspace includes a powerful booking page feature that lets clients schedule appointments directly from your website. This guide walks through creating a booking page, customizing your availability, and embedding it on your site using either a pop-up button or inline iframe.

How do I create a booking page in Google Calendar?

Google Calendar’s booking pages let clients self-schedule appointments based on your availability. Here’s how to create one:

Step 1: Navigate to Google Calendar

Go to calendar.google.com and sign in with your Google Workspace account.

Step 2: Find the Booking Pages section

On the left sidebar, look for Booking Pages. Click the + button to create a new booking page.

Note: Booking pages are available with Google Workspace subscriptions. If you don’t see this option, check that your admin has enabled the feature for your organization.

How do I customize my booking page settings?

Once you click the + button, you’ll be guided through the setup wizard.

Set your availability

Define the hours you’re available for bookings. You can:

• Set different hours for different days
• Block out lunch breaks or buffer time between meetings
• Specify how far in advance people can book

Add a co-host (optional)

If you’re running meetings with a colleague, you can add them as a co-host. Both calendars will be checked for availability, and both will receive calendar invites when someone books.

Configure meeting details

• Title: What clients see when booking (e.g., “30-Minute Consultation”)
• Duration: How long each meeting slot lasts
• Location: Video call link, phone number, or physical address
• Description: Instructions or information for attendees

Save your booking page

Click Save when you’re done. You’ll notice a new calendar placeholder appears on your calendar representing this booking page.

How do I get the embed code for my booking page?

After creating your booking page, you need to access the sharing options to get your embed code.

Step 1: Find your booking page on the calendar

Look for the booking page placeholder on your Google Calendar. Click on it to open the details.

Step 2: Access sharing options

Click the three dots (⋮) in the top right corner of the event details. Select More Sharing Options from the dropdown menu.

Step 3: Choose your embed type

You’ll see options for:

• Link: A direct URL you can share
• Embed: Code snippets for your website (button or iframe)

How do I embed a booking button on my website?

The button embed creates a clickable button that opens the booking calendar in a pop-up overlay. This is ideal when you want a clean call-to-action without taking up much page space.

Button embed code

Copy this code and replace the URL with your own booking page URL:

<!-- Google Calendar Appointment Scheduling begin -->
<link href="https://calendar.google.com/calendar/scheduling-button-script.css" rel="stylesheet">
<script src="https://calendar.google.com/calendar/scheduling-button-script.js" async></script>
<script>
(function() {
  var target = document.currentScript;
  window.addEventListener('load', function() {
    calendar.schedulingButton.load({
      url: 'https://calendar.google.com/calendar/appointments/schedules/YOUR_SCHEDULE_ID?gv=true',
      color: '#039BE5',
      label: 'Book an appointment',
      target: target,
    });
  });
})();
</script>
<!-- end Google Calendar Appointment Scheduling -->

Live example

Here’s what the button looks like when embedded—click to book a call with us:

Customization options

You can customize the button by modifying the script parameters:

• color: Change the button color (hex code)
• label: Change the button text

How do I embed an inline booking calendar?

The iframe embed displays the full booking calendar directly on your page. This works well for dedicated booking pages where you want visitors to see all available slots at once.

Inline iframe code

Copy this code and replace the URL with your own booking page URL:

<!-- Google Calendar Appointment Scheduling begin -->
<iframe
  src="https://calendar.google.com/calendar/appointments/schedules/YOUR_SCHEDULE_ID?gv=true"
  style="border: 0"
  width="100%"
  height="600"
  frameborder="0">
</iframe>
<!-- end Google Calendar Appointment Scheduling -->

Live example

Here’s our actual booking calendar—select a time to schedule a call:

Sizing tips

• Width: Use width="100%" for responsive layouts
• Height: 600px works well for most calendars; increase if you have many time slots
• Mobile: The Google Calendar embed is responsive and adjusts automatically

When to use each embed type