Trigger JS code snippet on button click

Hi @jassyjas,

Am I correct in understanding that you want the snippet to do something when the link is clicked on? What sort of thing should it do?

Hi! NO… I have the html link working fine.
I’d like the same thing to happen when I click a button. I can’t use the html code in my button.
Hope that makes sense?
I was advised to create a code snippet which would trigger the same function onclick.
The JS code snippet is already in my Code snippets.
I can send a ‘loom’ recording if I’m not explaining it well enough.
Thank you

If you give the button an ID:

<button id="book_online_button">Book Online</button>

You should be able to register an event listener with JavaScript

document.getElementById('book_online_button').addEventListener( 'click', function () {
	// do your JS code here
} );

thank you… I’m trying to follow your instructions but clearly I have something wrong. Can you tell me what I what’s wrong as I get errors
https://loom.com/i/642f326840b648acbce8931ddbf02d3f

`document.getElementById(‘book_button’).addEventListener(“click”, function () {add_action( ‘wp_head’, function () { ?>
<script type=’text/javascript’>!function(b,c){b.saloniqid=’ac589142-60bc-4acd-acdd-fccf491bf729′,b.saloniqsite=’https://bookings.saloniq.co.uk&#8217;;var d,g,e=’onlinebookingwidget-loader’,f=c.getElementsByTagName(‘script’)[0];c.getElementById(e)||(d=c.createElement(‘script’),d.id=e,d.async=!0,d.src=b.saloniqsite+’/scripts/onlinebookingwidget-loader.js?d=’+Date.now(),g=f?f.parentNode:c.getElementsByTagName(‘head’)[0],g.insertBefore(d,f))}(window,document);</script> ?php});

There’s a problem with how you’ve mixed the PHP and JS code. Here’s a better way to do that:

add_action( 'wp_head', function () { ?>
<script type='text/javascript'>
!function(b,c){b.saloniqid='ac589142-60bc-4acd-acdd-fccf491bf729',b.saloniqsite='https://bookings.saloniq.co.uk';var d,g,e='onlinebookingwidget-loader',f=c.getElementsByTagName('script')[0];c.getElementById(e)||(d=c.createElement('script'),d.id=e,d.async=!0,d.src=b.saloniqsite+'/scripts/onlinebookingwidget-loader.javascripts?d='+Date.now(),g=f?f.parentNode:c.getElementsByTagName('head')[0],g.insertBefore(d,f))}(window,document);

document.getElementById( 'book_button' ).addEventListener( 'click', function () {
	window.saloniq.loader.openIFrame();
} );

</script>
<?php } );

Thank again… I’ve used that as a code snippet without error. I have placed a TEST button in my header here:

https://staging.creationshairandbeauty.com/contact-us/

Clearly the button widget on my page (the big white one) has no link url included as I want the code snippet to run when I click the button. But nothing is happening.. What should I put in expected link URL field for the button? a # or something else?

Thanks again… Super happy to donate to your plugin when this is working.

@bungeshea any further help you can provide here would be really appreciated. Thank you

Hi Shea – are you able to help me any further with this or point me in the right direction? Thank you

It looks like you’re using a link that looks like a button, instead of an actual <button> element. As this is the case, you should just be able to set the link URL to this instead of using the snippet I suggested above:

javascript:window.saloniq.loader.openIFrame();

Oh no, that’s where I started. I know I have a the link working and looking like a button… But I WANT an actual button to work and that’s what I’m asking for help with. Sorry if I was not clear.
It’s this big white button (screenshot – https://loom.com/i/75611d8b5dbf4cd68c6bd5dbe096ffd3) not the one above…. on this page
https://staging.creationshairandbeauty.com/contact-us/

This is where the button ID is set
https://loom.com/i/af16208d486f4d30b0126da37d2e99ea

This my snippet as per your help above
https://loom.com/i/836456041354463da379b6bb0aa2eef5

But it doesn’t work ??

Thanks again

The big white button is definitely a link! If you paste this line in the Link field in the settings in your second screenshot, it should work:

javascript:window.saloniq.loader.openIFrame();

I’m literally feeling so stupid… But hoping I am just being stupid. I’ve done what you’ve suggested but still no luck. Here;s a super quick loom to show you.

I appreciate I’m asking a lot from your support. THANK YOU

Hmm, it doesn’t look like Elementor is displaying the link correctly. If we instead return to the original idea of using a code snippet to make the button work, then you might have more luck with this one:

add_action( 'wp_head', function () { ?>
<script type='text/javascript'>
!function(b,c){b.saloniqid='ac589142-60bc-4acd-acdd-fccf491bf729',b.saloniqsite='https://bookings.saloniq.co.uk';var d,g,e='onlinebookingwidget-loader',f=c.getElementsByTagName('script')[0];c.getElementById(e)||(d=c.createElement('script'),d.id=e,d.async=!0,d.src=b.saloniqsite+'/scripts/onlinebookingwidget-loader.javascripts?d='+Date.now(),g=f?f.parentNode:c.getElementsByTagName('head')[0],g.insertBefore(d,f))}(window,document);
</script>
<?php } );

add_action( 'wp_footer', function () { ?>
<script>
document.getElementById( 'book_button' ).addEventListener( 'click', function () {
	window.saloniq.loader.openIFrame();
} );
</script>
<?php } );

In the Elementor settings, you will want to set the Link URL value to # to make sure that it stays on the same page.

It works it works it works.
Thank you so much…

Why did the addition of the add_action wp_footer make the difference do you know?

Anyway – Amazing!

Glad to hear it’s working!

The JavaScript code was running in the page <head> section, before the rest of the page had been fully loaded, so it was trying to link into a button element that did not exist yet.