Widget Overview

The useLoyalty Widget is a self-contained loyalty experience that you can embed in any website. It provides members with access to their points, rewards, quests, badges, and referral program.

Features

• Points Display: Show current balance and level progress
• Rewards Catalog: Browse and redeem rewards with points
• Games & Quests: Daily check-ins, spin wheels, scratch cards
• Badges: View earned achievements and progress
• Referrals: Share referral codes and track invites
• Multi-language: Support for 11 languages out of the box
• Themeable: Customize colors, fonts, and positioning

Quick Start

Add the widget to your site with just a few lines of code:

<script src="https://cdn.useloyalty.app/widget/useloyalty-widget.iife.js"></script>
<script>
  UseLoyaltyWidget.init({
    publicKey: "pk_your_public_key",
    externalId: "user_123",
    timestamp: Date.now(),
    signature: "hmac_signature_from_server",
  });
</script>

Widget Preview

The widget appears as a floating button that opens a drawer containing:

1. Profile Bar: Points balance, level, and avatar
2. Tab Navigation: Rewards, Quests, Refer
3. Content Area: Tab-specific content
4. Promo Code Input: Optional code redemption

Documentation

Browser Support

The widget supports all modern browsers:

Widget States

Launcher Button

A floating button (default: bottom-right corner) that opens the widget drawer. Supports multiple display modes:

• Floating (default): Icon-only or icon with text label
• Custom: No launcher button - trigger via UseLoyaltyWidget.open() from your own UI

Expanded Drawer

The main widget interface with tabs:

• Rewards Tab: Available rewards, costs, stock status
• Quests Tab: Games, daily check-in, challenges
• Refer Tab: Referral code, social sharing, stats

Achievement Modals

Pop-up celebrations for:

• Level up achievements
• Quest completions
• Reward claims
• Daily check-in streaks

Security

The widget uses HMAC signature verification to authenticate members:

1. Your server generates a signature using the private key
2. The widget sends the signature with each request
3. The API verifies the signature before processing

This ensures that only authenticated members can access their data.

Next Steps

1. Install the widget
2. Configure appearance
3. Add multi-language support