Adding Dynamic Shortcode to Button (Calendly Popup) ** Solved **

[brother]

Hi all, I am trying to add shortcode to a button that will trigger a Calendly popup when clicked. On the Calendly site it says I need to add the following code:

onclick="Calendly.showPopupWidget('YOUR_SCHEDULING_LINK');return false;"

However, when I add this code to the shortcode of my button, it simply tries to go to a page on my site it thinks is called ".../onclick="Calendly etc...."

Does anyone know what I am doing wrong?

Thanks in advance, any advice is appreciated!

 

[Koni Kodes]

Did you place the shortcode inside square brackets?
Perhaps try this:
[onclick="Calendly.showPopupWidget('YOUR_SCHEDULING_LINK');return false;" ]

 

[brother]

Thanks Koni, just tried but it's still just inserting the command into the URL.

When I tried to insert the following into an HTML widget, it created a button and successfully opened the Calendly popup - the problem is I'm just not sure how to refer to my actual button, without creating a new one.

 

[brother]

Hey in case anybody is curious I found an answer on an Elementor help page. I pasted the following code in an HTML widget in my footer, replacing My_Button with my actual button's name:

<script>
document.addEventListener("DOMContentLoaded", function(event){
jQuery('#My_Button').click(function(){

// Calendly code here;

});
});
</script>

 

[Koni Kodes]

Awesome brother
Thank you for posting this solution.
Please update your original post with ** Solved ** in the title. This will help others see your solution.

 

[elementor_user_]

Hello @brother

I'm currently facing the same issue. I did what you said. But still when I click on the button, now it goes to the default /#. Could you say if the button ID is one you added through the advanced settings manually? I tried that way and it doesn't works for me

Would be really helpful.

Thank you!

 

[brother]

I selected the relevant button to access the "Edit Button" menu on the left pane - then selected the "Content" tab from the top of the menu - and then inputted the button name in the "Button ID" field, without a "#". Make sure the Button ID matches the "('#My_Button')" used in the above script.

 

[elementor_user_]

Thank you for replying so fast @brother.

I tried but still doesn't work, will show you a little more detail in case it helps:

1. I create a button and Give an ID

2. I add 2 scripts in an HTML widget in the Footer:

2.1 Widget from Calendly wich "generates the pop-up". (In an HTML box)

<!-- Calendly link widget begin -->
<link href="calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="calendly.com/assets/external/widget.js" type="text/javascript"></script>
<!-- Calendly link widget end -->

2.2 The script you provided + the 2nd script from Calendly (just after the previous code)

<script>
document.addEventListener("DOMContentLoaded", function(event){
jQuery('#boton').click(function(){

onclick="Calendly.showPopupWidget('calendlyurl');return false;"


});
});
</script>

Which makes my footer to have the following scripts inside the same HTML form:
<!-- Calendly link widget begin -->
<link href="calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="calendly.com/assets/external/widget.js" type="text/javascript"></script>
<!-- Calendly link widget end -->
<script>
document.addEventListener("DOMContentLoaded", function(event){
jQuery('#boton').click(function(){

onclick="Calendly.showPopupWidget('calendlyurl');return false;"


});
});
</script>

When I Save and Up date still goes to /#

PD:Some URL might be wrong, this is because im not authorised to post links yet..

Did you put all the calendly scripts on the footer or on the same place? Or do you see something in my proces?

Thank you so much for your help!

 

[brother]

I think the problem is your line "onclick="Calendly.showPopupWidget('calendlyurl');return false;"

Check the attached screenshot here - that line in my script is slightly different.

 

[elementor_user_]

That was it! It worked!

Thank you!!

 

[markaeaton]

Worked for me too, until I duplicated the one button that worked...now only the first instance of the button works. What do I need to do in order to have multiple instances of the same button on my page? All the buttons need to invoke the same Calendly popup. My goal is to create this button on all pages of the site, is there a more efficient method than adding an HTML code widget to every page?

Thanks so much, this forum is so helpful for us Elementor newbies

Cheers.

 

[markaeaton]

I love fixing my own mistakes, I don't like it when I don't read properly.

From the Button ID instructions - "Please make sure the ID is unique and not used elsewhere on the page this form is displayed". As I had duplicated the button, the IDs were all identical. :-(

Fixed, nothing to see here, move on....

 

[ngzs]

Hi!
I have more buttons with same class ID (.CID)
I use the following code with .Class instead of #ID. It works for more buttons in same class! But...
How do I get the clicked button ID in this code? I need use the current button ID, beacuse there are button + text pairs, that I must handle seperately.

this.id dosesn't work!

Thx

<script>
document.addEventListener("DOMContentLoaded", function(event){
jQuery('.CID').click(function(){

// I need the clicked button ID

});
});
</script>

 

[tkomgdotnet]

I think the problem is your line "onclick="Calendly.showPopupWidget('calendlyurl');return false;"

Check the attached screenshot here - that line in my script is slightly different.

View attachment 1289

I am pretty much trying to do the same thing, but keep hitting a road block. I used the same code and no dice. Could you tell me what i am doing wrong? i added the code below in custom html widget. dropped it in the footer. Now my only question is do i leave the url on the blank or with a #?