Run a Custom JavaScript Function From an Elementor Button

Elementor JavaScript July 24, 2026

Quick answer: To make an Elementor button run your own JavaScript — open a chat widget, fire a tracking event, trigger any function — give the button an ID in its Layout settings, then add a small script that listens for a click on that ID. No custom widget needed.

What this is for

Elementor buttons link to URLs. When you instead need a button to do something in JavaScript — open HubSpot chat, launch a popup, call a third-party widget’s API, push a dataLayer event — you attach a click listener to the button by its ID and call whatever function you need inside it.

Set it up

  1. Edit the button and set a CSS ID in the Layout tab (not Advanced) — for example myCustomButton.
  2. Find the function you want to run (for example window.HubSpotConversations.widget.open()).
  3. Add the script below to your site’s footer scripts, swapping in your ID and function.

The code

2- Now Find and Copy the function (The function that is required to run the script)
 E.g window.HubSpotConversations.widget.open()
3- Now go to plugins > Add wp code plugin > Header and footer script and in footer part add this script>
<script>document.querySelector('#myCustomButton').addEventListener('click', function() {
   window.HubSpotConversations.widget.open();
});</script>
document.getElementById('myCustomButton')
document.querySelector('#myCustomButton')

Where to add it

Add it in a footer scripts area — the free WPCode plugin’s header-and-footer feature, or your theme’s footer script box. Putting it in the footer means the button exists in the page by the time the listener attaches.

querySelector vs getElementById

Both work. document.querySelector('#myCustomButton') takes a CSS selector (note the #), while document.getElementById('myCustomButton') takes the bare ID (no #). Use whichever you find clearer — they select the same button.

How to verify and undo

Click the button on the front end and confirm your function runs (the chat opens, the event fires). If nothing happens, open the browser console: a “null is not an object” error means the ID on the button does not match the ID in the script. To remove it, delete the snippet.