Untitled 1 1

Website in a Box Template: How to Embed Your Calendar on Your Website

Adding a calendar to your website makes it easy for leads to book a call without the back-and-forth emails. Whether you’re using Calendly, Acuity, Dubsado, or TidyCal, this guide will show you how to embed your scheduler directly into your Contact page or CTA section using Elementor.

Step 1: Copy Your Embed Code

Choose your scheduler below and follow the steps to get your embed code:

If You’re Using Calendly

  1. Log in to your Calendly account
  2. Click Share Your Link
  3. Choose Add to Website
  4. Select Inline Embed
  5. Customize the widget if you’d like
  6. Click Copy Code

If You’re Using Acuity (Squarespace Scheduling)

  1. Log in to your Acuity account
  2. Go to Scheduling Page Link > Embed Scheduler
  3. Choose Inline Embed
  4. Copy the full HTML embed code

If You’re Using Dubsado

  1. Log in to your Dubsado dashboard
  2. Go to Templates > Scheduler
  3. Click your scheduler
  4. Click Share, then Embed Code
  5. Copy the Inline Embed Code

Image

Image

If You’re Using TidyCal

  1. Log in to your TidyCal account
  2. From the dashboard, click Booking Links
  3. Click the three dots next to your link and choose Embed
  4. Choose Inline Embed and copy the code provided

Click on the “Embed on your website” to embed a Booking Type.

The Booking Type embed code will look like this:

Step 3: Paste the Embed Code into Elementor

  1. Go to the page where you want to embed your calendar (e.g., Contact page or Homepage)
  2. Click Edit with Elementor
  3. Drag the HTML widget into the section where you want the calendar to appear
  4. Paste your embed code into the left-hand panel
  5. Click Update to save

Edit embed

Step 4: Resize If Needed

Some scheduling tools let you set a fixed height. If your calendar looks “cut off” or too tall, go back to the scheduler platform and adjust the embed height.

Most of the time, a height of 600–800 pixels works well for inline embeds.

Don’t Forget to Save a Backup

Once your calendar is embedded, go to Settings > UpdraftPlus Backups and click Backup Now to save your latest changes.

Updraft backup

That’s It!

Your calendar is now live on your site and ready to help leads book with you, without the inbox overload.

Next up: How to Update Your Services Page Copy »
—or head back to the Help Center homepage to choose your next tutorial.

Meet the Author:

Picture of Chatsoni Brooks

Chatsoni Brooks

Websites for Bookkeepers owner and website strategist sharing tips, tools, and resources to help bookkeepers fix—and avoid—the 3 reasons most websites fail.

Website in a Box Template: Website Launch Checklist

Final steps to review before you launch your Website in a Box You’ve customized your site, and you’re almost ready to go live. This checklist will help you confirm that everything looks polished, works properly, and is ready to be shared with potential clients. No need to aim for perfection—just make sure the essentials are covered. 1. Review All Pages

Read More »

Website in a Box Template: How to Customize Your Resource Library Page

The Resource Library page is a flexible, bonus section that lets you showcase all your offers in one place—perfect for clients who have: This page includes: Step 1: Open the Resource Library Page in Elementor Step 2: Customize the First Resource Section Each section is designed to highlight a single resource. Repeat for each section you’d like to feature. Step

Read More »

Website in a Box Template: How to Customize Your Legal Pages

Your legal pages may not be the flashiest part of your site, but they’re essential for protecting your business, building trust, and complying with privacy laws. The good news? The hard part is already done. Your Privacy Policy, Terms & Conditions, Cookie Policy, and Disclaimer pages have already been created and saved as drafts—ready for you to personalize. Step 1:

Read More »

Website in a Box Template: How to Create a Blog Post

Blogging is a great way to: This tutorial walks you through how to create and publish your first blog post, step by step. Step 1: Go to the Posts Section Step 2: Add Your Blog Title and Content Start with a clear, helpful blog title.Then, begin writing your content in the block editor just like you would in a Google

Read More »