Skip to main content
Scoping decides where a script loads. The loader checks your scope rules in the browser, so each page only fetches the JS and CSS it actually needs. Open Scope & loading from the script editor to set all of this up on the page.

​
Scope

Every script has one of three scopes:
  • Global: loads on every page of the site.
  • Specific pages: loads only on the paths you list.
  • Components: loads only on pages that have an element matching a CSS selector.

​
Specific pages

Add exact paths (/about), or use a trailing wildcard to match a whole section:
matches every path under /blog/. Multiple entries are OR’d together, so the script loads if any one of them matches. If the site is connected to Webflow, Cairn lists the site’s pages so you can pick them instead of typing paths.

​
Components

Give a CSS selector and the script loads only when a matching element is on the page:
  • [data-video-player] (a data attribute)
  • .hero-slider (a class name)
  • #contact-form (an element ID)
This is the best fit for scripts that power a reusable Webflow component. Add the attribute to the component in Webflow, and the script follows it to whichever pages use it.

​
Load order

Choose where the script tag lands in the document:
  • Head
  • Body start
  • Body end

​
Execution timing

For JS scripts, choose when the code runs:
  • Auto-detect: Cairn looks at the code. If it touches the DOM, it waits for DOM ready.
  • Wait for DOM ready: always wait until the document is parsed.
  • Execute immediately: run as soon as the script loads.
Scripts delivered as ES modules are always deferred by the browser, no matter what load order or execution timing you pick. See ES modules.