- This topic has 3 replies, 2 voices, and was last updated 3 years, 2 months ago by Elvin.
-
AuthorPosts
-
January 13, 2021 at 4:02 pm #1617800Robyn
Wondering if anyone could explain to me step by step how to add an onclick event to a button using a class? I’ve looked up multiple resources and had one working in a fiddle, but it won’t work on my site. I’ve searched through the elementor support forum as well.
I am trying to launch a window with GorillaDesk. They gave me the following bits of code to use.
I have put the main function in a GP Element Hook – generate_after_footer:<script type=”text/javascript”>
var _gorilla=_gorilla||{};
_gorilla.account_id = “f874280b8f26bfc4aef09d227a023ca7”;
(
function()
{
var a=document.createElement(“script”);
a.type=”text/javascript”;
a.async=!0;
a.src=”https://app.gorilladesk.com/js/portal/portal.js”;var b=document.getElementsByTagName(“script”)[0];
b.parentNode.insertBefore(a,b)
}
)
();
</script>The call they gave me for a Book Now link is this:
Open BookingI can’t seem to use that link in the elementor link field, so went searching and seems I should use an onclick event in JS.
I want to create an onclick event on the elementor button using a CSS class.
I’ve added the class .toronto-book-now on the buttons I want to trigger.I tried using this code to do the onclick event – I tried it in Code Snippets and also in a GP Elements hook and neither works for me. Currently it is in the elements hook generate-after-footer
<script type=”text/javascript”>
$(“div”).click(function(){
$(‘.toronto-book-now’).onclick(GorillaDesk(‘showBooking’));
return false;
});
</script>I can’t get my head around what I’m supposed to fix or where it’s supposed to go.
https://trutechpestcontrol.ca homepage and https://trutechpestcontrol.ca/trutech-toronto/ pages have it enabled and I want the blue Toronto Book Now button in the header to trigger the Gorilla Desk window.
Thanks for any insights.
RobynJanuary 13, 2021 at 5:20 pm #1617830ElvinStaffCustomer SupportHi,
Contents or features within Elementor’s page builder are out of our scope, unfortunately.
It’s best to ask Elementor’s support on how best to implement this on their plugin’s widgets.
Although, if I remember it right, I believe Elementor Pro version has a custom attribute field for its elements. I believe this should allow you to add
onclick="GorillaDesk('showBooking')
so you only have to add in the script with the function indicated to the site. But I could be wrong about it having custom attributes.As for adding scripts, the best practice is hooking them to
wp_footer
instead ofgenerate_after_footer
.<script type=”text/javascript”>
$(“div”).click(function(){
$(‘.toronto-book-now’).onclick(GorillaDesk(‘showBooking’));
return false;
});
</script>Support for scripting is out of our scope but to help you out:
You’ll have to change the
$
s tojQuery
for it to work in WordPress.Alternatively, you can use pure and simple vanilla JS.
<script type="text/javascript"> var toronto_book_now_btn = document.querySelector('.toronto-book-now'); toronto_book_now_btn.addEventListener("click", function(){ GorillaDesk('showBooking'); }); </script>
Just make sure the querySelector indicated the correct class and check if the function
GorillaDesk();
exists and is w/o issues.January 14, 2021 at 8:55 am #1618775RobynThank you for the tips.
I’ve confirmed that Elementor does have custom attributes, but they do not support JS-based attributes. 🙁
Thanks for pointing me in the right direction to their documentation though. Very helpful.
https://elementor.com/help/custom-link-attributes/I added the JS you sent and it works perfectly. THANK YOU!!
January 14, 2021 at 5:54 pm #1619289ElvinStaffCustomer SupportNo problem. Glad you got it to work. 😀
-
AuthorPosts
- You must be logged in to reply to this topic.