After I shared how to stop using Calendly and switch to Google Calendar appointment scheduling, I did not expect that video to take off the way it did 👀

But you guys had one very clear follow-up question:

👉 “Okay… but how do I actually put this on my website?”

So that’s what we’re doing today.

Whether your site is built on WordPress, Squarespace, or Showit, I’m going to walk you through:

• Where to grab your Google Calendar embed code
• The two different embed styles you can use
• Exactly how to add it to your site (without breaking anything)

No more back-and-forth emails.
No extra scheduling tools.
Just clean, simple booking that works ✨

---

First: grab your Google Calendar embed code

Once you’ve created your appointment schedule inside Google Calendar, this part is easy.

1. Click on the appointment schedule you want to embed
2. Hit Share
3. Look for Website Embed

From here, you’ll see two options — and which one you choose really matters for how your site feels.

---

Option 1: Inline calendar embed (calendar lives on the page)

This option places the full booking calendar directly on your website page.

Think:

• Visitors scroll
• They see your availability
• They book right there

To use this:

• Copy the inline booking page code
• Paste it into your site using an HTML or Code block

✨ Heads up: this version cannot be styled.
It will always be Google’s blue, and that’s okay. It’s functional, not decorative.

If you want full control over branding… keep reading.

---

Option 2: Button + pop-up scheduler (more customizable)

This is my personal favorite for most sites.

Here’s how it works:

• You place a button on your site (“Book Now,” “Schedule a Call,” etc.)
• When someone clicks it, the scheduler pops up in a window

The perk?
✔️ You can customize the button color
✔️ You can use your brand hex codes
✔️ Your page stays visually clean

If aesthetics matter to you (hi, creatives 🫶), this is usually the move.

---

How to embed Google Calendar on WordPress (Elementor)

If you’re using Elementor, here’s the flow:

1. Open your page in Elementor
2. Add a new section (structure doesn’t matter much)
3. Drag in an HTML widget
4. Paste your embed code

Now the important part: height.

By default, the calendar will scroll weirdly — especially on mobile.

What I recommend:

• Start with a height of 800
• Check mobile view
• Increase to 1200 if needed

Yes, this will leave extra space on desktop.
That’s normal. Mobile always wins here.

---

How to embed Google Calendar on Squarespace

Squarespace keeps things pretty simple:

1. Open the page you want to edit
2. Add a Code Block
3. Paste in your embed code

Most of the time, Squarespace auto-sizes better than WordPress — but still:

• Preview on mobile
• Adjust the height if you see scrolling inside the embed

If the spacing feels off on desktop, embedding the button version instead is usually the cleaner solution.

---

How to embed Google Calendar on Showit

Showit users — you’re not left out ✨

Here’s what to do:

1. Add an Embed Code canvas
2. Double-click and paste your code
3. Resize the canvas:
   • Full width
   • Tall enough for the calendar
4. Check your mobile view (always)

One extra tip for Showit:
Make sure the background color behind the embed is light enough so the calendar text is readable.

You can also skip the inline calendar entirely and:

• Add a button
• Link it to your Google booking page
• Open it in a new window

Clean and effective.

---

Inline calendar vs button pop-up (how to choose)

If you’re not sure which embed style to use, here’s a quick gut-check:

Inline calendar is great if:

• Booking is the only purpose of the page
• You want zero clicks between interest and booking

Button pop-up is better if:

• You want brand control
• The page has other content
• You care about visual flow

There’s no wrong answer — just pick what supports your client experience best.

---

Why this matters (more than you think)

Every time someone has to email you to book a call, that’s friction.

Embedding your scheduler means:
✔️ Fewer emails
✔️ Faster bookings
✔️ Clearer boundaries
✔️ A smoother client experience

And smoother systems = more energy for the work you actually love 🪄

If Google Calendar is part of your backend, these posts may help too:

• Stop Using Calendly – How To Use Google Calendar Appointment Scheduling
• How I Made My Google Calendar Aesthetic (And Why It Changed Everything)
• How To Sync I Cal And Google Calendar With Dubsado (and Avoid Double Booking)

---

Final thoughts

You don’t need another tool.
You don’t need complicated tech.
You just need your systems to talk to each other clearly.

Embedding your Google Calendar scheduler is one of those small changes that quietly makes your business feel way more put together — for you and for your clients.

With systems and a touch of magic on your side,
Lauren ✨