How to Add Custom JavaScript to Any Elementor Page

While Elementor provides a robust set of design tools for WordPress, there are times when you need custom logic to achieve a specific functionality. Whether it's conditional redirects, custom animations, or complex form handling, adding custom JavaScript directly to a page is a vital skill.

In this tutorial, we will walk through how to add custom JavaScript to an Elementor page using the HTML element. We will demonstrate this by creating a conditional button that only performs an action when a specific checkbox is selected.

The Goal: Conditional Button Logic

For this example, we want to create a simple interaction:

1. A Checkbox: The user decides if they want to proceed.
2. A Button: When clicked, it checks the status of the checkbox.
3. The Logic: If the checkbox is checked, the button opens a URL (in this case, YouTube). If unchecked, the button does nothing.

Step 1: Assign CSS IDs to Elements

Before writing any code, we need to make sure our JavaScript can identify the elements on the page. We do this using CSS IDs.

1. The Checkbox: Select your checkbox element in Elementor, go to the Advanced tab, and set the CSS ID to box.
2. The Button: Select your button element, go to the Advanced tab, and set the CSS ID to but.

Note: You can name these whatever you like, but ensure your JavaScript code matches the IDs you choose.

Step 2: The HTML Widget

Many developers initially look for a specific "JavaScript" widget. In Elementor, the best way to add page-specific scripts is actually via the HTML element.

1. Search for HTML in the Elementor elements panel.
2. Drag the HTML widget onto the page (placing it at the bottom of the page is usually good practice).
3. Inside the HTML editor, you must open a standard script tag to begin writing JavaScript:

<script>
    // Your code will go here
</script>

Step 3: Writing the JavaScript

Now we will write the logic. We need to select our elements using standard DOM manipulation and add an event listener to the button.

Selecting the Elements

We use document.querySelector to grab our elements. Remember that since we are selecting by ID, we must include the hash symbol (#).

let checkBox = document.querySelector('#box');
let button = document.querySelector('#but');

Troubleshooting Tip: If you check your console and see null, you likely forgot the # in your selector.

Adding the Event Listener

Next, we attach a click event listener to the button. Inside this function, we write an if statement to check the status of the checkbox.

Here is the complete code block to drop into your HTML widget:

<script>
    // 1. Select the elements
    let checkBox = document.querySelector('#box');
    let button = document.querySelector('#but');

    // 2. Add the Event Listener
    button.addEventListener('click', function() {
        
        // 3. Check if the box is checked
        if (checkBox.checked) {
            // 4. Perform the action (Open URL)
            window.open('https://www.youtube.com');
        } else {
            // Do nothing if unchecked
            console.log('Checkbox is not checked.');
        }
    });
</script>

Conclusion

Once you have pasted the code into your HTML widget, click Update and view the live page.

When you click the button without the checkbox, nothing happens. Once you check the box and click again, the script executes and opens the link. This method allows you to add lightweight, page-specific JavaScript without the need for heavy plugins or modifying your theme's functions.php file.

If you found this guide helpful, be sure to subscribe for more web development tutorials. I also select one random subscriber every week for a free consultation on their WordPress or Shopify site, so stick around for the next update!