Drop-in Web Components for balance, tier, credit, redemption, and history. Framework-agnostic, themeable, and authenticated by a scoped Widget Token that is safe to ship in the browser. No build step required.
Everything below is the real library, rendering live in demo mode — no backend, no account. Try redeeming some credit: the credit card and history update instantly.
Load the library, configure it with your endpoint and a Widget Token, then drop in the elements you want. Omit the config (or use token: 'demo') to render demo data.
Open source (MIT) on npm and GitHub. Install with npm install @aetherprojects.net/widgets, or load straight from the CDN below — no build step.
<!-- 1. Load the library from the CDN (no build step) -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@aetherprojects.net/widgets@0.3.0/dist/loyaltyos-widgets.esm.js"></script>
<!-- 2. Configure once -->
<script>
LoyaltyOS.configure({
endpoint: 'https://api.yourco.com/graphql/v1',
token: 'wgt_live_xxx' // a Widget Token, minted in the VariaOS portal
});
</script>
<!-- 3. Drop in the elements -->
<loyalty-balance></loyalty-balance>
<loyalty-tier></loyalty-tier>
<loyalty-credit></loyalty-credit>
<loyalty-redeem></loyalty-redeem>
<loyalty-history limit="5"></loyalty-history>
:root {
--loyalty-accent: #4f7ef7;
--loyalty-card-bg: #111720;
--loyalty-card-border: #232b38;
--loyalty-text: #e7ecf3;
--loyalty-muted: #8b97a8;
--loyalty-credit-color: #34d399;
--loyalty-radius: 14px;
}
<loyalty-balance> — points balance<loyalty-tier> — tier & progress<loyalty-credit> — spendable credit<loyalty-redeem> — redeem credit (the one allowed write)<loyalty-history> — recent activityThe download includes the full source, the embeddable member-portal template, a quickstart, and the README. See the developer docs for the Widget Token and API reference.
MIT licensed, no build step, no backend required to try. Install from npm, star it on GitHub, or start a free sandbox to wire it to live data.