Script Manager

The Script Manager is where you load existing JavaScript files and CSS libraries on your site: an animation library from a CDN, a slider stylesheet, or a script WordPress already ships with, such as jQuery. Each file is an entry with its own settings, and Builderius prints the matching <script> or <link> tag for you.

Paid Feature

The Script Manager is available in Builderius Website, Professional and Studio. It is not included in Builderius Community (Free).

To write your own code, use the JavaScript editor →. Fonts have their own tab, the Font Manager →.

Opening the Script Manager

Open the Script Manager tab in the bottom panel of the builder, between JavaScript and Font Manager.

The Script Manager has six main parts:

1. Script Manager tab - opens the panel
2. Scope tabs - switch between Template (or Component) and Global
3. JavaScript / CSS switch - choose which kind of entry the list shows
4. Entry list - the entries in the active scope, with the New Script + button above
5. Settings form - everything about the selected entry
6. Activate - turns the entry on, with a dropdown for Duplicate and Delete

Adding a Script

1. Open the Script Manager tab
2. Pick the scope on the left: Template or Global
3. Leave the switch on JavaScript and click New Script +
4. Add a Title and, if you like, a Description
5. Paste the file URL under Add Script
6. Choose where and how it loads
7. Click Activate

A new entry starts inactive. It loads nothing until you activate it.

The entry above prints this tag:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js" async></script>

Adding a CSS Library

Set the switch to CSS and click New CSS Library +. The steps are the same, with fewer settings: a stylesheet has no placement or loading options.

<link rel="stylesheet" href="https://cdn.example.com/library/style.min.css">

Entry Settings

Title: Name of the entry in the list.

Description: A note for you and your team about what the file is for.

Add Script / Add Library: The file to load. Paste a URL, or turn on Registered to pick a script WordPress already knows.

Priority: Sets the order between entries. Default is 10. Smaller number loads earlier. If a plugin depends on GSAP, give GSAP 5 and the plugin 10.

Localize script: Copies a remote file to your own site. See Hosting Files on Your Site.

Where to insert? (JavaScript only)

• Header - top of the page, you can further configure how it loads
• Footer - bottom of the page, simple setup to load after page load

Loading options (JavaScript only, in the header)

• Default - blocking. Loads and runs instantly.
• Async - loads in parallel, runs when ready.
• Defer - loads in parallel, runs after the DOM has loaded.

Attributes: Extra attributes on the tag, as name and value pairs. Leave the value empty for an attribute without one, such as nomodule. Values are plain text; dynamic data is not supported here.

WordPress Scripts (Registered)

Builderius disables all non essential WordPress scripts and styles by default to keep pages light. This includes the block library styles, global styles, the emoji script and the embed script.

To bring one back, or to load any other script WordPress has registered:

1. Create an entry and turn on Registered
2. Search and pick the script from the list, for example jQuery
3. Click Activate

For a registered script you only decide where and how it loads. The file itself comes from WordPress.

note

Some WordPress scripts are registered to load in the footer. They stay there even with Header selected, and the panel tells you so.

Hosting Files on Your Site

Loading a file from a CDN sends every visitor's browser to that third party. To serve the file from your own site instead:

1. Paste the remote URL into the entry
2. Click Download file

Builderius copies the file into your uploads folder and points the entry at the local copy:

https://yoursite.com/wp-content/uploads/builderius/libraries/1a2b3c4d-gsap.min.js

Rules for the download:

• The URL must point to a .js file for a script, or a .css file for a CSS library
• The file can be up to 5 MB

CSS libraries

Downloading copies the stylesheet only. Fonts and images it references are still loaded from their original location.

Scopes and Load Order

The two vertical tabs on the left switch the scope. Which tabs you see depends on what you are editing:

• Editing a template or page: Template and Global
• Editing a component: Component and Global

An entry loads when its scope runs:

• Global entries load on every page
• Template entries load only on pages that use that template
• Component entries load only on pages where that component appears

So if a slider component needs a slider library, add the library in the component. It loads only on pages that actually show the slider.

When several scopes load on the same page, Builderius prints them in this order:

1. Global
2. Component
3. Template

Inside one scope, Priority decides the order.

Managing Entries

Activate / Deactivate: Turn an entry on or off without losing its settings. Inactive entries are greyed out in the list.

Duplicate: Creates a copy below the original. Find it in the dropdown next to Activate.

Rename: Right-click the entry and choose Rename.

Move to global / Move to template: Right-click the entry to move it to the other scope.

Delete: Removes the entry. Pages that rely on the library will stop loading it.

Best Practices

Scope it tightly: Add a library to the template or component that uses it. Keep Global for files every page needs.

Load late when you can: Use Footer, or Header with Defer, so scripts do not hold up the page.

Host important files yourself: A downloaded file keeps working if the CDN is slow or down, and no visitor data goes to a third party.

Pin the version: Use a URL with a version number in it, so an update on the CDN cannot change your site without you knowing.

Common Issues

• The file does not load: Check that the entry is activated, and that you are looking at a page in its scope
• Works in the builder, not on the live site: Changes go live only after you publish a release. Learn about the publishing workflow →
• Download fails: The message says why, for example that there is no file at that address, or that the URL does not point to a .js or .css file
• A script stays in the footer: WordPress registered it for the footer
• "This library is already in the list": A registered script can be added only once per list

When to Use the Script Manager

Use the Script Manager when you need:

• An existing library from a CDN or from your own site
• A WordPress script that Builderius disabled by default

Use the JavaScript editor when you need:

• Your own code, written and edited in the builder

Use the Font Manager when you need:

• Google Fonts or your own font files

Next steps:

• Write your own code in the JavaScript editor →
• Add fonts with the Font Manager →
• Learn about components →