[Resolved] adding onclick event to elementor button

Home Forums Support [Resolved] adding onclick event to elementor button

Home Forums Support adding onclick event to elementor button

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1617800
    Robyn

    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&#8221;;

    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 Booking

    I 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.
    Robyn

    #1617830
    Elvin
    Staff
    Customer Support

    Hi,

    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 of generate_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 to jQuery 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.

    #1618775
    Robyn

    Thank 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!!

    #1619289
    Elvin
    Staff
    Customer Support

    No problem. Glad you got it to work. 😀

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.