Premium Button OnClick – Calendly

Hi @joeyv22

Hope you’re doing well today ??

Well, I’m not sure if I totally got what you’re looking for, but could you please check our Premium Modal Box widget and let me know if you need to your calendar to be opened in a popup?

Regards

Hi Leap13.

Thank you for your reply.

What I am trying to do is use your Premium Button or Premium Image button with an external popup script from Calendly.

I apologize. It looks like the widget code I pasted was missing the most important piece of information, which is:

Schedule time with me

Is it possible to trigger this using one of those addons, and if so, what URL would go in the Link field, and what would be entered into the Onclick Event field?

Hope that clarifies things a bit. Thanks again.

Sorry, here it as code:

<!-- Calendly link widget begin -->
<link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript"></script>
<a href="" onclick="Calendly.initPopupWidget({url: 'https://calendly.com/kings-high-school/economics'});return false;">Schedule time with me</a>
<!-- Calendly link widget end -->

Hi @joeyv22,

Actually, there’s no direct way to open a popup using Premium Button widget, but you managed to create an Elementor section that contains your calendar, then you can simply use Premium Button or Modal Box widget to show that.

Here’s an article that shows up how you can open an Elementor popup using Premium Button widget.

Regards

Hi Leap13,

Thank you for your answer. Not the one I was hoping for but I appreciate your taking the time to reply. I will take a look at your suggestion.

Best wishes.

Hi Leap 13,

I tried what you suggested but it has the same problem as embedding the calendar directly on a page – a vertical scroll bar unless height is set to about 900 px.

After much research, I stumbled across a forum thread, and was able to make the Calendly popuo script work with your Premium Image Button.

First, the button needs a unique ID (Advanced > CSS ID). I used “my-booking-button” (without quotes or #). Any name is fine but must match exactly (case sensitive) to what is entered into the code below.

I pasted the following in as a footer script using the HFCM (or similar) plugin. An Elementor HTML widget in the footer is another option. Here is the code:

<!-- Calendly link widget begin -->
<link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event){
jQuery('#my-booking-button').click(function(){
Calendly.showPopupWidget('https://calendly.com/kings-high-school/economics');return false;
});
});
</script>
<!-- Calendly link widget end -->

Hope this helps anyone wanting to use a Calendly popup with an Elementor button. Note: Replace “kings-high-school/economics” with your unique Calendly link.

Hi @joeyv22,

I’m really so glad to hear that you managed to achieve that using our widget ??

Also, we need to thank you for posting the changes you made to do the trick.

By the way, it would be great if you could rate Premium Addons for Elementor through this link. This really would give us a huge push forward to make things better ???

Regards

Thank you @joeyv22 that was really helpful.

Thanks @joeyv22, this helped me as well ??