Widgets Documentation

Complete guide to all available widgets, their theming options, and live previews.

Available Widgets

Opportunities Widget

Campaign Detail

  • React SDK (NPM) — Install via npm install @legionhandtech/lht-react-widgets
  • Embed the full campaign detail experience (tasks, rewards, claim flow) inside your own modal

Social Widget

Q&A Widget

Wallet Widget

Points History Widget

  • Live Preview - Paginated ledger of earned and redeemed points
  • Customizer - Embed code, theming, and Docs tab
  • Build your own UI (REST) — same ledger + balance data without the widget; includes Swagger deep links
  • Swagger: getPointsHistory · getPointsBalance
  • Reserved points: on shops that opt into claimable points, earned points are held as a pending reservation until the shopper claims them; claiming appears in the ledger as a claim transaction. Reservations expire after a per-shop, business-day-aware timeout (weekends do not count), and lapsed reservations are not credited. See the Point Reservations guide for the full integration flow.

Community Widgets

The community widgets work together to create a complete community page experience.

Community Header

Community Posts (Posts Feed)

Community Sidebar (Getting Started)

Matrix Widget (Notification Feed)

Profile Widget

Profile Edit Widget

Notifications Widget

  • React SDK (NPM) — Install via npm install @legionhandtech/lht-react-widgets
  • Live Preview - Matrix-style notifications (Supabase-backed)

Saved Opportunities Widget

Social Widget Channel Filter

You can optionally filter the social feed (and grid) to a specific channel.

  • Attribute: channel="<channel-slug>"
  • Works with both layout="feed" and layout="grid"
  • If omitted, the widget defaults to showing posts for the current shop across all channels (existing behavior)

Examples:

1<!-- Feed layout filtered to announcements channel --> 2<legion-social 3 layout="feed" 4 channel="announcements" 5 auth-token="your-jwt-token" 6 width="600" 7 height="800" 8 api-url="${window.location.origin}" 9></legion-social> 10 11<!-- Grid layout filtered to general channel --> 12<legion-social 13 layout="grid" 14 channel="general" 15 rows="2" 16 cols="4" 17 width="800" 18 height="400" 19 api-url="${window.location.origin}" 20 community-url="${window.location.origin}/community" 21></legion-social>

Note: If your Supabase schema does not include a channel_slug column on public.social_posts, the widget will gracefully fall back to shop-wide posts.

  • Notifications (Matrix)
    • Overview: /widget/notifications (Supabase-backed)

Tip: For embedding, prefer using the web components under /js/*.js and follow the attribute guides in each doc. Social features (feed, comments, reactions, notifications) are powered by Supabase tables and Realtime; no Firebase is required.

Documentation | Legion Hand Technologies