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.
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.
(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.