Elementor Tutorial

Calendly and Elementor

Follow the steps below to start integrating Calendly and Elementor. Calendly allows your website visitors, customers and coworkers to schedule meetings based on the availability of your calendar. 

Integrating Calendly & Elementor

Get Elementor help and support with the other trainings in the menu above or get in touch with specific questions.

Here’s how to embed Calendly with Elementor. If you already have an account you can follow along the videos steps or get a more detailed version via text below.

Advanced embed features will include popups, videos and combining Elementor’s widgets together to create a custom experience. Questions Welcome!

Step 1. Signup For Calendly

This part is a breeze and takes about 2 minutes (at the most). The fastest way will be to connect a gmail account, or other mail provider that connects with a calendar (Outlook, GSuite, iCloud, Office 365, etc.). For the purposes of this demo I am using the free plan and the calendar connected below does not notify me of events (do not expect a response).

Step 2. Find Your Calendly Link

Once you’ve signed up, navigate to the dashboard. By default this will be the screen you arrive upon after creating a password, etc. 

Click the dropdown in the account tab, next to your initials in the top right, and then click the button that says share your link.

calendly and elementor integration

Step 3. Copy Your Link

Once you’ve signed up, navigate to the dashboard. By default this will be the screen you arrive upon after creating a password, etc. 

Click the dropdown in the account tab, next to your initials in the top right, and then click the button that says share your link.

Option 1. Paste Into Button

Now, you’ve got a few different routes to go. Do you want Calendly to open in a new tab in your user’s browser or would you prefer to remain on your website? If you want to open in a new tab first create a button such as the orange one below, using Elementor’s Button Widget

Option 2. Embed To Site

If you want to embed Calendly to your site so that the users doesn’t stray away, choose the third option of sharing (from step 3 above). A new popup will appear asking how you would like to embed it. 

For now, we will choose Inline Embed.

(choose embed to website)

(then choose inline embed)

Option 2. Embed To Site Part 2.

Continued from the previous step, copy the code that appears (after clicking on ‘inline embed’ from the previous step). This code is generated in Calendly’s system. 

Copy Embed Code HTML

(paste into html embed code)

Option 2. Embed To Site Part 3.

Next, insert an HTML widget on your Elementor page. This will be the placement for the calendly embed code, it can always be changed later of course.

Paste the code you have just copied from Calendly into the HTML widget.

(paste into html embed code)

View Results: Shown Here

Assuming you did everything correctly, the inline embed code (residing within an HTML widget in Elementor) will render a Calendly widget on your site. 

Advanced users can also embed this into a popup upon a button click, mixing the best of both worlds. Feel free to get in touch with any questions about Elementor or WordPress and I’d be glad to chat.

Stuck With Elementor?

Get tailored help to your website and don’t waste money on agencies. Learn to build and manage your own site.

Get In Touch

Questions and Conversations

Submit Your Project Info

Questions, comments or feedback on anything you’ve seen here. I’ll get back to you as soon as possible.