Engagement component

Gamification Panel

A compact member summary with points balance, active challenge and next-best action.

Interactive example

Mobile preview

Live preview

9:41

My Rewards

Good morning, Alex

Your progress

ACE Rewards

2,480 pts

250 pending

Active challenge

Member Appreciation Month

2 of 4 activities

Next best action

Spend $22.60 more to finish

Client implementation

Embed code

React / React NativeJSX

import { GamificationPanel } from "@nextbee/client-components";

export function MemberExperience() {
  return (
    <GamificationPanel
      memberId={member.id}
      showNextMilestone
      accentColor="#d40029"
    />
  );
}

Implementation note

Replace the example identifiers with values from your authenticated member and challenge context. Data is served by the Client APIs documented in API Specs.