Open Calendly Popup on Click in WordPress using Elementor

Sometimes when you don't want to embed the Calendly scheduler directly on the website but, you want to add a button which when clicked will open the calendar.
In this video, I am showing you how you can add such a button.
CSS to edit the button style
.sch_appt {
color: #fff;
background: #000;
padding: 10px;
}
#calendly #wordpress #calendlypopup

[@janicehamrick]

Wow! Exactly what I needed and I would never have figured it out on my own. THANK YOU! BTW...if you have a theme, it might be overruling the CSS. I had to add !Important to the color and background to get the look I wanted.

[@MsEgyptianBeauty]

Thank you sir. Saved me a lot of time!

[@juliechang.english]

Extremely helpful, thanks so much!!

[@PrathameshSakhadeo7]

Glad you liked it :)

[@OneWord1]

fantastic thank you!

[@maxherber5351]

You are the best brother

[@PrathameshSakhadeo7]

Thanks :)

[@UpperValleyWeb]

Thank you. I was stuck once the link was embed and it didn't match the rest of my page. I've done basic coding in other platforms but I didn't know the mechanics of how to edit the CSS for this link. It seems like there should be a way to use a button widget in Elementor and make it trigger the popup, but short of coming up with some custom Javascript for it, it seems this is an easier work around.

[@stevenplyler6768]

Thank you, most of details were easy to follow - except at the time you instruct viewer to add HTML. Instead of allowing me to go to advanced and add the code, I get a window to upgrade "Meet Our Custom CSS".

[@laurarivero3328]

I only have Custom JS, since I have the free version. Is there another code to use?

[@laurarivero3328]

any help please?

[@kerim4973]

Hello, could you help me put this button in the center? margin: 0; neither auto works for me. Thank you so much!!

[@PrathameshSakhadeo7]

You can add following css to the anchor tag display: block; margin: 0 auto;

[@killqar6001]

how do you center it? please

[@forexfoxmedia4727]

Same question I was about asking

[@ohb1512]

Hi, I am struggling to embed our calendly link into a elementor button, can you advise please?

[@PrathameshSakhadeo7]

Hi. Where exactly you are facing the problem?

[@ohb1512]

Prathamesh Sakhadeo on www.whitelabelstudio.co.uk our book a demo button point out to a new page not embedded

[@vinulakasthuriarachchi1479]

How do I align this button to the center? And also make it mobile responsive?

[@buddytech01]

display: flex;
align-items: center; //for vertical
justify-content: center; // for horizontal

[@Martilyo73]

What if you want to use a pre-existing button or image? How do you make that button or image launch the popup?

[@PrathameshSakhadeo7]

You can add your image tag in place of text Let's talk so that your image will become a button to open the popup

[@ibdaaforscienceeducation948]

@@PrathameshSakhadeo7 thank you for the video, i have a pre-existing button ... i don't understand how to make that button launch the popup? ... can you please explain, thanks

[@PrathameshSakhadeo7]

​@@ibdaaforscienceeducation948 There are few more steps involved.
First of all you need to given the button some id.
Then remove this line from the code you get from Calendly. Schedule time with me
Keep these lines in the code. Do not remove them
Then add following code in another HTML block. Make sure you add this HTML block at the end of the page.
document.getElementById('open').addEventListener('click', function() {
Calendly.initPopupWidget({url: 'your-link'});return false;
});
wherever it says your-link in above code, you will see you get that from Calendly code itself. Do let me know if this works.

[@ibdaaforscienceeducation948]

@@PrathameshSakhadeo7 thank you so much ... i gave the button an id "boutoncalendly" ... where should i use that in the code ??

[@PrathameshSakhadeo7]

@@ibdaaforscienceeducation948 document.getElementById('open') in this line replace open with your id

[@big1ne]

Thank you but this must only work for paying users. There is no embed on free subcription

[@PrathameshSakhadeo7]

The interface has changed a bit. Go through this video th-cam.com/video/sJVEIpWqAzU/w-d-xo.html

[@big1ne]

@@PrathameshSakhadeo7 Thank you very much