TinySDK - Ultra-lightweight front-end SDK

Getting started without touching code

Copy these two snippets, paste them near the bottom of your page, and TinySDK will do the heavy lifting. After that, use the ready-made HTML shown in each feature card.

1. Tell the SDK about your brand

This small JSON block keeps checkout links and redirect rules in sync.

<script type="application/json" id="tiny-sdk-config">
{
  "checkout": {
    "origin": "https://checkout.sprucecollective.co.uk/",
    "brand": "athera"
  },
  "redirects": {
    "allowlist": ["atherasports.com", "sprucecollective.co.uk"]
  }
}
</script>

2. Load the magic script

Drop it just before your closing </body> tag so it loads after your content.

<script src="https://tinysdk.vercel.app/sdk/tiny-sdk.js?v=1.0.7" defer></script>

3. Paste the HTML patterns you need

Each feature below comes with a copy-ready snippet and a plain-English explanation.

<!-- Countdown Timer -->
<div data-countdown="2024-12-31T23:59:59">
  <span class="countdown-days">0</span> days
  <span class="countdown-hours">0</span> hours
  <span class="countdown-minutes">0</span> minutes
  <span class="countdown-seconds">0</span> seconds
</div>

<!-- Standard Checkout Widget -->
<div data-item-id="product-123"
     data-base-price="5"
     data-currency="GBP"
     data-max="10"
     data-quick-select-options="1,2,5,10">
</div>

<!-- API-Powered Checkout (Webflow only) -->
<div data-raffle-id="68b06db2dfb845e943f30036"
     data-redirect-url="https://example.com/success?order_id={{order_id}}">
</div>

<!-- Animate on View -->
<div data-animate="fadeIn" data-delay="0">Fade-in block</div>
<div data-animate="slideUp" data-delay="200">Slide-up block</div>
<div data-animate="zoomIn" data-delay="400">Zoom-in block</div>

<!-- Modal System -->
<button data-modal-open="my-modal">Open Modal</button>
<dialog data-modal="my-modal">
  <form method="dialog">
    <button data-modal-close aria-label="Close">×</button>
    <h3>Modal Content</h3>
  </form>
</dialog>

<!-- Event Tracking -->
<button data-event-click="purchase-button">Buy Now</button>
<div data-event-view="hero-section">Hero content</div>

<!-- A/B Testing -->
<img src="hero-default.jpg" alt="Hero image" id="hero-main" />
<div data-ab-test="hero-variant" data-ab-src="hero-alt.jpg" data-ab-id="hero-main" style="display: none;"></div>
<div data-ab-test="hero-variant-2" data-ab-src="hero-v2.jpg" data-ab-id="hero-main" style="display: none;"></div>

What you get with one script

🕒 Countdown Timer

Keep launches honest with a clock that updates itself.

How it works: Add data-countdown with your deadline and the SDK fills in the days, hours, minutes, and seconds.

Why it helps: It hides automatically when the deadline passes so you never show expired offers.

Try this: Perfect for early-bird pricing or raffle closing times.

0 days0 hours0 minutes0 seconds

🛒 Checkout Widget

Live examples wired like production: each card opens a modal and runs the API checkout widget.

spruce

Spruce – VW T7 Campervan (paid)

Price: £0.99ID: 68f25c2b62b18529f457955d

athera

Athera – Free entry

Price: £0.00ID: 692f0802b05f5bd05ffbd281

petkind

Petkind – Free entry

Price: £0.00ID: 692f0c23dc2f3f0b8d8c4885

🎟️ API Checkout Widget

Let the raffle data populate itself straight from Spruce.

How it works: Provide data-raffle-id and a thank-you URL. The widget fetches pricing, status, and redirects customers after payment.

Why it helps: When a draw sells out the module swaps to a “closed” banner automatically.

Try this: Ideal on Webflow pages that need live availability without manual edits.

Need quick-select only raffles? Add the raffle ID to sliderDisabledItemIds and the slider hides whenever the API returns quick-buy buttons.

Points at a live raffle so you can see sold-out states and pricing.

✨ Animate on View

Add tasteful motion that respects visitors who prefer less animation.

How it works: Tag sections with data-animateplus optional data-delay to trigger fade, slide, or zoom effects on scroll.

Why it helps: Staggers content gracefully while skipping motion for accessibility settings.

Try this: Reveal testimonials or product rows as they come into view.

Fade-in block (0ms delay)

Slide-up block (200ms delay)

Zoom-in block (400ms delay)

🪟 Modal Manager

Pop-ups with good manners and no extra libraries.

How it works: Pair buttons using data-modal-openwith a matching data-modal container. TinySDK wires in open, close, ESC, and backdrop handling.

Why it helps: Focus trapping keeps accessibility on point while you style the modal however you like.

Try this: Collect leads, share bonus content, or surface terms and conditions.

📊 Event Tracking

See what visitors click or view without adding separate scripts.

How it works: Use data-event-click ordata-event-view labels and the SDK sends data to GA4, Clarity, or your own endpoint.

Why it helps: On Webflow staging domains it also prints friendly console logs for easy testing.

Try this: Track how many people reach your hero CTA or scroll to pricing.

