@reform-digital/script-embed

v1.1.0

Published

9 days ago

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 dynamically loads the component — but only if it hasn't already been loaded. This

0High
0Medium
0Low

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):

<script 
  src="https://cdn.jsdelivr.net/npm/@reform-digital/[email protected]/prod/index.js"
  defer
></script>

Then use simpler embeds for each component:

<script 
  rd-component-name="my-component"
  rd-component-src="https://example.com/path/to/component.js"
  defer
></script>

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:

<script 
  rd-component-name="my-component"
  rd-component-src="https://example.com/path/to/component.js"
  defer
></script>

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:

<script rd-component-name="my-component" defer></script>
<template rd-component-name="my-component">
  <script>
    // Your component script code here
    console.log('Component loaded!');
  </script>
</template>

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

<script rd-component-name="my-component" defer></script>
<template rd-component-name="my-component">
  // Your component script code here
  console.log('Component loaded!');
</template>

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

On page load, ScriptEmbed™ scans for all <script> tags with rd-component-name
For each component, it checks if it's already been loaded (prevents duplicates)
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
Tracks loaded components globally to prevent duplicate loading

Example

<!-- First instance loads the script -->
<script 
  rd-component-name="tooltip"
  rd-component-src="https://cdn.example.com/tooltip.js"
  defer
></script>

<!-- Second instance won't load (already loaded) -->
<script 
  rd-component-name="tooltip"
  rd-component-src="https://cdn.example.com/tooltip.js"
  defer
></script>

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