Reference Widgets

A working member portal,
in an afternoon.

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.

Download v0.2.0 (.zip) → View on GitHub
Live Demo

See it running.

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.

● Live · demo data
Integrate

Two steps to live.

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.

<!-- 1. Load the library (illustrative CDN URL) -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@loyaltyos/widgets/src/index.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 LoyaltyOS 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>

Theme with CSS variables

: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;
}
What's Included

Five components. One token.

The 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.

Grab the widgets and ship.

MIT licensed, no build step, no backend required to try. Download the library or start a free sandbox to wire it to live data.

Download v0.2.0 (.zip) → Start free sandbox