add_action( 'wp_print_footer_scripts', function() {
?>
<script type="text/javascript">
var calendly_links = document.querySelectorAll( '.calendly' );
for( var i = 0; i < calendly_links.length; i ++ ) {
calendly_links[i].addEventListener( 'click', e => {
// Stop The Link
e.preventDefault();
// Load Calendly JS
var calendly_js = document.createElement( "script" );
calendly_js.setAttribute( "type", "text/javascript" );
calendly_js.setAttribute(
"src", "//assets.calendly.com/assets/external/widget.js"
);
calendly_js.onload = function() {
Calendly.showPopupWidget(
"https://calendly.com/websean/meeting"
);
};
document.head.appendChild( calendly_js );
// Load Calendly CSS
var calendly_css = document.createElement( "link" );
calendly_css.setAttribute( "rel", "stylesheet" );
calendly_css.setAttribute( "type", "text/css" );
calendly_css.setAttribute(
"href", "//assets.calendly.com/assets/external/widget.css"
);
document.head.appendChild( calendly_css );
} );
}
</script>
<?php
} );
Calendly modal on all hyperlinks with a class
Calendly modal – turns all links with `calendly` class into their modal window.
How to use
- Log into a staging, development, or locally hosted clone of your site
- Install and activate Code Snippets
- WP Admin > Snippets > Add New
- Copy and paste the code from the Description tab above
- Check to ensure formatting came over properly and no syntax errors show up in the editor
- Customize the code as desired
- Add a meaningful title
- Select whether to run on front-end or back-end (or both)
- Click “Save and Activate”
- Test your site to ensure it works
- Disable if any problems, or recover
- Repeat for live environment
License
All code snippets are licensed GPLv2 (or later) matching WordPress licensing.
Disclaimer of warranty:
Except when otherwise stated in writing the copyright holders and/or other parties provide the program as-is without warranty of any kind, either expressed or implied, including, but not limited to, the implied warranties of merchantability and fitness for a particular purpose.
Support
- Describe the issue and what you’ve observed.
- Describe your expected outcome(s).
- List steps to reproduce the issue.
- Optionally provide screen-shot or video URLs.
