External Scripts

External scripts let you add third-party code to your site—analytics, tracking pixels, chat widgets, and libraries—all managed in one place.

What are External Scripts?

External scripts are code loaded from URLs (CDNs, analytics providers, etc.) rather than code you write. Common examples:

Analytics: Google Analytics, Plausible, Fathom
Tracking: Facebook Pixel, LinkedIn Insight, Google Ads
Libraries: GSAP, Swiper, Lottie, jQuery
Widgets: Intercom, Crisp, Calendly
Fonts: Google Fonts, Adobe Fonts

Adding an External Script

Quick Add from Library Presets

The fastest way to add popular libraries:

Go to External Scripts

Open your site and click the External tab.

Click Add External Script

Click the Add button.

Browse the Library

Click Browse Library to see pre-configured popular libraries organized by category:

Animation: GSAP, ScrollTrigger, Anime.js, Lottie
Slider: Swiper, Splide, Flickity
Utility: jQuery, Lodash, Day.js
UI: Alpine.js, Tippy.js, SweetAlert2, Fancybox
Forms: Choices.js, Flatpickr, IMask
Scroll: Lenis, Locomotive Scroll, ScrollReveal
Media: Plyr, Video.js
Charts: Chart.js
Maps: Mapbox GL JS, Leaflet

Select library and version

Click a library to select it, then choose the version you want. Both JS and CSS files are listed where applicable.

Add

Click Add to include the library with recommended settings.

Library presets automatically detect version conflicts. If you try to add a library that’s already included, you’ll see a warning.

Manual URL Entry

For libraries not in the preset list:

Go to External Scripts

Open your site and click the External tab.

Click Add External Script

Click the Add button.

Enter the URL

Paste the script or stylesheet URL:

https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.0/gsap.min.js

Configure options

Set the type, position, and loading behavior.

Save

Click Save to add the external script.

URL Validation

When entering URLs manually, the system validates:

Valid URL format
http or https protocol (http shows a warning about mixed content)
File extension (.js, .css, or .mjs expected)

Configuration Options

Type

Script: JavaScript files (.js)
Stylesheet: CSS files (.css)

Position

Where the script loads in the HTML:

Head: Loads in <head>, before page content
Body End: Loads at end of <body>, after content

Libraries usually go in the Head so they’re available when your scripts run.Analytics/tracking usually go at Body End to not block page rendering.

Loading Attributes

Control how the script loads:

Attribute	Behavior
None	Blocks rendering until loaded
Defer	Loads in background, executes after HTML parsed
Async	Loads in background, executes immediately when ready

When to use Defer

Use for most scripts. They load without blocking and execute in order.

<script src="library.js" defer></script>

When to use Async

Use for independent scripts that don’t depend on other code (like analytics).

<script src="analytics.js" async></script>

When to use Neither

Rare. Only when a script must execute immediately and block rendering.

Scope

Global: Loads on every page
Page-specific: Loads only on selected pages

Component Selector

Only load when a specific element exists:

.chat-widget
[data-calendly]

Great for widgets that only appear on certain pages.

Common External Scripts

Google Analytics 4

https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX

Position: Head | Async: Yes

GSAP

https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.0/gsap.min.js

Position: Head | Defer: Yes

Swiper

https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js
https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css

Position: Head | Defer: Yes (for JS)

Lottie

https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.0/lottie.min.js

Position: Head | Defer: Yes

Font Awesome

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css

Type: Stylesheet | Position: Head

Managing External Scripts

Enable / Disable

Toggle external scripts on or off without removing them. Useful for:

Temporarily disabling tracking during development
A/B testing different libraries
Debugging conflicts

Ordering

External scripts load in the order shown. Drag to reorder if you need a library to load before another.

Editing

Click on any external script to modify its URL or settings.

Best Practices

Use CDNs for libraries

CDNs like cdnjs, jsDelivr, and unpkg are fast and reliable. They’re often already cached in visitors’ browsers.

Pin versions

Include version numbers in URLs to prevent unexpected updates:

✅ https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.0/gsap.min.js
❌ https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/gsap.min.js

Use defer for most scripts

Defer is the safest option—it doesn’t block rendering and maintains execution order.

Page-target tracking pixels

If a tracking pixel is only for conversions, load it only on the thank-you page.

Test after adding

New external scripts can conflict with existing code. Always test your site after adding one.