Widget catalog · family

The Kicbak account widget

The identity badge: it connects a member of your site to their Kicbak account and carries their traveler status. Any organization can embed it — communities, alliances, and creators included — because there is no rewards programme involved. The real component ships from Kicbak; these previews render its exact markup and themes.

Pick a finish

Theme and state

Partners pick from the same small theme set as the rewards widget — one prop, never a restyle. The three states are the widget's whole lifecycle; balances stay out until the member has proven control of the account.

The badge

The account card

Kicbak-branded wherever it appears — it keeps its own finish on any host page, the way a physical badge looks the same on any desk. Connecting is the one action; the connected state is the badge proper, with the member's traveler status in the ring.

Account

60out of 100

Your traveler status

guest@example.com

Open your account on Kicbak

ConnectedDisconnect

On connect: your server calls Kicbak's enroll endpoint with the member's email and your server credential — a new email gets a real account on the spot, an existing one is recognized.
Referral attribution rides on the same call when your site was the referrer.
Status is read for display; balances need the authenticated state.
Disconnect removes only this site's link — the Kicbak account, its wallets, and its attribution are untouched.

Embed code

tsx

import { KicbakAccountCard } from "@kicbak/account-react"; // package name provisional

// One card wherever the member manages their standing with your site.
// The email prefills from your own account system; nothing is sent to
// Kicbak until the member taps the button.
<KicbakAccountCard
  memberEmail={member.email}
  theme="slate"
  serverEndpoint="/api/kicbak/connect"
/>

Collapsed

The account chip

The badge folded into a pill for single-column layouts, three sizes. It displays and points — connecting stays on the card, so a page never carries two connect forms.

Embed code

tsx

import { KicbakAccountChip } from "@kicbak/account-react"; // package name provisional

// Single-column layouts: the chip stands in for the card and summons it.
<KicbakAccountChip theme="slate" size="md" onClick={openAccountCard} />