Web Integration

Web Implementation Guide for FTP Support

Setting up LucraClient to handle a user claiming a reward

type LucraReward = {
  rewardId: string;
  title: string;
  descriptor: string;
  iconUrl: string;
  bannerIconUrl: string;
  disclaimer: string;
  metadata: unknown;
};
type LucraClaimRewardBody = { reward: LucraReward };

new LucraClient({
  // other initialization params omitted
  onMessage: {
    // other handlers omitted
    claimReward: (data: LucraClaimRewardBody) => {
      // When a Lucra user is claiming a reward, Lucra will notify the user that their 
      // reward is being processed
      // When receiving this message, we recommend taking the user somewhere on the 
      // tenant's site to redeem the reward
    }
  },
});

Letting Lucra know about current FTP Rewards

// Send this message to LucraClient before the user can select Rewards when creating
// a matchup if possible, otherwise the user will see a loading animation
lucraClient.sendMessage.availableRewards({
  rewards: [
    {
      rewardId: "reward_001",
      title: "Client Appetizer",
      descriptor: "10% off",
      iconUrl: "https://picsum.photos/200",
      bannerIconUrl: "https://picsum.photos/200",
      disclaimer: "*Can only be redeemed once per week",
      metadata: {
        custom_data: { type: "food", expiry: "2024-12-31" },
        simple_data: "primitive_type_to_string",
      },
    },
  ]
});