Shipeasy

Drop-in script loader

Add feature flags and configs to a no-build or static site with a single <script> tag and a window global — no bundler required.

Production readyOn this page · 3 min readUpdated · June 18, 2026Works with · Any HTML page · no bundler

For static sites, server-rendered pages, or anywhere you can't run a bundler, the SDK ships as a drop-in <script> loader. One tag boots the client, identifies the visitor from data-* attributes, and exposes a window.shipeasy global.

Add the tag

<script
  src="https://cdn.shipeasy.ai/sdk/loader.js"
  data-sdk-key="sdk_client_..."
  data-user-id="user-123"
  data-user-email="u@x.com"
  data-user-plan="pro"
  data-attrs='{"country":"US"}'
  defer
></script>

The data-sdk-key is your public client key (sdk_client_…) — it's safe to embed in HTML. The data-user-* attributes and data-attrs (a JSON object of extra targeting attributes) become the identified user, so gate rules and experiments can target by plan, country, and so on.

Use the global

Initialization is asynchronous. Await window.shipeasy.ready before reading flags:

<script>
  await window.shipeasy.ready;
  if (window.shipeasy.getFlag("new_checkout")) {
    /* show the new checkout */
  }
</script>
How the loader is published

The loader IIFE is published to a public R2 bucket on every SDK release: an immutable, 1-year-cached loader-vX.Y.Z.js, plus a rolling 5-minute loader.js. Point at loader.js to ride the latest, or pin the versioned URL for stability.

When to use it (and when not to)

The loader is the browser client under a different delivery mechanism: it reads flags, configs, and experiments for the identified visitor. For server-side evaluation, use the server SDK with your server key — never put a server key in a <script> tag.

# Bundled projects: install the SDK instead of using the loader
npm install @shipeasy/sdk
// Same capability, with types, once you have a bundler:
import { configure, Client } from "@shipeasy/sdk/client";

configure({
  clientKey: "sdk_client_...",
  attributes: (u) => ({ user_id: u.id, plan: u.plan }),
});

const flags = new Client({ id: "user-123", plan: "pro" });
await flags.ready();
flags.getFlag("new_checkout");
Was this page helpful?
✎ Edit this page

On this page