What This jQuery Script Does:
Uses the Calendly popup script and jQuery to trigger the Calendly popup from the standard Elementor button or any element with a link by adding a CSS class to that element.
Usage Examples:
Elementor Button
Icon Box
How To Implement:
- From your WordPress dashboard under Elementor > Custom Code add a new custom code, name it whatever you like, change location to <body> Start.
- Paste in the code below (in the code, replace ‘YOUR_SCHEDULING_LINK‘ with your link: e.g., https://calendly.com/stevethewebsiteguy/meeting-with-steve-the-website-guy )
- Then, go to your Elementor button or any element where you can set a link, set the link as #, then go to Advanced > CSS Classes and add bookcall as the css class.
The Code:
<!-- Calendly link widget begin --><linkhref="https://calendly.com/assets/external/widget.css"rel="stylesheet"><scriptsrc="https://calendly.com/assets/external/widget.js"type="text/javascript"></script>
<!-- Calendly link widget end -->
<!-- Trigger calendly popup from elementor button with class of .bookcall added --><script>jQuery( document ).ready( function( $ ) {$( document ).on( 'click', '.bookcall', function( event ) {event.preventDefault();Calendly.initPopupWidget({url:'YOUR_SCHEDULING_LINK'});} );} );</script>
