---
title: "How to embed Calendly Meeting in Elementor?"
url: https://theplusaddons.com/docs/embed-calendly-elementor/
date: 2023-01-27
modified: 2026-09-21
lang: en
author: "Aditya Sharma"
description: "Embedding your Calendly calendar on a page lets a visitor pick a free slot and confirm a booking there and then, instead of mailing you to ask when you are..."
image: https://theplusaddons.com/wp-content/uploads/2020/10/How-to-embed-Calendly-Meeting-in-Elementor_-1024x536.jpg
word_count: 797
---

# How to embed Calendly Meeting in Elementor?

## 

- The Plus Addons for Elementor Meeting Scheduler widget embeds Calendly with two fields and loads Calendly's own embed script, so no separate Calendly plugin is involved.
- Calendly setup requires a user name from calendly.com/ and at least one event, and the Time dropdown must match the event length in Calendly: 15 Minutes, 30 Minutes, or 60 Minutes.
- Display Event Type controls whether Calendly shows the event details above the calendar, while Height adjusts the embed from 0 to 1000 pixels and defaults to 650px.
- The All option in Time falls back to the 15-minute event instead of listing every event type, and a mismatch between Time and Calendly can produce the wrong event or an empty embed.

Embedding your Calendly calendar on a page lets a visitor pick a free slot and confirm a booking there and then, instead of mailing you to ask when you are free.

The **Meeting Scheduler** widget in The Plus Addons for Elementor does this with two fields. No separate Calendly plugin is involved - the widget loads Calendly's own embed script. For the rest of the widget, see the [full Meeting Scheduler settings overview](https://theplusaddons.com/docs/meeting-scheduler-widget-settings-overview/).

