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.

Related Posts:

Website in a Box Template: How to Set Up Stripe and PayPal for Selling Digital Products

If you’re ready to start selling digital products on your website, like the white-label digital products included in the Social Accountant membership, you’ll need to connect a payment processor to your e-commerce platform. This tutorial will walk you through: Stripe vs PayPal: Setup Before you sell anything, you’ll need to create accounts with one or both platforms. Create a Stripe

Read More »

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 »

Find this post helpful? Subscribe to get the next article sent straight to your inbox!​

Share to...