---
title: "How to Add Custom JavaScript in Elementor [3 Methods] [2026]"
url: https://theplusaddons.com/blog/add-custom-javascript-in-elementor/
date: 2023-08-23
modified: 2026-05-25
author: "Aditya Sharma"
description: "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..."
image: https://theplusaddons.com/wp-content/uploads/2023/08/How-to-Add-Custom-JavaScript-in-Elementor-1024x536.png
word_count: 1409
---

# How to Add Custom JavaScript in Elementor [3 Methods] [2026]

## Key Takeaways

- Elementor allows users to add custom JavaScript for enhanced interactivity and performance optimization.
- JavaScript is a high-level programming language used for creating dynamic and interactive web pages.
- Custom JS scripts can improve user experience by adding features like animations and pop-ups on Elementor websites.
- Two methods for adding custom JavaScript in Elementor include using the HTML widget and modifying the theme's functions.php file.

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.

Table Of Contents

## 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)](https://w3techs.com/technologies/details/cp-javascript), 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?

![Benefits of adding custom JavaScript in Elementor](https://theplusaddons.com/wp-content/uploads/2023/08/Benefits-of-Adding-Custom-JS-Script-in-Elementor-683x1024.png)

- **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](https://theplusaddons.com/blog/how-to-hide-page-title-in-elementor/) 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.

![Drag Elementor HTML widget into container to add custom JavaScript](https://theplusaddons.com/wp-content/uploads/2023/08/Drag-HTML-Widget-into-Container-1024x325.png)

- 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**](https://theplusaddons.com/blog/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 `123` with your actual page or post ID:

![Add custom JavaScript in Elementor using functions.php code snippet](https://theplusaddons.com/wp-content/uploads/2023/08/code-1024x554.jpg)

`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.

If the script does not load properly on the front end, first confirm that the code has been placed inside the correct <script> tags and inserted in the appropriate location (<head> or <body>). If everything appears correct, then [validate JavaScript code](https://www.minifier.org/javascript-validator) to identify syntax mistakes, broken references, or other common errors.

**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]**](https://theplusaddons.com/blog/add-custom-css-in-elementor/)*

![](https://theplusaddons.com/wp-content/uploads/2023/05/20-Checklist-for-WordPress-Site-Maintenance-1024x1024.jpg)

##### Do you Manage WordPress Websites?
Download Our FREE E-Book of 20+ Checklist for WordPress Site Maintenance.
​

[contact-form-7]

Field LabelSend Me the eBook

Check out the [**Complete List of 120+ Widgets and Extensions**](https://theplusaddons.com/elementor-widgets/) 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](https://theplusaddons.com/elementor-widget/) extends Elementor with 120+ widgets and 8+ builders. You can explore the full feature set on the [pricing page](https://theplusaddons.com/pricing/).