Skip to main content

Documentation & Demos

tinysdk.vercel.app

Repository

TrueGroupAgency/tinySDK

​
Overview

TinySDK is a lightweight JavaScript library that bridges the gap between no-code Webflow sites and the Celtic API ecosystem. It enables faster iteration across multiple brand storefronts (Spruce Collective, Athera Sports, PetKind, Yoor) without deploying code changes to each site individually. Instead of rebuilding checkout flows, raffle widgets, and tracking pixels for every new brand, marketing teams can drop a single script tag into any Webflow page and instantly activate:
  • API-powered checkout widgets with live raffle availability
  • Countdown timers that sync with draw deadlines
  • Free-entry forms with phone number capture for compliance
  • Analytics hooks for Triple Whale, PostHog, Microsoft Clarity, and GA4
  • A/B testing via URL parameters—no deployments needed
  • Modal management with accessibility and focus trapping
  • Order tracking and checkout status embeds
The SDK automatically detects the brand context, applies the correct styling, and routes checkout requests to the appropriate API endpoints. This “configure once, deploy everywhere” approach dramatically reduces the time to launch new campaigns and keeps partner storefronts in sync with the latest features.
  • v1.0.0
  • ≤ 1.8KB gzipped
  • Zero dependencies
  • Works on Webflow & static HTML

​
Getting Started

You can get up and running without writing any complex code. Just copy the snippets below and you are ready to go.
1

Configure your brand

Add this JSON block to your page to tell the SDK which brand (e.g., Athera, Spruce) you are serving. This ensures checkout links and redirects work correctly.
<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 script

Place this script tag just before your closing </body> tag.
<script src="https://tinysdk.vercel.app/sdk/tiny-sdk.js" defer></script>
3

Add features

Copy the HTML patterns for the features you want to use (see below) and paste them where you want them to appear on your page.

​
Features

​
🕒 Countdown Timer

Keep launches honest with a clock that updates itself. It hides automatically when the deadline passes. 
<!-- 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>

​
🛒 Checkout Widget

A polished purchase box without building a custom form. Includes built-in quantity limits and brand themes. 
<!-- 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 Checkout Widget

Let the raffle data populate itself straight from Spruce. Ideal for Webflow pages that need live availability. 
<!-- API-Powered Checkout (Webflow only) -->
<div data-raffle-id="68b06db2dfb845e943f30036"
     data-redirect-url="https://example.com/success?order_id={{order_id}}">
</div>

​
🪟 Modal Manager

Pop-ups with good manners and no extra libraries. Focus trapping keeps accessibility on point. 
<!-- 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>

​
🧪 A/B Testing

Swap imagery by sharing a special link—no deployment required. 
<!-- 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>

​
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"]
  },
  "events": {
    "clarity": true,
    "ga4": "G-XXXXXXXXXX"
  }
}

​
Debugging

Something not behaving? Open your browser developer tools and look for console messages labelled “TinySDK”—they translate technical issues into plain language.
SymptomLikely causeWhat to try
Script loads but nothing reactsConfig block missingConfirm the JSON snippet with id tiny-sdk-config is on the page.
Countdown stays hiddenDate format invalidUse a full timestamp like 2024-12-31T23:59:59.
Checkout widget looks emptyMissing data-item-idMake sure the container includes data-item-id and pricing attributes.

​
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

​
Technical Details

​
⚡ 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