Need to add custom JavaScript in Elementor but not sure which method fits your setup? Elementor gives you a visual builder, but JavaScript gives you the behavior layer on top of it: scroll-triggered animations, third-party embed scripts, button click tracking, conditional triggers, and more. None of that ships as a drag-and-drop widget.
Whether you need to add custom JavaScript in Elementor on a single page or across your entire site, there are three methods available, each suited to a different level of technical comfort. This guide covers all three with step-by-step instructions and real code examples so you can pick the right one for your situation.
All methods in this guide were verified on WordPress 6.9.4 with Elementor v4.0.3 in April 2026.
What Is Custom JavaScript in Elementor?
Custom JavaScript in Elementor is JavaScript code you add to a page or your entire site to extend what the visual builder can do natively. It runs in the visitor’s browser and can manipulate page elements, respond to user actions, connect to third-party services, and trigger behaviors that no Elementor widget provides out of the box.
JavaScript is a client-side scripting language that executes in the visitor’s browser, not on the server. That makes it ideal for DOM manipulation, event listeners, API calls, and analytics tracking without adding load to your server. According to W3Techs (April 2026), JavaScript is used by 98.9% of all websites, making it the universal standard for web interactivity.
Why Add Custom JavaScript to Your Elementor Site?
- Add interactivity Elementor does not ship with: custom scroll effects, hover states, dynamic content changes, or click-triggered behaviors.
- Track specific user actions: button clicks, form interactions, time-on-page events, without complex tag manager setups.
- Integrate third-party tools: chat widgets, Calendly embeds, heatmap scripts, or A/B testing tools, by injecting their JS snippets directly.
- Target individual pages: run JS on one specific page instead of loading it site-wide, keeping other pages faster.
- Conditionally control page elements: for example, you can use JS to hide the Elementor page title on specific pages.
3 Ways to Add Custom JavaScript in Elementor at a Glance
Here is a quick comparison of all three methods before walking through each one:
| Method | Cost | Scope | Coding Required | Best For |
|---|---|---|---|---|
| 1. Elementor HTML Widget | Free | Single section or page | Minimal | Quick one-off scripts, embeds |
| 2. Theme’s functions.php | Free | Site-wide or per-page | Yes (PHP) | Developers comfortable with PHP |
| 3. Elementor Custom Code | Elementor Pro | Site-wide or per-page | Minimal | Elementor Pro users wanting native control |
How to Add Custom JavaScript in Elementor Using the HTML Widget (Free)
The Elementor HTML widget is the fastest way to add a JavaScript snippet to a specific section or page without installing anything extra. You drop the widget where you want the script to execute, paste your code inside script tags, and save. This works on Elementor Free, no Elementor Pro required.
- Open the page you want to edit and click Edit with Elementor.
- In the widget panel, search for HTML and drag the HTML widget onto the section of the page where you want the script to run.
- Click the Edit button on the HTML widget to open its code editor.
- Paste your JavaScript wrapped in
<script>tags:
<script>
document.addEventListener('DOMContentLoaded', function () {
// Your JavaScript code here
console.log('Custom JS loaded on this section');
});
</script>- Click Update to save. Preview the page to confirm the script fires as expected.
In our testing on WordPress 6.9.4 with Elementor v4.0.3, the HTML Widget method works reliably for both page-specific and section-level scripts without any conflicts with Elementor’s own JavaScript queue.
When to use this: Third-party embed codes (chatbots, booking widgets, maps), quick one-page scripts, or testing a snippet before adding it site-wide.
Limitation: If you need the same script on multiple pages, you have to add the widget to each page individually. For site-wide or multi-page JS, use one of the methods below.
Were you aware that certain hosting providers give special attention to Elementor users? Check the comparison of the 8 Best WordPress Hosting for Elementor.
How to Add Custom JavaScript in Elementor via functions.php (Free)
Adding JavaScript through your child theme’s functions.php file is the standard developer approach for site-wide or page-specific scripts. It uses WordPress’s native hook system to load scripts in the correct order, avoiding conflicts with Elementor’s own JS queue.
Always use a child theme. Editing a parent theme’s functions.php means your changes are overwritten on every theme update.
- In your WordPress dashboard, go to Appearance → Theme File Editor. Select your child theme’s functions.php from the right sidebar. Alternatively, download it via FTP or your host’s file manager and edit it in a code editor like VS Code.
- Add the following code to load a JavaScript snippet on a specific page. Replace
123with your actual page or post ID:
function tpae_custom_javascript() {
if ( is_page( 123 ) || is_single( 123 ) ) {
?>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
// Your JavaScript code here
console.log('Script loaded on page 123');
});
</script>
<?php
}
}
add_action( 'wp_footer', 'tpae_custom_javascript' );To find your page ID: go to Pages → All Pages in the WordPress dashboard, hover over the page title, and check the URL shown in your browser status bar. The ID appears as post=123.
- Save the file. If you used FTP, re-upload it to your server.
When to use this: You have PHP experience, want no additional plugins, and need fine-grained control over when and where the script loads.
Important: Back up functions.php before editing. Any PHP syntax error will take your site offline. Always test changes on a staging site first.
How to Add Custom JavaScript Using Elementor Custom Code (Elementor Pro)
Elementor Pro includes a built-in Custom Code feature that lets you inject JavaScript (along with HTML and CSS) directly from the WordPress admin, no separate plugin or theme file editing needed. You can scope scripts to specific pages using Elementor’s standard display conditions system, the same one used for Theme Builder templates.
Note: Custom Code in Elementor Pro supports HTML, JavaScript, and CSS only. PHP snippets are not supported.
- In your WordPress dashboard, go to Elementor → Editor → Custom Elements.
- Click Code, then New Code.
- Give your snippet a name and paste your JavaScript code into the editor. Wrap it in
<script>tags. - Set the Location to one of three options:
- < head>, loads before page content (use for scripts that must run early)
- < body> – Start, loads at the beginning of the body
- < body> – End, loads after all page content (recommended for most JavaScript)
- In the Publish panel, click Edit under Conditions to set where this code runs: entire site, specific page types, or individual pages.
- Click Publish to activate the snippet.
When to use this: You are already on Elementor Pro and want to manage scripts inside the Elementor ecosystem with no additional plugin required.
Requirement: Elementor Pro is required. Custom Code is not available in Elementor Free.
Want to add custom CSS to your Elementor site as well? See all methods in our guide: How to Add Custom CSS in Elementor for Free [2026]
![20 checklist for wordpress site maintenance how to add custom javascript in elementor [3 methods] [2026] from the plus addons for elementor](https://theplusaddons.com/wp-content/uploads/2023/05/20-Checklist-for-WordPress-Site-Maintenance-1024x1024.jpg "20 Checklist for WordPress Site Maintenance | The Plus Addons for Elementor")
Do you Manage WordPress Websites? Download Our FREE E-Book of 20+ Checklist for WordPress Site Maintenance.
Check out the Complete List of 120+ Widgets and Extensions here. Start building your dream website without coding!
Which Method Should You Use to Add Custom JavaScript in Elementor?
The right method depends on your technical comfort level and what tools you already have installed.
| Your situation | Best method |
|---|---|
| Quick one-off script for a single section or page | HTML Widget (Method 1) |
| PHP developer, want no additional plugins | functions.php (Method 2) |
| Already on Elementor Pro, want native control with display conditions | Elementor Custom Code (Method 3) |
For most Elementor users starting out, the HTML Widget is the lowest-friction option. It requires nothing beyond what Elementor Free already provides and works on any page in minutes. As your needs grow to cover multiple pages or site-wide scripts, the functions.php method gives you maximum control without installing anything new, provided you are comfortable with PHP.
If you are on Elementor Pro, the Custom Code feature is the cleanest solution: script management with display conditions, a built-in linter, and no theme file risk, all inside the Elementor admin.
Building a complete Elementor site and looking for more widgets, builders, and design extras? The Plus Addons for Elementor extends Elementor with 120+ widgets and 8+ builders. You can explore the full feature set on the pricing page.
