Calendly Elementor Integration: How to do it?

That is the commonality with these types of businesses, the fact that an interaction, a meeting needed to take place. And with meetings comes scheduling, an absolute hassle for both parties as it involved a back-and-forth either on a phone call or via emails suggesting time slots and asking for availability.
Share on facebook
Share on linkedin
Share on pinterest
Share on reddit

Remote work has been a trending practice for longer than you might think. Over the past five years, the number of people working remotely has increased by 44%. In the past 10 years, it’s increased by 90%. But the turning point that truly brought remote work into the mainstream was the coronavirus pandemic.

 

As social distancing became an increasingly necessary precaution, companies worldwide started to establish work-from-home policies and business that used to work face-to-face with people had to suddenly change and adapt to the circumstances. I’m talking therapists that were used to treating patients in their office, financial advisors who were used to having meetings one-on-one with their clients, consultants that needed the interaction for their presentations, among others.

 

That is the commonality with these types of businesses, the fact that an interaction, a meeting needed to take place. And with meetings comes scheduling, an absolute hassle for both parties as it involved a back-and-forth either on a phone call or via emails suggesting time slots and asking for availability.

 

This is where Calendly comes into play, and what you’re going to be reading today. Because this increase in remote work also means that having a website for your business is a no-brainer at this point and there you can integrate the booking engine that Calendly provides.

 

Now, what is Calendly?

Calendly is an online platform that allows businesses and individuals organize appointments and meetings. It is developed to help users easily set their preferences of availability and send a personalized invitation link to arrange the appointment or meeting.

 

From their website:

Calendly is easy to learn and use. You start by setting up your appointment calendar the way you want people to see it. You decide how long you want your meetings to be and block off any time slots you don’t want people to request. You also have the option to set up buffers between meetings so you don’t end up overscheduled.

People will see your availability when they click on your scheduling link. It’s easy to add the link to your website, social media pages and emails—anywhere people go to schedule appointments with you. This flexibility is important when you’re holding all of your meetings remotely.

 

Having it be user-friendly is nice and all, but does this mean that you have to share another link from another website to your audience on top of your own site?

 

Fortunately, no. Because Calendly has a lot of ways to integrate with your Elementor website. In this article, I’m going to write about Calendly’s own three options.

 

*If you don’t have a Calendly account, go there first and come back to the article later.

 

Recommended Reading: How To Design A Mobile Call To Action Button In Elementor

 

Calendly Elementor Integration Method 1: The Inline Embed

Ok, so the first thing you want do after creating your account and setting up your calendar is to click on the gear icon next to New Event Type to display the dropdown of options. There, you click on Add to Website.

 

 

You will see the popup with the three options. Click on Inline Embed, then continue.

 

how to integrate calendly with elementor

 

This will bring out this popup with the embed code.

 

 

All you need to do then is to drag and drop the HTML Elementor widget and copy and paste that code there. It will look something like this:

 

 

Calendly Elementor Integration Method 2: The Popup Widget

This one works more like those chat icons you see at the bottom right corner of a website. So, if you don’t have a chat widget, like an Intercom, Drift or even the Facebook Chat that may interfere with this button, feel free to use it. It looks like this:

 

Yes, that’s an image of a blank page. But do you see the button at the bottom right corner? That button will be fixed in that place regardless of the position the user has scrolled down or up to. And you can change the text, the background color of the button and the text color of the button. If you take a look at the embed code, there are three lines that say “text: ‘Schedule time with me'”, “color: ‘#00a2ff'”, and “textColor: ‘#ffffff'”. You can change those values to make the button look however you want it look.

 

You get this button by selecting Popup Widget from the Add to Website modal, then copying and pasting the embed code.

 

 

 

 

Calendly Elementor Integration Method 3: The Popup Text

This one is actually my favorite, because it can work like your regular Elementor button and you don’t have anything more to do after adding the embed code. On the Add to Website modal, select “Popup Text”.

 

 

 

Then, on any Elementor page or post you’re in, you repeat the step from the first method; drag and drop the HTML widget and copy and paste the embed code provided. In this particular method, you can also change the text that’s between the <a> HTML tag. As for the styling of the button, inside that same tag you can add a CSS class or id and then go nuts with it.

 

This method is the one I particularly use more with my clients because of that specific ease of styling.

 

These are the three methods for a seamless Calendly Elementor Integration and while other Elementor addons come with their own Calendly widget, the easiness of adding it to your site, makes installing another plugin a bit unnecessary (of course, that is if you’re only planning to use the addon for this reason only).

 

Final Words

The sentiment that went around the world (and I mean the entire globe) was that 2020 was a crappy year. The COVID-19 pandemic really turned everything on its head, affecting people’s health, jobs and pretty much everything in our lives. Not diminishing its magnitude by any means, the pandemic also came with opportunity. The remote work life was soon the norm with tools like Zoom, Teams and other platforms for online meetings helping us out.

 

While several consultants and other online meeting-based workers (real estate advisors, therapists, etc), were already doing this, a lot still are adjusting to this new way of doing work. Hopefully the information in this article has helped you out in properly setting up your booking calendar so that your business does not miss an appointment.

 

Let me know what you think and if you have any doubts or questions, shoot them up in the comments section. Good luck!

Join the templace newsletter

Every week, you will be receiving the greatest tips, design inspiration and all the goodies related to Elementor.

PREVIOUS AND NEXT POSTS

Do you want powerful hosting?

Kinsta’s hosting solution will give you an incredible loading time, bar none. With their amazing server infrastructure, attentive customer support and just great user experience all-around, hosting your website with Kinsta will be a delight.

  • home
  • Contact
  • Agency Plans

Want to learn about Elementor, web hosting, page speed optimization or web design? Click the button below to view all the articles!

Are you looking to redesign your website? build one from scratch? Or you just simply want to optimize it? Whatever your answer is to any of those questions, I can help you! Click the button below and fill up the form to contact me

Are you an agency owner overworked with web design clients? No need to worry about that anymore! Take a look at my agency plans for website design & development.
backgroundLayer 1

Home

The right clients, at the right price, anytime you want.

About

It takes 3 things for a program to create life-changing results.

Team

We have the skills you need to build a multi-million dollar business.

Contact

Helping coaches & thought-leaders all over the world.

You could use this for a mission statement or something else about your business that could really help people know more.

Navigation Menu

Newsletter (this is pretty important here!!)

Sign up to our newsletter

This guide is included in all template purchases, but you can get it here if that's what you only want