3 Easy Ways to Add Scripts to Your Elementor Website

Sometimes you need to add custom JavaScript to your Elementor site, for animations, calculators, Google Analytics, Tag Manager, or other third-party tools.

The good news? It’s easier than you think. You don’t need to be a developer.

This guide covers three simple methods, from free options to Elementor Pro features.

Table of Contents

  1. When You Need to Add Scripts
  2. Method 1: Elementor HTML Widget (Free)
  3. Method 2: Elementor Pro Custom Code
  4. Method 3: WPCode Plugin (Free)

When You Need to Add Scripts to Elementor

JavaScript runs in the browser and adds interactive features that Elementor’s drag-and-drop builder doesn’t offer natively.

Common use cases:

  • Google Analytics, AdSense, or Tag Manager
  • Scroll-to-top buttons
  • Custom calculators or forms
  • Third-party libraries (animations, charts, etc.)
  • Custom tracking or event handlers

Now let’s get to the methods.

Method 1: Elementor HTML Widget (Free)

This method works with the free version of Elementor. It adds scripts to individual pages, not site-wide.

Step by step:

  1. Open your page in the Elementor editor.
  2. Drag the HTML widget onto your page.
  3. Add your JavaScript wrapped in <script> tags:
<script>
// Example: scroll to top button
let button = document.getElementById("back-to-top");

window.onscroll = function() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        button.style.display = "block";
    } else {
        button.style.display = "none";
    }
};

button.addEventListener("click", function() {
    window.scrollTo({ top: 0, behavior: "smooth" });
});
</script>
  1. Click Update and test on the front end.

Best for: Page-specific scripts (one-off features, custom buttons).

Limitation: The script only runs on pages where you add the widget.

Method 2: Elementor Pro Custom Code

If you have Elementor Pro, the Custom Code feature lets you add scripts site-wide, perfect for Google Analytics, tracking pixels, or global libraries.

Step by step:

  1. Go to Elementor → Custom Code in your WordPress dashboard.
  2. Click Add New.
  3. Give your code a title (e.g., “Google Analytics”).
  4. Paste your script (including <script> tags).
  5. Choose where to insert it:
    • <head> (for tracking codes, CSS)
    • <body> start
    • </body> end (recommended for most scripts)
  6. Set a priority (lower number = loads earlier).
  7. Set conditions (e.g., “Entire Site” or specific pages).
  8. Click Save.

Best for: Site-wide scripts, tracking codes, third-party libraries.

Pro tip: Place scripts in the footer (</body> end) whenever possible to avoid slowing down page load.

Method 3: WPCode Plugin (Free)

Don’t have Elementor Pro? WPCode (formerly “Insert Headers and Footers”) is a free plugin that adds header/footer scripts to your entire site.

Step by step:

  1. Install and activate WPCode (free from WordPress.org).
  2. Go to Code Snippets → Header & Footer.
  3. Paste your script into:
    • Header (for <head>)
    • Body (start of <body>)
    • Footer (recommended for most scripts)
  4. Click Save Changes.

Best for: Site-wide scripts without Elementor Pro.

Bonus: WPCode includes a library of pre-made snippets (Google Analytics, custom CSS, etc.).

Final Thoughts

Adding scripts to Elementor doesn’t require coding expertise. You have three solid options:

  • HTML widget for quick, page-specific features
  • Elementor Pro Custom Code for site-wide scripts (if you have Pro)
  • WPCode for site-wide scripts (free, works with any theme)

Start with the simplest method that fits your needs. Test on staging first. And always wrap your JavaScript in <script> tags.

Was this post helpful?
Buy us a coffee!