Skip to content
Calendars & Appointments

Embedding GHL Customer Care Calendars using HTML Code

Embed your GHL Customer Care calendar on any website using HTML iframe code. Learn the steps to display a mobile-friendly, fully functional calendar for booking.

1 min read101 words1 explained imageUpdated Tue, 17 Mar at 7:34 AM
View as markdownOpen in ClaudeOpen in ChatGPT
Each image has a one line explanation. Switch to full detail for the step it belongs to, the fields and buttons involved, examples and the whole procedure.
  1. Go to "Calendars" > "Calendar Settings"
  2. For the specific calendar you'd like to embed, click the "three dots" icon and select "Share"
  3. In the pop-up modal, select the "Embed Code" tab
  4. Click "Copy"
  5. Past the embed code in a custom code element on another website as desired. 
Note: If you are looking to embed a GHL Customer Care Calendar in a funnel or website page in GHL Customer Care, you can use the Calendar element in the page builder. This element will allow you to choose the calendar you'd like to display and automatically insert it without the need for adding an embed code manually.
Figure 1 What this shows Note: If you are looking to embed a GHL Customer Care Calendar in a funnel or website page in GHL Customer Care, you can use the Calendar… What this shows Illustrates "Embedding GHL Customer Care Calendars using HTML Code". This animation appears in "Embedding GHL Customer Care Calendars using HTML Code". The text alongside this image reads: Note: If you are looking to embed a GHL Customer Care Calendar in a funnel or website page in GHL Customer Care, you can use the Calendar element in the page builder. This element will allow you to choose the calendar you'd like to display and automatically insert it without the need for adding an…. This part of the guide covers 1 field, listed below. Image 1 of 1 What to chooseNote: If you are looking to embed a GHL Customer Care Calendar in a funnel or website page in GHL Customer Care, you can use the Calendar element in the page builder. This element will allow you to choose the calendar you'd like to display and automatically insert it without the need for adding an embed code manually.
Fields in this part of the guide In the pop-up modal, select the "Embed Code" tab
All 5 steps in this procedure
  1. Go to "Calendars" > "Calendar Settings"
  2. For the specific calendar you'd like to embed, click the "three dots" icon and select "Share"
  3. In the pop-up modal, select the "Embed Code" tab
  4. Click "Copy"
  5. Past the embed code in a custom code element on another website as desired.

Was this guide helpful?

Related guides

User Permissions in Calendars2 min read · 2 imagesAdd Guests Features in Calendar Bookings4 min read · 5 imagesUsing Custom Values in Calendars3 min read · 1 imagesShow seats per slot for Class booking on the booking widget2 min read · 2 images