***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/meeting-schedulers/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** **Free**. Nothing on this page needs Pro.- **Prerequisite:** [Elementor](https://wordpress.org/plugins/elementor/) (free) installed and active.- **Widget to enable:** go to **The Plus Addons > Widgets**, search for **Meeting Scheduler** and turn its toggle on.- **A Calendly account with at least one event.** The embed points at an event, so an account with none has nothing to show.

## Steps

- Add the **Meeting Scheduler** widget to the page.- In the **Content** tab, open **Meeting Scheduler** and leave **Select** on **Calendly** - that is the shipped default.- Put your Calendly user name in the **User Name** field. It is the part of your booking link after **calendly.com/**; in Calendly you will find it under **Account > Account Settings > My Link**.- Pick the length of the event you want to show from the **Time** dropdown: **15 Minutes**, **30 Minutes** or **60 Minutes**. It must match the event's length in Calendly.- Set **Height** if 650px is not enough room for the calendar.

![The Meeting Scheduler widget's Content tab, with the Select dropdown highlighted.](https://theplusaddons.com/wp-content/uploads/2026/09/meetingsched-select.webp)

Calendly shows the user name on its own **My Link** screen - copy it from there rather than retyping it.

![Calendly account settings My Link page showing username](https://theplusaddons.com/wp-content/uploads/2023/01/calendly-username.png)

Back in Elementor, pick the matching length in **Time**.

![The Time dropdown, which sets the Calendly event length used in the embed URL.](https://theplusaddons.com/wp-content/uploads/2026/09/meetingsched-calendly-time.webp)

## What lands on the page

The widget writes a Calendly placeholder whose address is built from what you typed - **calendly.com**, then your user name, then the **Time** value - and loads Calendly's **widget.js**. On a published page we watched that script replace the placeholder with a live Calendly iframe at the address the widget had composed. The calendar itself is served by Calendly, so it looks and behaves exactly as it does on your Calendly page.

![Calendly scheduler embedded on Elementor page in The Plus Addons for Elementor](https://theplusaddons.com/wp-content/uploads/2023/01/meeting-scheduler-calendly-preview.png)

## Settings used here

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| **Select** | Which booking service to embed | Calendly |
| **User Name** | The part of your Calendly link after calendly.com/ | empty |
| **Time** | Which event length to open | 15 Minutes |
| **Display Event Type** | Show or hide the event details Calendly draws above the calendar | Show |
| **Height** | How tall the embed is, in pixels (0-1000) | 650 |

## Colours

The **Style** tab has one section, **Calendly Style**, with **Text**, **Link** and **Background**. These are not CSS: the widget hands the three colours to Calendly as part of the embed address, and Calendly paints them inside its own iframe. Use **Background** when Calendly's default white block fights with a dark page.

![The Calendly Style section in the Style tab: Text, Link and Background colours.](https://theplusaddons.com/wp-content/uploads/2026/09/meetingsched-calendly-style.webp)

## How It Behaves

- **Display Event Type** set to **Hide** tells Calendly to drop the event details it normally draws above the calendar. Set to **Show** it adds nothing and Calendly's default applies.- **Height** is applied to the embed itself. We measured 650px with the default and 800px after moving the slider.- **An empty User Name renders nothing.** Not an error, not a placeholder - the widget outputs no markup at all.- The **Display Event Type** switch is hidden while **Time** is set to **All**.

## Limitations

- **The All option in the Time dropdown does not do what it says.** Picking **All** does not list every event type - the widget falls back to your **15 Minutes** event, which is what we saw on the page. Pick a specific length, and if you need visitors to choose between several events, link them to your Calendly page instead of embedding one.- A mismatch between **Time** here and the event length in Calendly gives you the wrong event or an empty embed - the address is built from this value, and Calendly has to have a matching event.- The calendar is Calendly's, inside Calendly's iframe. Beyond the three colours, your site's CSS does not reach it.- We verified the embed the widget builds and that Calendly's script turned it into a live iframe. We did not complete a booking, because that needs a real Calendly account.

## Troubleshooting

### The page is blank where the calendar should be

**User Name** is empty. With nothing in it the widget prints no markup, so there is nothing for Calendly's script to fill.

### A different meeting length appears than the one I chose

Either **Time** does not match an event in your Calendly account, or you chose **All**, which quietly loads the 15-minute event.

### The calendar is cut off at the bottom

Raise **Height**. It goes up to 1000px in steps of 10.

### The white block clashes with my page

Set **Background** in the **Style** tab. Calendly, not your theme, applies it.

## Related Docs

- [Meeting Scheduler Widget Settings Overview](https://theplusaddons.com/docs/meeting-scheduler-widget-settings-overview/)- [How to embed Freebusy in Elementor?](https://theplusaddons.com/docs/embed-freebusy-elementor/)- [How to embed Vyte in Elementor?](https://theplusaddons.com/docs/embed-vyte-elementor/)

## Frequently Asked Questions

**Q: What do I need before embedding Calendly in Elementor?**
A: The setup is lightweight: Elementor free must be installed and active, and the Meeting Scheduler widget in The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH has to be enabled under The Plus Addons > Widgets. You also need a Calendly account with at least one event, because the embed points at an event and an empty account has nothing to display. That matters because the widget loads Calendly’s own embed script, not a separate Calendly plugin.

**Q: Why is the calendar blank on my page?**
A: An empty User Name field is the usual cause. When that field is blank, the widget outputs no markup at all, so Calendly’s script has nothing to replace with a live calendar. The fix is to use the part of your booking link after calendly.com/ from your Calendly My Link screen. That value is what the embed address is built from.

**Q: How do I stop the wrong meeting length from showing?**
A: The Time value has to match an event length that actually exists in your Calendly account. The widget only offers 15 Minutes, 30 Minutes, and 60 Minutes, and a mismatch can produce the wrong event or an empty embed. One gotcha from the page: choosing All does not list every event type, it falls back to the 15-minute event.

**Q: Can I embed a specific Calendly event instead of my whole booking page?**
A: The Meeting Scheduler widget embeds a single Calendly event, not a menu of all events. That makes it useful when you want visitors to land on one booking option and confirm immediately inside the page. If you need people to choose between several events, the page recommends linking them to your Calendly page instead of embedding one event.

**Q: Why does the calendar get cut off at the bottom?**
A: The embed height is too short. Height controls how tall the embedded calendar is in pixels, and the page says 650px may not be enough room for some layouts. Raising it can help because the setting goes up to 1000px in steps of 10. This is about the iframe size itself, so more height usually fixes clipped content.

**Q: How do I match the embedded calendar colors to my site?**
A: The Style tab gives you three color controls: Text, Link, and Background. Those values are passed to Calendly as part of the embed address, then painted inside Calendly’s own iframe. Background is especially useful when Calendly’s default white block clashes with a dark page. Since your site CSS does not reach inside the iframe, these are the only colors that matter here.