REVSET LABS · EXPERT GUIDE·Calendars & Appointments
How to Embed GoHighLevel Calendars Using HTML Code
1,186 words·5 min read·Updated 27 April 2026·beginner· Quick Answer
To embed a GoHighLevel calendar using HTML, go to Calendars → Calendar Settings → [Your Calendar] → Integrations. Copy the provided embed code and paste it into your website's HTML editor or custom code block. This process typically takes 5-10 minutes.
Key Takeaways
- ✓Always generate a fresh embed code for each specific calendar you want to use.
- ✓Choose between an inline embed for dedicated booking pages or a button embed for subtle calls-to-action.
- ✓Paste the GoHighLevel embed code into a 'Custom HTML' or 'Code Block' element on your website.
- ✓Thoroughly test your embedded calendar on the live website to ensure it functions correctly.
- ✓Utilize GoHighLevel's built-in calendar design settings for primary styling before attempting custom CSS.
Why Embed Your GoHighLevel Calendar?
Embedding your GoHighLevel calendar directly onto your website creates a seamless booking experience for your clients. Instead of redirecting visitors to an external link, they can schedule appointments right on your page. This reduces friction, improves user experience, and helps you convert more leads into booked meetings. This guide shows you exactly how to get your GoHighLevel calendar code and place it on any website using HTML.
🔥 Pro Tip
Consider using an inline embed for dedicated booking pages and a button embed for general contact or service pages.
How to Prepare Your GoHighLevel Calendar for Embedding
Before you can embed your calendar, ensure it is fully set up and configured within GoHighLevel. This includes defining availability, meeting duration, and any custom fields. A well-prepared calendar ensures a smooth booking process once embedded.
1
Access Your GoHighLevel Account — Log in to your GoHighLevel account. You need administrative access to manage calendars and their settings.
2
Navigate to Calendars — From the left-hand menu, click on Calendars. This action opens your calendar dashboard, displaying all your current calendars.
3
Select Calendar Settings — Click on Calendar Settings at the top of the calendar dashboard. This displays a list of all your active calendars available for embedding.
4
Choose Your Calendar — Locate the specific calendar you want to embed and click on its name to open its individual settings. This ensures you are generating the code for the correct booking option.
⚠️ Always double-check that your calendar's availability and settings are correct before embedding. Incorrect settings can lead to missed appointments or booking errors for your clients.
How to Generate the Embed Code in GoHighLevel
GoHighLevel provides a simple way to generate the necessary HTML code for embedding your calendar. You can choose between an inline embed, which displays the calendar directly on the page, or a button embed, which opens the calendar in a pop-up window.
1
Go to Integrations — Within your selected calendar's settings, click on the Integrations tab. This section contains options for linking your calendar to external platforms.
2
Select Embed Type — You will see options for Inline Embed and Button Embed. Choose the option that best suits your website's design and user experience.
3
Copy the Embed Code — Click the Copy Code button next to your chosen embed type. The code is now copied to your clipboard, ready for pasting onto your website.
🔥 Pro Tip
For a clean, dedicated booking page, use the Inline Embed. For a subtle call-to-action on a service page, opt for the Button Embed.
Try GoHighLevel Free
Start your 30-day GoHighLevel free trial
Everything in this guide is in your free trial. 30 days, no credit card — the platform behind 78+ revenue systems.
Some links are affiliate links — if you sign up we may earn a commission, at no extra cost to you. We only recommend GoHighLevel because we build on it every day.
How to Embed Your Calendar on a Website Using HTML
Once you have the embed code, the next step is to paste it into your website's HTML. This process is similar across most website platforms that allow custom HTML. You will typically look for a 'Custom HTML' block or a way to edit the page's source code.
1
Access Your Website Editor — Open your website's content management system (CMS) or HTML editor. Navigate to the specific page where you want the calendar to appear.
2
Locate a Custom HTML Block — Most website builders offer a 'Custom HTML,' 'Code,' or 'Embed' block. Drag and drop this element onto your page. If you are editing raw HTML, open the `.html` file.
3
Paste the Embed Code — Paste the GoHighLevel calendar embed code you copied earlier into the custom HTML block or directly into your page's HTML ` section where you want it to display.
4
Save and Publish Your Changes — Save the changes to your page or file within your website editor. Then, publish your website to make the updates live for your visitors.
5
Test the Embedded Calendar — Open your live website in a browser and navigate to the page with the embedded calendar. Interact with the calendar to ensure it loads correctly and allows bookings.
✅ When embedding an inline calendar, ensure the container element on your website has sufficient width and height to prevent display issues or scrollbars.
While the core process of copying and pasting HTML remains the same, how you access the HTML editor varies slightly by platform. Here are instructions for common website builders.
1
For GoHighLevel Funnel/Website Builder — Follow these steps to embed your calendar directly within GoHighLevel's own site builder. This is ideal for pages built within your GoHighLevel account.
2
a. Open the Builder — Navigate to Sites → Funnels/Websites and open the specific page in the editor where you want to add the calendar.
3
b. Add Custom HTML Element — Click the + icon to add a new element, then scroll down and select Custom HTML/JS. This creates a placeholder for your code.
4
c. Paste Code — Click on the newly added HTML element, then click Open Code Editor. Paste your calendar embed code here and click Save to apply it.
5
d. Save Page — Click Save in the top right corner of the builder, then preview or publish your page to see the embedded calendar live.
6
For WordPress — If your website runs on WordPress, use the custom HTML block available in the Gutenberg editor.
7
a. Edit Page/Post — In your WordPress dashboard, go to Pages or Posts and edit the desired content where the calendar will be placed.
8
b. Add Custom HTML Block — Click the + icon to add a new block. Search for and select the "Custom HTML" block type.
9
c. Paste Code — Paste your GoHighLevel calendar embed code into the custom HTML block. Ensure no extra characters are added.
10
d. Update Page — Click Update or Publish to save your changes and make the embedded calendar visible on your live WordPress site.
11
For Other Builders (e.g., Squarespace, Wix, etc.) — Many other website builders offer similar functionality for embedding custom code. The general approach remains consistent across platforms.
12
a. Locate Code Embedding Option — Find the option to add 'Code Block,' 'Embed Code,' or 'Custom HTML' within your page editor. This feature is usually found in the element library.
13
b. Paste Code — Paste the GoHighLevel calendar embed code into the designated area within the code block. Do not modify the code.
14
c. Save and Publish — Save your changes within the builder and publish the page. Always check the live page to confirm the calendar appears correctly.
🔥 Pro Tip
Always use the 'Custom HTML' or 'Code Block' feature in website builders. Avoid pasting embed codes directly into rich text editors, as they may strip out necessary HTML elements, breaking the calendar functionality.
Customizing Your Embedded Calendar's Appearance
You can customize the look and feel of your embedded calendar to match your brand. GoHighLevel offers built-in styling options, and you can also apply custom CSS for more advanced changes directly on your website.
1
Adjust GHL Calendar Settings — In GoHighLevel, go to Calendars → Calendar Settings → [Your Calendar]. Adjust options like colors, fonts, and branding under the Design tab. These changes reflect automatically on your embedded calendar wherever it is used.
2
Use Custom CSS (Advanced) — On your website, you can add custom CSS rules to override the calendar's default styling. Target the ` 
