Reform Digital®

ScriptEmbed™

Dynamic component script loader for Webflow.

Overview

ScriptEmbed™ lets you load custom component scripts on your Webflow page by adding a single embed. It reads the component URL and name from the script tag's attributes, then adds the component script to the page — but only if it hasn't already been loaded. This helps avoid loading the same script multiple times when using the same component more than once.

Features

  • Prevents duplicate loading — Automatically checks if a component has already been loaded

  • Simple setup — Add a single script embed to your Webflow project

  • Flexible loading — Supports both external script URLs and inline template content

  • Zero dependencies — Lightweight and fast-loading

  • Webflow-friendly — Works seamlessly with Webflow's embed system

Quick Start

Option A: Self-Contained Embeds (Recommended for Webflow)

Each embed includes everything it needs — just copy/paste wherever you need a component:

<script 
  src="https://cdn.jsdelivr.net/npm/@reform-digital/[email protected]/prod/index.js"
  rd-component-name="my-component"
  rd-component-src="https://example.com/path/to/component.js"
  defer
></script>

This is ideal when:

  • You don't have access to global settings

  • You want portable, self-contained embeds

  • You're embedding components in a CMS or page builder

Note: It's safe to include this on multiple components — the loader only runs once.

Option B: Global Script + Lightweight Embeds

Add the loader once in your global settings (<head> tag):

Then use simpler embeds for each component:

This is ideal when:

  • You have access to global settings

  • You prefer cleaner, shorter embed code

  • You're managing a larger site with many components

Both options work identically — choose whichever fits your workflow best.

Loading Components

Add component scripts anywhere on your page using either method below.

Usage

Method 1: External Script URL

Add a <script> tag with the required attributes:

Method 2: Inline Template

Use a <template> element with the script content. Recommended: Wrap your JavaScript code in <script> tags inside the template to preserve proper formatting and syntax highlighting in Webflow:

You can also put JavaScript directly in the template (without script tags), though formatting may not be preserved in Webflow:

Attributes

  • rd-component-name — Unique identifier for your component (required)

  • rd-component-src — URL to the external component script (optional if using template)

Note: If you provide both rd-component-src and a matching <template>, the external URL will be used.

How It Works

  1. On page load, the embed script scans for all <script> tags with rd-component-name

  2. For each component, it checks if it's already been loaded (prevents duplicates)

  3. If not loaded, it either:

    • Loads the script from the rd-component-src URL, or

    • Extracts and executes the content from a matching <template> element

  4. Tracks loaded components globally to prevent duplicate loading

Example

This is especially useful when using the same component multiple times across different sections of your page.

Support

Need help? Join our Slack community.

Product Tracking

ScriptEmbed™ includes an extremely lightweight telemetry module that helps us understand product adoption patterns. This information allows us to focus our support efforts and prioritize product enhancements where they matter most.

What We Track:

  • Product Identifier: The name of the product (e.g., "SCRIPT_EMBED")

  • Domain: The public hostname where the product is installed (e.g., "example.com")

Privacy & Performance:

  • No cookies, fingerprinting, or personally identifiable information

  • Only runs on live, public domains (never on localhost or development environments)

  • Single lightweight request sent once per page load

  • Data is aggregated for internal analytics only

  • Not used for advertising, marketing, or tracking

PreviousCookieFlow™NextCopyKit™

Last updated