By using Elementorforum.com’s services you agree to our Cookies Use and Data Transfer outside the EU.
We and our partners operate globally and use cookies, including for analytics, personalisation, ads and Newsletters.

  • Join the Best Unofficial Elementor Support forum

    Provide or get advice on everything Elementor and Wordpress, ask questions, gain confirmation or just become apart of a friendly, like minded community who love Wordpress and Elementor


    Join us!
elementor official

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

B

brother

New Member
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!
 
elementor official
Koni Kodes

Koni Kodes

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

brother

New Member
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.
 
elementor official
B

brother

New Member
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>
 
elementor official
Koni Kodes

Koni Kodes

Member
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 official
E

elementor_user_

New Member
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!
 
elementor official
B

brother

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

Screen Shot 2020-05-06 at 19.44.58.png
 
elementor official
E

elementor_user_

New Member
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
1588784417124.png


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)

1588784577921.png

<!-- 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!
 
elementor official
B

brother

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

Screen Shot 2020-05-06 at 22.26.54.png
 
elementor official
M

markaeaton

New Member
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.
 
elementor official
M

markaeaton

New Member
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....
 
elementor official
elementor official
Top