joeyv22

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

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

Edit: Going back through the site it also seems that apostrophes “‘” cause these characters “Ka€” to appear instead. And noticed the Title and Tagline were missing from Customizer.

To be fair, I can’t say if all of these are Elementor related, though the text issues may be, as per the TinyMCE fix in 1.63.

Appreciate the prompt reply. I will play with the calculation field as you suggest. Perhaps consider this as a feature request. Thanks again Josh.

Thanks Boaz, you’re quite correct. As soon as I added content, the styling changes for the Column worked just fine.

And if I wanted a particular Section background to be “Boxed” along with the content, can it readily be done using CSS?

Thanks again for your prompt assistance.

– Joe