This section is tracked as soon as it enters the viewport.

🧪 A/B Testing

Swap imagery by sharing a special link—no deployment required.

How it works: Hide variant images using data-ab-testand activate them with URL parameters like ?hero=1.

Why it helps: Performance stays snappy because unused images aren’t preloaded.

Try this: Share two ad campaigns that land on different hero images for side-by-side stats.

Append ?hero-variant=1 or?hero-variant-2=1 to the page URL to preview variants.

📝 Free Entry Form

Meet raffle compliance rules with a friendly opt-in form.

How it works: Mark a form with data-free-entryand data-item-id. Submissions travel through the secure proxy to Spruce.

Why it helps: Automatic loading states, error messages, and reset-on-success keep the experience clean.

Try this: Pair with a modal or landing section so visitors can enter without buying.

Closed Draw Demo

Live checkout API embed pointing at raffle 68a47eee47c6da0edbd3be2e. When the draw is closed the widget is replaced with a status banner.

Uses the production proxy at /api/raffles/[id] to fetch live raffle metadata.

API Endpoints

GET /sdk/tiny-sdk.jsFull SDK bundle (IIFE)

GET /sdk/tiny-sdk.esm.jsESM module

GET /sdk/countdown.jsCountdown module only

GET /sdk/checkout.jsCheckout widget only

GET /sdk/checkout-api.jsAPI checkout (Webflow only)

GET /sdk/free-entry.jsFree raffle entry form helper

GET /sdk/animate.jsAnimation module only

GET /sdk/modal.jsModal manager only

GET /sdk/events.jsEvent tracking only

GET /sdk/ab-test.jsA/B testing module only

Configuration Options

The SDK reads configuration from a JSON script tag with id tiny-sdk-config:

{
  "checkout": {
    "origin": "https://checkout.sprucecollective.co.uk/",
    "brand": "athera"
  },
  "redirects": {
    "allowlist": ["atherasports.com", "sprucecollective.co.uk"]
  },
  "animate": {
    "respectMotion": true,
    "stagger": 100
  },
  "site_id": "your-site-identifier",
  "events": {
    "clarity": true,
    "ga4": "G-XXXXXXXXXX",
    "endpoint": "https://api.example.com/events"
  },
  "abTest": {
    "variants": {
      "hero-variant": "alternative-hero.jpg",
      "hero-variant-2": "hero-v2.jpg",
      "product-variant": "product-alt.jpg",
      "banner-variant": "banner-alt.jpg"
    }
  }
}

SPA Integration

For single-page applications, call TinySDK.refresh() after route changes:

// After navigation
TinySDK.refresh();

// Or refresh specific modules
TinySDK.countdown.refresh();
TinySDK.checkout.refresh();
TinySDK.animate.refresh();
TinySDK.modal.refresh();
TinySDK.events.refresh();
TinySDK.checkoutApi.refresh(); // Webflow only
TinySDK.abTest.refresh(); // A/B testing

Debugging

Something not behaving? Use this plain-English checklist to spot the most common fixes before you call in a developer.

Symptom	Likely cause	What to try
Script loads but nothing reacts	Config block missing or script URL mistyped	Confirm the JSON snippet with id `tiny-sdk-config` is on the page and the script tag points to `https://tinysdk.vercel.app/sdk/tiny-sdk.js`.
Countdown stays hidden	Date format invalid or in the past	Use a full timestamp like `2024-12-31T23:59:59`. The timer hides itself once the deadline passes.
Checkout widget looks empty	Missing `data-item-id` or pricing attributes	Make sure the container includes `data-item-id`,`data-base-price`, and `data-currency`. TinySDK waits for them before rendering.
API checkout says "not available"	Wrong raffle ID or domain not allow-listed	Double-check the raffle ID in Spruce and test on an approved domain such as your Webflow staging or live site.
Animations never trigger	Element already in view or reduced-motion preference enabled	Scroll the page to bring the section into view. Devices set to “Reduce Motion” will skip animations by design.
Modal won’t close	Missing close trigger inside the modal	Add a button or link with `data-modal-close` and ensure the modal is visible when testing ESC or backdrop clicks.
Events don’t show in GA4	Analytics IDs missing from config	Add your GA4 measurement ID under `events.ga4` in the config and test on Webflow staging to see console logs.
A/B test link doesn’t swap images	URL parameter doesn’t match the variant name	If your element uses `data-ab-test="hero"`, open the page with `?hero=1` to activate the first variant.
Free entry form stalls on “Submitting…”	Required field missing or testing on an unapproved domain	Ensure every input has a `name` attribute and test on your staged or production domain so the proxy allows the request.

Still unsure? Open your browser developer tools and look for console messages labelled “TinySDK”—they translate technical issues into plain language.

⚡ Performance

Core SDK: ≤ 1.8KB gzipped
Each module: ≤ 1.2KB gzipped
Zero dependencies
Non-blocking initialization
Idempotent operations

🔒 Security

Redirect allowlist prevents open redirects
URL encoding prevents injection attacks
CSP compatible
Webflow.io debug logging

🚀 Ready to get started?

Copy the script tag above and add it to your site. The SDK will automatically detect and initialize all supported modules.

View Live Demo View Source