Elementor gives you a visual way to build pages, but sometimes you need behavior it does not offer out of the box: a scroll-triggered animation, a third-party embed script, click tracking, a countdown that talks to an external API. That behavior layer is JavaScript, and Elementor does not have a drag-and-drop “custom JavaScript” widget. The good news is there are several clean ways to add it, and the right one depends on whether the script runs on one page or across the whole site, and whether you are on free or Pro Elementor.
This guide walks through four reliable methods to add custom JavaScript in Elementor, when to use each, whether it still works in Elementor V4 (Atomic), and the errors that trip people up.
What custom JavaScript in Elementor actually is
Custom JavaScript is any script you write or paste in yourself, rather than something a widget generates. Elementor handles layout and styling; JavaScript handles behavior, the things that happen in response to a scroll, a click, a timer, or data from another service. Common cases include analytics and conversion snippets, chat and support widgets, third-party embeds, and small interactive touches that no widget covers.
The key question before you add any of it is scope. Does the script need to run on a single page, or everywhere on the site? That one answer points you to the right method, because some methods are page-level and some are site-wide.
The four methods at a glance
| Method | Scope | Best for | Needs |
|---|---|---|---|
| HTML widget | One page or section | A script that runs in one place | Free Elementor |
| functions.php or a code plugin | Site-wide | Global scripts, developer control | Free, code comfort |
| Elementor Custom Code | Site-wide, with rules | Global scripts with location control | Elementor Pro |
| The Plus Addons Custom Code | Site-wide, header or footer | Global snippets without editing files | The Plus Addons |
Method 1: The HTML widget (free, page-level)
The simplest way to add a script to a single page is Elementor’s free HTML widget. Drag the HTML widget into your layout where you want the script to load, then paste your code wrapped in script tags. It runs only on that page, which makes it perfect for a one-off embed or an animation that belongs to a specific section.
<script>
document.addEventListener('DOMContentLoaded', function () {
// your code runs after the page elements exist
console.log('Custom script loaded');
});
</script>
The trade-off is that it is page-level only. If you paste the same script into ten pages, you now maintain it in ten places. For anything that belongs across the site, use one of the site-wide methods below.
Method 2: functions.php or a code snippets plugin (free, site-wide)
To load a script across the whole site, you can enqueue it properly through your theme’s functions.php file. This is the developer-preferred route because it uses WordPress the way it is meant to be used, with wp_enqueue_script, and it keeps your JavaScript out of the page content. Always use a child theme so an update does not wipe your changes.
function my_custom_scripts() {
wp_enqueue_script(
'my-custom-js',
get_stylesheet_directory_uri() . '/js/custom.js',
array( 'jquery' ),
'1.0',
true // load in the footer
);
}
add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );
If editing theme files makes you nervous, a code snippets plugin gives you the same site-wide reach with a safer interface and an easy on/off switch. Either way, keep your snippets small and documented so the next person, including future you, knows what each one does.
Method 3: Elementor Custom Code (Elementor Pro)
Elementor Pro includes a Custom Code feature that lets you add scripts from the WordPress dashboard and set exactly where and when they load, in the header, before the closing body tag, or on specific pages by display condition. It is the most controlled option if you are already on Pro, because you manage all your global scripts in one place with rules attached.
The catch is simply that it requires Elementor Pro. If you are on the free version, the other three methods cover the same ground.
Method 4: The Plus Addons Custom Code (site-wide, no file editing)
The Plus Addons for Elementor includes a Custom Code option that injects your JavaScript site-wide, into the header or footer, without touching theme files. Because The Plus Addons works independently of Elementor Pro, this route is available whether you run free or Pro Elementor. You add the script once in the plugin’s settings and it loads across the site, which suits analytics snippets, chat widgets, and other global behaviors.
Think of it as the middle ground: the site-wide reach of the functions.php method, without opening a code file. For a script that should only run on one page, the HTML widget approach is still the cleaner fit, just as it is for page-level custom CSS.
Does custom JavaScript work in Elementor V4 (Atomic)?
Yes. Elementor’s V4 Atomic engine changes how styling and elements are structured, but it does not change how JavaScript loads. The HTML widget still runs page-level scripts, functions.php still enqueues site-wide, and both the Elementor Pro and The Plus Addons custom code options still inject where you tell them to. If you are weighing the move, our take on whether Elementor is ready for WordPress 7 covers the wider picture.
Common errors when adding custom JavaScript (and how to fix them)
- The script does nothing. Most often the code runs before the element exists. Load it in the footer, or wrap it so it fires after the DOM is ready.
- It works in the editor but not on the live page. Caching is the usual culprit. Clear your Elementor and site cache and test again in a private window.
- jQuery is not defined. WordPress loads jQuery in no-conflict mode. Use jQuery instead of the dollar sign, or wrap your code so the dollar sign is scoped correctly.
- The site breaks after editing functions.php. A stray character can take the whole site down. This is why a child theme and a way to recover from a broken change matter.
- It slows the page down. Heavy or blocking scripts hurt performance. Load third-party code in the footer and keep an eye on your Core Web Vitals.
Which method should you use?
Match the method to the scope. For a script on one page, the HTML widget is the fastest and needs nothing but free Elementor. For a site-wide script and you are comfortable with code, functions.php or a snippets plugin is the clean, native route. If you are on Elementor Pro, its Custom Code feature gives you the most control with display rules. And if you want site-wide scripts without editing files, The Plus Addons Custom Code option covers that on free or Pro Elementor. Pick the smallest tool that solves your case, and keep every snippet documented.
