const{Fragment:e,jsx:l,jsxs:n}=arguments[0];function _createMdxContent(r){const a={a:"a",code:"code",figure:"figure",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",span:"span",strong:"strong",ul:"ul",...r.components},{CTAButton:s,CTAButtonGroup:c,Callout:o}=a;return s||_missingMdxReference("CTAButton",!0),c||_missingMdxReference("CTAButtonGroup",!0),o||_missingMdxReference("Callout",!0),n(e,{children:[l(a.p,{children:"You have a SaaS product. Your users sign up, poke around, and some of them come back. You want more of them to come back. Gamification -- XP, levels, leaderboards -- is one of the most effective ways to make that happen, but building it from scratch takes weeks."}),"\n",l(a.p,{children:"This post walks you through adding a complete gamification layer to your app in 10 minutes using EngageFabric's gamification API. By the end, your users will earn XP for actions, level up, and compete on a live leaderboard. Every step has full code you can copy and run."}),"\n",l(o,{type:"info",children:l(a.p,{children:"EngageFabric is a gamification API built for SaaS products. It handles XP calculations, level thresholds, leaderboard rankings, and quest state machines so you can focus on your product, not game infrastructure."})}),"\n",l(a.h2,{id:"what-you-will-build",children:l(a.a,{href:"#what-you-will-build",children:"What you will build"})}),"\n",l(a.p,{children:"Here is what your app will do after following this guide:"}),"\n",n(a.ol,{children:["\n",n(a.li,{children:[l(a.strong,{children:"Track user actions"}),' as events (e.g. "completed onboarding", "invited a teammate")']}),"\n",n(a.li,{children:[l(a.strong,{children:"Award XP automatically"})," based on rules you configure"]}),"\n",n(a.li,{children:[l(a.strong,{children:"Level users up"})," when they cross XP thresholds"]}),"\n",n(a.li,{children:[l(a.strong,{children:"Display a live leaderboard"})," showing top users ranked by XP"]}),"\n"]}),"\n",l(a.p,{children:"Four capabilities, one API, ten minutes. Let's go."}),"\n",l(a.h2,{id:"prerequisites",children:l(a.a,{href:"#prerequisites",children:"Prerequisites"})}),"\n",n(a.ul,{children:["\n",l(a.li,{children:"A JavaScript/TypeScript project (Node.js 18+)"}),"\n",n(a.li,{children:["An EngageFabric account (",l(a.a,{href:"https://engagefabric.com/signup",children:"sign up free"})," during the alpha)"]}),"\n",n(a.li,{children:["Your API key and Project ID from the ",l(a.a,{href:"https://admin.engagefabric.com",children:"admin console"})]}),"\n"]}),"\n",l(a.h2,{id:"step-1-install-the-sdk",children:l(a.a,{href:"#step-1-install-the-sdk",children:"Step 1: Install the SDK"})}),"\n",l(a.p,{children:"Add the EngageFabric SDK to your project:"}),"\n",l(a.figure,{"data-rehype-pretty-code-figure":"",children:l(a.pre,{style:{backgroundColor:"#0d1117",color:"#e6edf3"},tabIndex:"0","data-language":"bash","data-theme":"github-dark-default",children:l(a.code,{"data-language":"bash","data-theme":"github-dark-default",style:{display:"grid"},children:n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#FFA657"},children:"npm"}),l(a.span,{style:{color:"#A5D6FF"},children:" install"}),l(a.span,{style:{color:"#A5D6FF"},children:" @playpulse/sdk"})]})})})}),"\n",l(a.p,{children:"Initialize the client with your credentials:"}),"\n",l(a.figure,{"data-rehype-pretty-code-figure":"",children:l(a.pre,{style:{backgroundColor:"#0d1117",color:"#e6edf3"},tabIndex:"0","data-language":"typescript","data-theme":"github-dark-default",children:n(a.code,{"data-language":"typescript","data-theme":"github-dark-default",style:{display:"grid"},children:[n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#FF7B72"},children:"import"}),l(a.span,{style:{color:"#E6EDF3"},children:" { EngageFabric } "}),l(a.span,{style:{color:"#FF7B72"},children:"from"}),l(a.span,{style:{color:"#A5D6FF"},children:" '@playpulse/sdk'"}),l(a.span,{style:{color:"#E6EDF3"},children:";"})]}),"\n",l(a.span,{"data-line":"",children:" "}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#FF7B72"},children:"const"}),l(a.span,{style:{color:"#79C0FF"},children:" ef"}),l(a.span,{style:{color:"#FF7B72"},children:" ="}),l(a.span,{style:{color:"#FF7B72"},children:" new"}),l(a.span,{style:{color:"#D2A8FF"},children:" EngageFabric"}),l(a.span,{style:{color:"#E6EDF3"},children:"({"})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" apiKey: process.env."}),l(a.span,{style:{color:"#79C0FF"},children:"ENGAGEFABRIC_API_KEY"}),l(a.span,{style:{color:"#E6EDF3"},children:","})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" projectId: process.env."}),l(a.span,{style:{color:"#79C0FF"},children:"ENGAGEFABRIC_PROJECT_ID"}),l(a.span,{style:{color:"#E6EDF3"},children:","})]}),"\n",l(a.span,{"data-line":"",children:l(a.span,{style:{color:"#E6EDF3"},children:"});"})})]})})}),"\n",l(o,{type:"tip",children:n(a.p,{children:["Store your API key in environment variables. Never commit it to source code. Use ",l(a.code,{children:".env"})," files locally and your platform's secrets manager in production."]})}),"\n",l(a.p,{children:"That's it for setup. The SDK handles authentication, retries, and connection management. You are ready to start tracking events."}),"\n",n(a.p,{children:[l(a.strong,{children:"Expected result:"})," The SDK connects to EngageFabric's API and is ready to send events. No errors in your console."]}),"\n",l(a.h2,{id:"step-2-configure-your-project",children:l(a.a,{href:"#step-2-configure-your-project",children:"Step 2: Configure your project"})}),"\n",l(a.p,{children:"Before tracking events, define what actions are worth XP and what your level thresholds look like. You can do this through the admin console UI or programmatically via the API."}),"\n",l(a.h3,{id:"define-xp-rules",children:l(a.a,{href:"#define-xp-rules",children:"Define XP rules"})}),"\n",l(a.p,{children:"Create rules that map user actions to XP rewards:"}),"\n",l(a.figure,{"data-rehype-pretty-code-figure":"",children:l(a.pre,{style:{backgroundColor:"#0d1117",color:"#e6edf3"},tabIndex:"0","data-language":"typescript","data-theme":"github-dark-default",children:n(a.code,{"data-language":"typescript","data-theme":"github-dark-default",style:{display:"grid"},children:[l(a.span,{"data-line":"",children:l(a.span,{style:{color:"#8B949E"},children:"// Award 50 XP when a user completes onboarding"})}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#FF7B72"},children:"await"}),l(a.span,{style:{color:"#E6EDF3"},children:" ef.rules."}),l(a.span,{style:{color:"#D2A8FF"},children:"create"}),l(a.span,{style:{color:"#E6EDF3"},children:"({"})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" name: "}),l(a.span,{style:{color:"#A5D6FF"},children:"'Onboarding Complete'"}),l(a.span,{style:{color:"#E6EDF3"},children:","})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" trigger: { action: "}),l(a.span,{style:{color:"#A5D6FF"},children:"'onboarding_completed'"}),l(a.span,{style:{color:"#E6EDF3"},children:" },"})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" actions: [{ type: "}),l(a.span,{style:{color:"#A5D6FF"},children:"'award_xp'"}),l(a.span,{style:{color:"#E6EDF3"},children:", amount: "}),l(a.span,{style:{color:"#79C0FF"},children:"50"}),l(a.span,{style:{color:"#E6EDF3"},children:" }],"})]}),"\n",l(a.span,{"data-line":"",children:l(a.span,{style:{color:"#E6EDF3"},children:"});"})}),"\n",l(a.span,{"data-line":"",children:" "}),"\n",l(a.span,{"data-line":"",children:l(a.span,{style:{color:"#8B949E"},children:"// Award 25 XP for each teammate invited"})}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#FF7B72"},children:"await"}),l(a.span,{style:{color:"#E6EDF3"},children:" ef.rules."}),l(a.span,{style:{color:"#D2A8FF"},children:"create"}),l(a.span,{style:{color:"#E6EDF3"},children:"({"})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" name: "}),l(a.span,{style:{color:"#A5D6FF"},children:"'Teammate Invited'"}),l(a.span,{style:{color:"#E6EDF3"},children:","})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" trigger: { action: "}),l(a.span,{style:{color:"#A5D6FF"},children:"'teammate_invited'"}),l(a.span,{style:{color:"#E6EDF3"},children:" },"})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" actions: [{ type: "}),l(a.span,{style:{color:"#A5D6FF"},children:"'award_xp'"}),l(a.span,{style:{color:"#E6EDF3"},children:", amount: "}),l(a.span,{style:{color:"#79C0FF"},children:"25"}),l(a.span,{style:{color:"#E6EDF3"},children:" }],"})]}),"\n",l(a.span,{"data-line":"",children:l(a.span,{style:{color:"#E6EDF3"},children:"});"})}),"\n",l(a.span,{"data-line":"",children:" "}),"\n",l(a.span,{"data-line":"",children:l(a.span,{style:{color:"#8B949E"},children:"// Award 100 XP for creating a project"})}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#FF7B72"},children:"await"}),l(a.span,{style:{color:"#E6EDF3"},children:" ef.rules."}),l(a.span,{style:{color:"#D2A8FF"},children:"create"}),l(a.span,{style:{color:"#E6EDF3"},children:"({"})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" name: "}),l(a.span,{style:{color:"#A5D6FF"},children:"'Project Created'"}),l(a.span,{style:{color:"#E6EDF3"},children:","})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" trigger: { action: "}),l(a.span,{style:{color:"#A5D6FF"},children:"'project_created'"}),l(a.span,{style:{color:"#E6EDF3"},children:" },"})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" actions: [{ type: "}),l(a.span,{style:{color:"#A5D6FF"},children:"'award_xp'"}),l(a.span,{style:{color:"#E6EDF3"},children:", amount: "}),l(a.span,{style:{color:"#79C0FF"},children:"100"}),l(a.span,{style:{color:"#E6EDF3"},children:" }],"})]}),"\n",l(a.span,{"data-line":"",children:l(a.span,{style:{color:"#E6EDF3"},children:"});"})})]})})}),"\n",l(a.h3,{id:"define-level-thresholds",children:l(a.a,{href:"#define-level-thresholds",children:"Define level thresholds"})}),"\n",l(a.p,{children:"Set up levels so users feel a sense of progression:"}),"\n",l(a.figure,{"data-rehype-pretty-code-figure":"",children:l(a.pre,{style:{backgroundColor:"#0d1117",color:"#e6edf3"},tabIndex:"0","data-language":"typescript","data-theme":"github-dark-default",children:n(a.code,{"data-language":"typescript","data-theme":"github-dark-default",style:{display:"grid"},children:[n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#FF7B72"},children:"await"}),l(a.span,{style:{color:"#E6EDF3"},children:" ef.levels."}),l(a.span,{style:{color:"#D2A8FF"},children:"configure"}),l(a.span,{style:{color:"#E6EDF3"},children:"(["})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" { level: "}),l(a.span,{style:{color:"#79C0FF"},children:"1"}),l(a.span,{style:{color:"#E6EDF3"},children:", name: "}),l(a.span,{style:{color:"#A5D6FF"},children:"'Newcomer'"}),l(a.span,{style:{color:"#E6EDF3"},children:", xpRequired: "}),l(a.span,{style:{color:"#79C0FF"},children:"0"}),l(a.span,{style:{color:"#E6EDF3"},children:" },"})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" { level: "}),l(a.span,{style:{color:"#79C0FF"},children:"2"}),l(a.span,{style:{color:"#E6EDF3"},children:", name: "}),l(a.span,{style:{color:"#A5D6FF"},children:"'Contributor'"}),l(a.span,{style:{color:"#E6EDF3"},children:", xpRequired: "}),l(a.span,{style:{color:"#79C0FF"},children:"100"}),l(a.span,{style:{color:"#E6EDF3"},children:" },"})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" { level: "}),l(a.span,{style:{color:"#79C0FF"},children:"3"}),l(a.span,{style:{color:"#E6EDF3"},children:", name: "}),l(a.span,{style:{color:"#A5D6FF"},children:"'Builder'"}),l(a.span,{style:{color:"#E6EDF3"},children:", xpRequired: "}),l(a.span,{style:{color:"#79C0FF"},children:"300"}),l(a.span,{style:{color:"#E6EDF3"},children:" },"})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" { level: "}),l(a.span,{style:{color:"#79C0FF"},children:"4"}),l(a.span,{style:{color:"#E6EDF3"},children:", name: "}),l(a.span,{style:{color:"#A5D6FF"},children:"'Achiever'"}),l(a.span,{style:{color:"#E6EDF3"},children:", xpRequired: "}),l(a.span,{style:{color:"#79C0FF"},children:"600"}),l(a.span,{style:{color:"#E6EDF3"},children:" },"})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" { level: "}),l(a.span,{style:{color:"#79C0FF"},children:"5"}),l(a.span,{style:{color:"#E6EDF3"},children:", name: "}),l(a.span,{style:{color:"#A5D6FF"},children:"'Champion'"}),l(a.span,{style:{color:"#E6EDF3"},children:", xpRequired: "}),l(a.span,{style:{color:"#79C0FF"},children:"1000"}),l(a.span,{style:{color:"#E6EDF3"},children:" },"})]}),"\n",l(a.span,{"data-line":"",children:l(a.span,{style:{color:"#E6EDF3"},children:"]);"})})]})})}),"\n",l(a.h3,{id:"create-a-leaderboard",children:l(a.a,{href:"#create-a-leaderboard",children:"Create a leaderboard"})}),"\n",l(a.p,{children:"Set up a leaderboard to rank your users:"}),"\n",l(a.figure,{"data-rehype-pretty-code-figure":"",children:l(a.pre,{style:{backgroundColor:"#0d1117",color:"#e6edf3"},tabIndex:"0","data-language":"typescript","data-theme":"github-dark-default",children:n(a.code,{"data-language":"typescript","data-theme":"github-dark-default",style:{display:"grid"},children:[n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#FF7B72"},children:"await"}),l(a.span,{style:{color:"#E6EDF3"},children:" ef.leaderboards."}),l(a.span,{style:{color:"#D2A8FF"},children:"create"}),l(a.span,{style:{color:"#E6EDF3"},children:"({"})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" name: "}),l(a.span,{style:{color:"#A5D6FF"},children:"'Top Contributors'"}),l(a.span,{style:{color:"#E6EDF3"},children:","})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" metric: "}),l(a.span,{style:{color:"#A5D6FF"},children:"'xp'"}),l(a.span,{style:{color:"#E6EDF3"},children:","})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" resetPeriod: "}),l(a.span,{style:{color:"#A5D6FF"},children:"'monthly'"}),l(a.span,{style:{color:"#E6EDF3"},children:","})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" maxEntries: "}),l(a.span,{style:{color:"#79C0FF"},children:"100"}),l(a.span,{style:{color:"#E6EDF3"},children:","})]}),"\n",l(a.span,{"data-line":"",children:l(a.span,{style:{color:"#E6EDF3"},children:"});"})})]})})}),"\n",l(o,{type:"info",children:n(a.p,{children:["You only need to run the configuration code once. After that, the rules, levels, and leaderboard persist in your EngageFabric project. You can also configure all of this through the admin console's visual builder at ",l(a.a,{href:"https://admin.engagefabric.com",children:"admin.engagefabric.com"}),"."]})}),"\n",n(a.p,{children:[l(a.strong,{children:"Expected result:"})," Your project now has three XP rules, five levels, and a monthly leaderboard. You can verify this in the admin console under Project Settings."]}),"\n",l(a.h2,{id:"step-3-add-your-first-xp-event",children:l(a.a,{href:"#step-3-add-your-first-xp-event",children:"Step 3: Add your first XP event"})}),"\n",l(a.p,{children:"Now wire EngageFabric into your application code. Wherever a user performs a meaningful action, track it as an event."}),"\n",l(a.p,{children:"Here is a real-world example -- a user finishes onboarding in your app:"}),"\n",l(a.figure,{"data-rehype-pretty-code-figure":"",children:l(a.pre,{style:{backgroundColor:"#0d1117",color:"#e6edf3"},tabIndex:"0","data-language":"typescript","data-theme":"github-dark-default",children:n(a.code,{"data-language":"typescript","data-theme":"github-dark-default",style:{display:"grid"},children:[l(a.span,{"data-line":"",children:l(a.span,{style:{color:"#8B949E"},children:"// In your onboarding completion handler"})}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#FF7B72"},children:"async"}),l(a.span,{style:{color:"#FF7B72"},children:" function"}),l(a.span,{style:{color:"#D2A8FF"},children:" completeOnboarding"}),l(a.span,{style:{color:"#E6EDF3"},children:"("}),l(a.span,{style:{color:"#FFA657"},children:"userId"}),l(a.span,{style:{color:"#FF7B72"},children:":"}),l(a.span,{style:{color:"#79C0FF"},children:" string"}),l(a.span,{style:{color:"#E6EDF3"},children:") {"})]}),"\n",l(a.span,{"data-line":"",children:l(a.span,{style:{color:"#8B949E"},children:" // Your existing onboarding logic"})}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#FF7B72"},children:" await"}),l(a.span,{style:{color:"#E6EDF3"},children:" db.user."}),l(a.span,{style:{color:"#D2A8FF"},children:"update"}),l(a.span,{style:{color:"#E6EDF3"},children:"({"})]}),"\n",l(a.span,{"data-line":"",children:l(a.span,{style:{color:"#E6EDF3"},children:" where: { id: userId },"})}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" data: { onboardingComplete: "}),l(a.span,{style:{color:"#79C0FF"},children:"true"}),l(a.span,{style:{color:"#E6EDF3"},children:" },"})]}),"\n",l(a.span,{"data-line":"",children:l(a.span,{style:{color:"#E6EDF3"},children:" });"})}),"\n",l(a.span,{"data-line":"",children:" "}),"\n",l(a.span,{"data-line":"",children:l(a.span,{style:{color:"#8B949E"},children:" // Track the event in EngageFabric (one line)"})}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#FF7B72"},children:" await"}),l(a.span,{style:{color:"#E6EDF3"},children:" ef.events."}),l(a.span,{style:{color:"#D2A8FF"},children:"track"}),l(a.span,{style:{color:"#E6EDF3"},children:"({"})]}),"\n",l(a.span,{"data-line":"",children:l(a.span,{style:{color:"#E6EDF3"},children:" playerId: userId,"})}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" action: "}),l(a.span,{style:{color:"#A5D6FF"},children:"'onboarding_completed'"}),l(a.span,{style:{color:"#E6EDF3"},children:","})]}),"\n",l(a.span,{"data-line":"",children:l(a.span,{style:{color:"#E6EDF3"},children:" properties: {"})}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" completedAt: "}),l(a.span,{style:{color:"#FF7B72"},children:"new"}),l(a.span,{style:{color:"#D2A8FF"},children:" Date"}),l(a.span,{style:{color:"#E6EDF3"},children:"()."}),l(a.span,{style:{color:"#D2A8FF"},children:"toISOString"}),l(a.span,{style:{color:"#E6EDF3"},children:"(),"})]}),"\n",l(a.span,{"data-line":"",children:l(a.span,{style:{color:"#E6EDF3"},children:" },"})}),"\n",l(a.span,{"data-line":"",children:l(a.span,{style:{color:"#E6EDF3"},children:" });"})}),"\n",l(a.span,{"data-line":"",children:l(a.span,{style:{color:"#E6EDF3"},children:"}"})})]})})}),"\n",n(a.p,{children:["The ",l(a.code,{children:"playerId"})," is your internal user identifier. EngageFabric creates a player profile automatically on the first event -- no separate registration step needed."]}),"\n",l(a.h3,{id:"what-happens-behind-the-scenes",children:l(a.a,{href:"#what-happens-behind-the-scenes",children:"What happens behind the scenes"})}),"\n",l(a.p,{children:"When EngageFabric receives that event, the rules engine kicks in:"}),"\n",n(a.ol,{children:["\n",n(a.li,{children:[l(a.strong,{children:"Matches the rule"})," -- ",l(a.code,{children:"onboarding_completed"}),' triggers the "Onboarding Complete" rule']}),"\n",n(a.li,{children:[l(a.strong,{children:"Awards 50 XP"})," to the player"]}),"\n",n(a.li,{children:[l(a.strong,{children:"Checks level threshold"}),' -- if the player crosses 100 XP, they level up to "Contributor"']}),"\n",n(a.li,{children:[l(a.strong,{children:"Updates the leaderboard"})," -- the player's new XP total is reflected in rankings"]}),"\n",n(a.li,{children:[l(a.strong,{children:"Fires webhooks"})," -- your backend can listen for ",l(a.code,{children:"player.xp_earned"})," and ",l(a.code,{children:"player.leveled_up"})," events"]}),"\n"]}),"\n",l(a.p,{children:"All of this happens in under 50ms. Your user gets instant feedback."}),"\n",l(a.h3,{id:"track-more-actions",children:l(a.a,{href:"#track-more-actions",children:"Track more actions"})}),"\n",l(a.p,{children:"Add event tracking wherever it makes sense in your app:"}),"\n",l(a.figure,{"data-rehype-pretty-code-figure":"",children:l(a.pre,{style:{backgroundColor:"#0d1117",color:"#e6edf3"},tabIndex:"0","data-language":"typescript","data-theme":"github-dark-default",children:n(a.code,{"data-language":"typescript","data-theme":"github-dark-default",style:{display:"grid"},children:[l(a.span,{"data-line":"",children:l(a.span,{style:{color:"#8B949E"},children:"// User invites a teammate"})}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#FF7B72"},children:"await"}),l(a.span,{style:{color:"#E6EDF3"},children:" ef.events."}),l(a.span,{style:{color:"#D2A8FF"},children:"track"}),l(a.span,{style:{color:"#E6EDF3"},children:"({"})]}),"\n",l(a.span,{"data-line":"",children:l(a.span,{style:{color:"#E6EDF3"},children:" playerId: userId,"})}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" action: "}),l(a.span,{style:{color:"#A5D6FF"},children:"'teammate_invited'"}),l(a.span,{style:{color:"#E6EDF3"},children:","})]}),"\n",l(a.span,{"data-line":"",children:l(a.span,{style:{color:"#E6EDF3"},children:" properties: { inviteeEmail: email },"})}),"\n",l(a.span,{"data-line":"",children:l(a.span,{style:{color:"#E6EDF3"},children:"});"})}),"\n",l(a.span,{"data-line":"",children:" "}),"\n",l(a.span,{"data-line":"",children:l(a.span,{style:{color:"#8B949E"},children:"// User creates a project"})}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#FF7B72"},children:"await"}),l(a.span,{style:{color:"#E6EDF3"},children:" ef.events."}),l(a.span,{style:{color:"#D2A8FF"},children:"track"}),l(a.span,{style:{color:"#E6EDF3"},children:"({"})]}),"\n",l(a.span,{"data-line":"",children:l(a.span,{style:{color:"#E6EDF3"},children:" playerId: userId,"})}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" action: "}),l(a.span,{style:{color:"#A5D6FF"},children:"'project_created'"}),l(a.span,{style:{color:"#E6EDF3"},children:","})]}),"\n",l(a.span,{"data-line":"",children:l(a.span,{style:{color:"#E6EDF3"},children:" properties: { projectName: name },"})}),"\n",l(a.span,{"data-line":"",children:l(a.span,{style:{color:"#E6EDF3"},children:"});"})}),"\n",l(a.span,{"data-line":"",children:" "}),"\n",l(a.span,{"data-line":"",children:l(a.span,{style:{color:"#8B949E"},children:"// User completes a daily login"})}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#FF7B72"},children:"await"}),l(a.span,{style:{color:"#E6EDF3"},children:" ef.events."}),l(a.span,{style:{color:"#D2A8FF"},children:"track"}),l(a.span,{style:{color:"#E6EDF3"},children:"({"})]}),"\n",l(a.span,{"data-line":"",children:l(a.span,{style:{color:"#E6EDF3"},children:" playerId: userId,"})}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" action: "}),l(a.span,{style:{color:"#A5D6FF"},children:"'daily_login'"}),l(a.span,{style:{color:"#E6EDF3"},children:","})]}),"\n",l(a.span,{"data-line":"",children:l(a.span,{style:{color:"#E6EDF3"},children:"});"})})]})})}),"\n",n(a.p,{children:[l(a.strong,{children:"Expected result:"})," Open the admin console and navigate to the Players section. You should see your test user with XP awarded and their current level displayed. Each event appears in the player's activity timeline."]}),"\n",l(a.h2,{id:"step-4-display-the-leaderboard",children:l(a.a,{href:"#step-4-display-the-leaderboard",children:"Step 4: Display the leaderboard"})}),"\n",l(a.p,{children:"The final step is showing your users where they stand. EngageFabric provides both pre-built React components and raw data hooks."}),"\n",l(a.h3,{id:"option-a-pre-built-components-fastest",children:l(a.a,{href:"#option-a-pre-built-components-fastest",children:"Option A: Pre-built components (fastest)"})}),"\n",l(a.p,{children:"Drop in the React SDK for a working leaderboard in three lines:"}),"\n",l(a.figure,{"data-rehype-pretty-code-figure":"",children:l(a.pre,{style:{backgroundColor:"#0d1117",color:"#e6edf3"},tabIndex:"0","data-language":"bash","data-theme":"github-dark-default",children:l(a.code,{"data-language":"bash","data-theme":"github-dark-default",style:{display:"grid"},children:n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#FFA657"},children:"npm"}),l(a.span,{style:{color:"#A5D6FF"},children:" install"}),l(a.span,{style:{color:"#A5D6FF"},children:" @playpulse/react"})]})})})}),"\n",l(a.figure,{"data-rehype-pretty-code-figure":"",children:l(a.pre,{style:{backgroundColor:"#0d1117",color:"#e6edf3"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-default",children:n(a.code,{"data-language":"tsx","data-theme":"github-dark-default",style:{display:"grid"},children:[n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#FF7B72"},children:"import"}),l(a.span,{style:{color:"#E6EDF3"},children:" { Leaderboard } "}),l(a.span,{style:{color:"#FF7B72"},children:"from"}),l(a.span,{style:{color:"#A5D6FF"},children:" '@playpulse/react'"}),l(a.span,{style:{color:"#E6EDF3"},children:";"})]}),"\n",l(a.span,{"data-line":"",children:" "}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#FF7B72"},children:"function"}),l(a.span,{style:{color:"#D2A8FF"},children:" LeaderboardPage"}),l(a.span,{style:{color:"#E6EDF3"},children:"() {"})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#FF7B72"},children:" return"}),l(a.span,{style:{color:"#E6EDF3"},children:" ("})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" <"}),l(a.span,{style:{color:"#7EE787"},children:"Leaderboard"})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#79C0FF"},children:" leaderboardId"}),l(a.span,{style:{color:"#FF7B72"},children:"="}),l(a.span,{style:{color:"#A5D6FF"},children:'"top-contributors"'})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#79C0FF"},children:" limit"}),l(a.span,{style:{color:"#FF7B72"},children:"={"}),l(a.span,{style:{color:"#79C0FF"},children:"10"}),l(a.span,{style:{color:"#FF7B72"},children:"}"})]}),"\n",l(a.span,{"data-line":"",children:l(a.span,{style:{color:"#79C0FF"},children:" showCurrentUser"})}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#79C0FF"},children:" className"}),l(a.span,{style:{color:"#FF7B72"},children:"="}),l(a.span,{style:{color:"#A5D6FF"},children:'"my-leaderboard"'})]}),"\n",l(a.span,{"data-line":"",children:l(a.span,{style:{color:"#E6EDF3"},children:" />"})}),"\n",l(a.span,{"data-line":"",children:l(a.span,{style:{color:"#E6EDF3"},children:" );"})}),"\n",l(a.span,{"data-line":"",children:l(a.span,{style:{color:"#E6EDF3"},children:"}"})})]})})}),"\n",n(a.p,{children:["The ",l(a.code,{children:""})," component renders a ranked list with player names, XP totals, level badges, and position changes. The ",l(a.code,{children:"showCurrentUser"})," prop highlights the logged-in user's row even if they are not in the top 10."]}),"\n",l(a.h3,{id:"option-b-build-your-own-ui-full-control",children:l(a.a,{href:"#option-b-build-your-own-ui-full-control",children:"Option B: Build your own UI (full control)"})}),"\n",l(a.p,{children:"Use the data hooks to fetch leaderboard data and render it however you want:"}),"\n",l(a.figure,{"data-rehype-pretty-code-figure":"",children:l(a.pre,{style:{backgroundColor:"#0d1117",color:"#e6edf3"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-default",children:n(a.code,{"data-language":"tsx","data-theme":"github-dark-default",style:{display:"grid"},children:[n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#FF7B72"},children:"import"}),l(a.span,{style:{color:"#E6EDF3"},children:" { useLeaderboard, usePlayer } "}),l(a.span,{style:{color:"#FF7B72"},children:"from"}),l(a.span,{style:{color:"#A5D6FF"},children:" '@playpulse/react'"}),l(a.span,{style:{color:"#E6EDF3"},children:";"})]}),"\n",l(a.span,{"data-line":"",children:" "}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#FF7B72"},children:"function"}),l(a.span,{style:{color:"#D2A8FF"},children:" CustomLeaderboard"}),l(a.span,{style:{color:"#E6EDF3"},children:"() {"})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#FF7B72"},children:" const"}),l(a.span,{style:{color:"#E6EDF3"},children:" { "}),l(a.span,{style:{color:"#79C0FF"},children:"entries"}),l(a.span,{style:{color:"#E6EDF3"},children:", "}),l(a.span,{style:{color:"#79C0FF"},children:"isLoading"}),l(a.span,{style:{color:"#E6EDF3"},children:" } "}),l(a.span,{style:{color:"#FF7B72"},children:"="}),l(a.span,{style:{color:"#D2A8FF"},children:" useLeaderboard"}),l(a.span,{style:{color:"#E6EDF3"},children:"("}),l(a.span,{style:{color:"#A5D6FF"},children:"'top-contributors'"}),l(a.span,{style:{color:"#E6EDF3"},children:", {"})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" limit: "}),l(a.span,{style:{color:"#79C0FF"},children:"10"}),l(a.span,{style:{color:"#E6EDF3"},children:","})]}),"\n",l(a.span,{"data-line":"",children:l(a.span,{style:{color:"#E6EDF3"},children:" });"})}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#FF7B72"},children:" const"}),l(a.span,{style:{color:"#E6EDF3"},children:" { "}),l(a.span,{style:{color:"#79C0FF"},children:"player"}),l(a.span,{style:{color:"#E6EDF3"},children:" } "}),l(a.span,{style:{color:"#FF7B72"},children:"="}),l(a.span,{style:{color:"#D2A8FF"},children:" usePlayer"}),l(a.span,{style:{color:"#E6EDF3"},children:"(currentUserId);"})]}),"\n",l(a.span,{"data-line":"",children:" "}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#FF7B72"},children:" if"}),l(a.span,{style:{color:"#E6EDF3"},children:" (isLoading) "}),l(a.span,{style:{color:"#FF7B72"},children:"return"}),l(a.span,{style:{color:"#E6EDF3"},children:" <"}),l(a.span,{style:{color:"#7EE787"},children:"div"}),l(a.span,{style:{color:"#E6EDF3"},children:">Loading...;"})]}),"\n",l(a.span,{"data-line":"",children:" "}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#FF7B72"},children:" return"}),l(a.span,{style:{color:"#E6EDF3"},children:" ("})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" <"}),l(a.span,{style:{color:"#7EE787"},children:"div"}),l(a.span,{style:{color:"#79C0FF"},children:" className"}),l(a.span,{style:{color:"#FF7B72"},children:"="}),l(a.span,{style:{color:"#A5D6FF"},children:'"space-y-2"'}),l(a.span,{style:{color:"#E6EDF3"},children:">"})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" <"}),l(a.span,{style:{color:"#7EE787"},children:"h2"}),l(a.span,{style:{color:"#79C0FF"},children:" className"}),l(a.span,{style:{color:"#FF7B72"},children:"="}),l(a.span,{style:{color:"#A5D6FF"},children:'"text-xl font-bold"'}),l(a.span,{style:{color:"#E6EDF3"},children:">Top Contributors"})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" <"}),l(a.span,{style:{color:"#7EE787"},children:"div"}),l(a.span,{style:{color:"#79C0FF"},children:" className"}),l(a.span,{style:{color:"#FF7B72"},children:"="}),l(a.span,{style:{color:"#A5D6FF"},children:'"rounded-lg border"'}),l(a.span,{style:{color:"#E6EDF3"},children:">"})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#FF7B72"},children:" {"}),l(a.span,{style:{color:"#E6EDF3"},children:"entries."}),l(a.span,{style:{color:"#D2A8FF"},children:"map"}),l(a.span,{style:{color:"#E6EDF3"},children:"(("}),l(a.span,{style:{color:"#FFA657"},children:"entry"}),l(a.span,{style:{color:"#E6EDF3"},children:", "}),l(a.span,{style:{color:"#FFA657"},children:"index"}),l(a.span,{style:{color:"#E6EDF3"},children:") "}),l(a.span,{style:{color:"#FF7B72"},children:"=>"}),l(a.span,{style:{color:"#E6EDF3"},children:" ("})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" <"}),l(a.span,{style:{color:"#7EE787"},children:"div"})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#79C0FF"},children:" key"}),l(a.span,{style:{color:"#FF7B72"},children:"={"}),l(a.span,{style:{color:"#E6EDF3"},children:"entry.playerId"}),l(a.span,{style:{color:"#FF7B72"},children:"}"})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#79C0FF"},children:" className"}),l(a.span,{style:{color:"#FF7B72"},children:"={"}),l(a.span,{style:{color:"#A5D6FF"},children:"`flex items-center justify-between p-3 ${"})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" entry"}),l(a.span,{style:{color:"#A5D6FF"},children:"."}),l(a.span,{style:{color:"#E6EDF3"},children:"playerId"}),l(a.span,{style:{color:"#FF7B72"},children:" ==="}),l(a.span,{style:{color:"#E6EDF3"},children:" currentUserId"})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#FF7B72"},children:" ?"}),l(a.span,{style:{color:"#A5D6FF"},children:" 'bg-blue-50 font-semibold'"})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#FF7B72"},children:" :"}),l(a.span,{style:{color:"#A5D6FF"},children:" ''"})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#A5D6FF"},children:" }`"}),l(a.span,{style:{color:"#FF7B72"},children:"}"})]}),"\n",l(a.span,{"data-line":"",children:l(a.span,{style:{color:"#E6EDF3"},children:" >"})}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" <"}),l(a.span,{style:{color:"#7EE787"},children:"div"}),l(a.span,{style:{color:"#79C0FF"},children:" className"}),l(a.span,{style:{color:"#FF7B72"},children:"="}),l(a.span,{style:{color:"#A5D6FF"},children:'"flex items-center gap-3"'}),l(a.span,{style:{color:"#E6EDF3"},children:">"})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" <"}),l(a.span,{style:{color:"#7EE787"},children:"span"}),l(a.span,{style:{color:"#79C0FF"},children:" className"}),l(a.span,{style:{color:"#FF7B72"},children:"="}),l(a.span,{style:{color:"#A5D6FF"},children:'"text-lg font-mono w-8"'}),l(a.span,{style:{color:"#E6EDF3"},children:">"})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" #"}),l(a.span,{style:{color:"#FF7B72"},children:"{"}),l(a.span,{style:{color:"#E6EDF3"},children:"index "}),l(a.span,{style:{color:"#FF7B72"},children:"+"}),l(a.span,{style:{color:"#79C0FF"},children:" 1"}),l(a.span,{style:{color:"#FF7B72"},children:"}"})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" "})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" <"}),l(a.span,{style:{color:"#7EE787"},children:"div"}),l(a.span,{style:{color:"#E6EDF3"},children:">"})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" <"}),l(a.span,{style:{color:"#7EE787"},children:"p"}),l(a.span,{style:{color:"#E6EDF3"},children:">"}),l(a.span,{style:{color:"#FF7B72"},children:"{"}),l(a.span,{style:{color:"#E6EDF3"},children:"entry.displayName"}),l(a.span,{style:{color:"#FF7B72"},children:"}"}),l(a.span,{style:{color:"#E6EDF3"},children:""})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" <"}),l(a.span,{style:{color:"#7EE787"},children:"p"}),l(a.span,{style:{color:"#79C0FF"},children:" className"}),l(a.span,{style:{color:"#FF7B72"},children:"="}),l(a.span,{style:{color:"#A5D6FF"},children:'"text-sm text-gray-500"'}),l(a.span,{style:{color:"#E6EDF3"},children:">"})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" Level "}),l(a.span,{style:{color:"#FF7B72"},children:"{"}),l(a.span,{style:{color:"#E6EDF3"},children:"entry.level"}),l(a.span,{style:{color:"#FF7B72"},children:"}"}),l(a.span,{style:{color:"#E6EDF3"},children:" · "}),l(a.span,{style:{color:"#FF7B72"},children:"{"}),l(a.span,{style:{color:"#E6EDF3"},children:"entry.levelName"}),l(a.span,{style:{color:"#FF7B72"},children:"}"})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" "})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" "})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" "})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" <"}),l(a.span,{style:{color:"#7EE787"},children:"span"}),l(a.span,{style:{color:"#79C0FF"},children:" className"}),l(a.span,{style:{color:"#FF7B72"},children:"="}),l(a.span,{style:{color:"#A5D6FF"},children:'"font-mono"'}),l(a.span,{style:{color:"#E6EDF3"},children:">"}),l(a.span,{style:{color:"#FF7B72"},children:"{"}),l(a.span,{style:{color:"#E6EDF3"},children:"entry.xp."}),l(a.span,{style:{color:"#D2A8FF"},children:"toLocaleString"}),l(a.span,{style:{color:"#E6EDF3"},children:"()"}),l(a.span,{style:{color:"#FF7B72"},children:"}"}),l(a.span,{style:{color:"#E6EDF3"},children:" XP"})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" "})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" ))"}),l(a.span,{style:{color:"#FF7B72"},children:"}"})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" "})]}),"\n",l(a.span,{"data-line":"",children:" "}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#FF7B72"},children:" {"}),l(a.span,{style:{color:"#E6EDF3"},children:"player "}),l(a.span,{style:{color:"#FF7B72"},children:"&&"}),l(a.span,{style:{color:"#E6EDF3"},children:" ("})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" <"}),l(a.span,{style:{color:"#7EE787"},children:"p"}),l(a.span,{style:{color:"#79C0FF"},children:" className"}),l(a.span,{style:{color:"#FF7B72"},children:"="}),l(a.span,{style:{color:"#A5D6FF"},children:'"text-sm text-gray-600 mt-4"'}),l(a.span,{style:{color:"#E6EDF3"},children:">"})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" Your rank: #"}),l(a.span,{style:{color:"#FF7B72"},children:"{"}),l(a.span,{style:{color:"#E6EDF3"},children:"player.leaderboardPosition"}),l(a.span,{style:{color:"#FF7B72"},children:"}"}),l(a.span,{style:{color:"#E6EDF3"},children:" ·"}),l(a.span,{style:{color:"#FF7B72"},children:"{"}),l(a.span,{style:{color:"#A5D6FF"},children:"' '"}),l(a.span,{style:{color:"#FF7B72"},children:"}"})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#FF7B72"},children:" {"}),l(a.span,{style:{color:"#E6EDF3"},children:"player.xp."}),l(a.span,{style:{color:"#D2A8FF"},children:"toLocaleString"}),l(a.span,{style:{color:"#E6EDF3"},children:"()"}),l(a.span,{style:{color:"#FF7B72"},children:"}"}),l(a.span,{style:{color:"#E6EDF3"},children:" XP"})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" "})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" )"}),l(a.span,{style:{color:"#FF7B72"},children:"}"})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" "})]}),"\n",l(a.span,{"data-line":"",children:l(a.span,{style:{color:"#E6EDF3"},children:" );"})}),"\n",l(a.span,{"data-line":"",children:l(a.span,{style:{color:"#E6EDF3"},children:"}"})})]})})}),"\n",l(a.h3,{id:"add-an-xp-progress-bar",children:l(a.a,{href:"#add-an-xp-progress-bar",children:"Add an XP progress bar"})}),"\n",l(a.p,{children:"While you are at it, show users their progress toward the next level:"}),"\n",l(a.figure,{"data-rehype-pretty-code-figure":"",children:l(a.pre,{style:{backgroundColor:"#0d1117",color:"#e6edf3"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-default",children:n(a.code,{"data-language":"tsx","data-theme":"github-dark-default",style:{display:"grid"},children:[n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#FF7B72"},children:"import"}),l(a.span,{style:{color:"#E6EDF3"},children:" { usePlayer } "}),l(a.span,{style:{color:"#FF7B72"},children:"from"}),l(a.span,{style:{color:"#A5D6FF"},children:" '@playpulse/react'"}),l(a.span,{style:{color:"#E6EDF3"},children:";"})]}),"\n",l(a.span,{"data-line":"",children:" "}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#FF7B72"},children:"function"}),l(a.span,{style:{color:"#D2A8FF"},children:" XPProgressBar"}),l(a.span,{style:{color:"#E6EDF3"},children:"({ "}),l(a.span,{style:{color:"#FFA657"},children:"userId"}),l(a.span,{style:{color:"#E6EDF3"},children:" }"}),l(a.span,{style:{color:"#FF7B72"},children:":"}),l(a.span,{style:{color:"#E6EDF3"},children:" { "}),l(a.span,{style:{color:"#FFA657"},children:"userId"}),l(a.span,{style:{color:"#FF7B72"},children:":"}),l(a.span,{style:{color:"#79C0FF"},children:" string"}),l(a.span,{style:{color:"#E6EDF3"},children:" }) {"})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#FF7B72"},children:" const"}),l(a.span,{style:{color:"#E6EDF3"},children:" { "}),l(a.span,{style:{color:"#79C0FF"},children:"player"}),l(a.span,{style:{color:"#E6EDF3"},children:", "}),l(a.span,{style:{color:"#79C0FF"},children:"isLoading"}),l(a.span,{style:{color:"#E6EDF3"},children:" } "}),l(a.span,{style:{color:"#FF7B72"},children:"="}),l(a.span,{style:{color:"#D2A8FF"},children:" usePlayer"}),l(a.span,{style:{color:"#E6EDF3"},children:"(userId);"})]}),"\n",l(a.span,{"data-line":"",children:" "}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#FF7B72"},children:" if"}),l(a.span,{style:{color:"#E6EDF3"},children:" (isLoading) "}),l(a.span,{style:{color:"#FF7B72"},children:"return"}),l(a.span,{style:{color:"#E6EDF3"},children:" <"}),l(a.span,{style:{color:"#7EE787"},children:"div"}),l(a.span,{style:{color:"#79C0FF"},children:" className"}),l(a.span,{style:{color:"#FF7B72"},children:"="}),l(a.span,{style:{color:"#A5D6FF"},children:'"h-8 bg-gray-100 animate-pulse rounded"'}),l(a.span,{style:{color:"#E6EDF3"},children:" />;"})]}),"\n",l(a.span,{"data-line":"",children:" "}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#FF7B72"},children:" const"}),l(a.span,{style:{color:"#79C0FF"},children:" progress"}),l(a.span,{style:{color:"#FF7B72"},children:" ="}),l(a.span,{style:{color:"#E6EDF3"},children:" (player.xp "}),l(a.span,{style:{color:"#FF7B72"},children:"/"}),l(a.span,{style:{color:"#E6EDF3"},children:" player.nextLevelXp) "}),l(a.span,{style:{color:"#FF7B72"},children:"*"}),l(a.span,{style:{color:"#79C0FF"},children:" 100"}),l(a.span,{style:{color:"#E6EDF3"},children:";"})]}),"\n",l(a.span,{"data-line":"",children:" "}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#FF7B72"},children:" return"}),l(a.span,{style:{color:"#E6EDF3"},children:" ("})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" <"}),l(a.span,{style:{color:"#7EE787"},children:"div"}),l(a.span,{style:{color:"#79C0FF"},children:" className"}),l(a.span,{style:{color:"#FF7B72"},children:"="}),l(a.span,{style:{color:"#A5D6FF"},children:'"space-y-1"'}),l(a.span,{style:{color:"#E6EDF3"},children:">"})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" <"}),l(a.span,{style:{color:"#7EE787"},children:"div"}),l(a.span,{style:{color:"#79C0FF"},children:" className"}),l(a.span,{style:{color:"#FF7B72"},children:"="}),l(a.span,{style:{color:"#A5D6FF"},children:'"flex justify-between text-sm"'}),l(a.span,{style:{color:"#E6EDF3"},children:">"})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" <"}),l(a.span,{style:{color:"#7EE787"},children:"span"}),l(a.span,{style:{color:"#79C0FF"},children:" className"}),l(a.span,{style:{color:"#FF7B72"},children:"="}),l(a.span,{style:{color:"#A5D6FF"},children:'"font-medium"'}),l(a.span,{style:{color:"#E6EDF3"},children:">"})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" Level "}),l(a.span,{style:{color:"#FF7B72"},children:"{"}),l(a.span,{style:{color:"#E6EDF3"},children:"player.level"}),l(a.span,{style:{color:"#FF7B72"},children:"}"}),l(a.span,{style:{color:"#E6EDF3"},children:" — "}),l(a.span,{style:{color:"#FF7B72"},children:"{"}),l(a.span,{style:{color:"#E6EDF3"},children:"player.levelName"}),l(a.span,{style:{color:"#FF7B72"},children:"}"})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" "})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" <"}),l(a.span,{style:{color:"#7EE787"},children:"span"}),l(a.span,{style:{color:"#79C0FF"},children:" className"}),l(a.span,{style:{color:"#FF7B72"},children:"="}),l(a.span,{style:{color:"#A5D6FF"},children:'"text-gray-500"'}),l(a.span,{style:{color:"#E6EDF3"},children:">"})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#FF7B72"},children:" {"}),l(a.span,{style:{color:"#E6EDF3"},children:"player.xp"}),l(a.span,{style:{color:"#FF7B72"},children:"}"}),l(a.span,{style:{color:"#E6EDF3"},children:" / "}),l(a.span,{style:{color:"#FF7B72"},children:"{"}),l(a.span,{style:{color:"#E6EDF3"},children:"player.nextLevelXp"}),l(a.span,{style:{color:"#FF7B72"},children:"}"}),l(a.span,{style:{color:"#E6EDF3"},children:" XP"})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" "})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" "})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" <"}),l(a.span,{style:{color:"#7EE787"},children:"div"}),l(a.span,{style:{color:"#79C0FF"},children:" className"}),l(a.span,{style:{color:"#FF7B72"},children:"="}),l(a.span,{style:{color:"#A5D6FF"},children:'"h-3 bg-gray-200 rounded-full overflow-hidden"'}),l(a.span,{style:{color:"#E6EDF3"},children:">"})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" <"}),l(a.span,{style:{color:"#7EE787"},children:"div"})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#79C0FF"},children:" className"}),l(a.span,{style:{color:"#FF7B72"},children:"="}),l(a.span,{style:{color:"#A5D6FF"},children:'"h-full bg-gradient-to-r from-blue-500 to-indigo-500 rounded-full transition-all duration-500"'})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#79C0FF"},children:" style"}),l(a.span,{style:{color:"#FF7B72"},children:"={"}),l(a.span,{style:{color:"#E6EDF3"},children:"{ width: "}),l(a.span,{style:{color:"#A5D6FF"},children:"`${"}),l(a.span,{style:{color:"#E6EDF3"},children:"progress"}),l(a.span,{style:{color:"#A5D6FF"},children:"}%`"}),l(a.span,{style:{color:"#E6EDF3"},children:" }"}),l(a.span,{style:{color:"#FF7B72"},children:"}"})]}),"\n",l(a.span,{"data-line":"",children:l(a.span,{style:{color:"#E6EDF3"},children:" />"})}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" "})]}),"\n",n(a.span,{"data-line":"",children:[l(a.span,{style:{color:"#E6EDF3"},children:" "})]}),"\n",l(a.span,{"data-line":"",children:l(a.span,{style:{color:"#E6EDF3"},children:" );"})}),"\n",l(a.span,{"data-line":"",children:l(a.span,{style:{color:"#E6EDF3"},children:"}"})})]})})}),"\n",n(a.p,{children:[l(a.strong,{children:"Expected result:"})," Your app now shows a live leaderboard with ranked users, XP totals, and level badges. The currently logged-in user sees their position highlighted. The XP progress bar shows how close they are to the next level."]}),"\n",l(a.h2,{id:"the-complete-picture",children:l(a.a,{href:"#the-complete-picture",children:"The complete picture"})}),"\n",l(a.p,{children:"Here is everything you just built, end to end:"}),"\n",l(a.pre,{children:l(a.code,{children:'User action (e.g. "completed onboarding")\n → ef.events.track()\n → Rules engine matches action to XP rule\n → Player XP updated (+50)\n → Level check (did they level up?)\n → Leaderboard recalculated\n → UI updates via React hooks\n'})}),"\n",n(a.p,{children:[l(a.strong,{children:"Total lines of integration code:"})," ~15 lines in your backend, ~20 lines in your frontend. The rest is handled by EngageFabric."]}),"\n",l(a.h2,{id:"what-to-add-next",children:l(a.a,{href:"#what-to-add-next",children:"What to add next"})}),"\n",l(a.p,{children:"You have a working gamification layer. Here are the highest-impact features to add next:"}),"\n",n(a.ul,{children:["\n",n(a.li,{children:[l(a.strong,{children:"Quests"})," -- Guide users through multi-step flows like onboarding or feature discovery. ",l(a.a,{href:"https://docs.engagefabric.com/concepts/rules-engine",children:"Quest documentation →"})]}),"\n",n(a.li,{children:[l(a.strong,{children:"Streaks"})," -- Reward daily engagement with streak counters and multipliers. ",l(a.a,{href:"https://docs.engagefabric.com/concepts/game-economy",children:"Streaks documentation →"})]}),"\n",n(a.li,{children:[l(a.strong,{children:"Webhooks"})," -- React to game events in your backend for notifications, emails, or custom business logic. ",l(a.a,{href:"https://docs.engagefabric.com/api-reference/webhooks",children:"Webhooks documentation →"})]}),"\n",n(a.li,{children:[l(a.strong,{children:"Analytics"})," -- Track quest completion funnels and retention cohorts in the admin dashboard. ",l(a.a,{href:"https://docs.engagefabric.com/guides/analytics",children:"Analytics documentation →"})]}),"\n"]}),"\n",n(a.p,{children:["The full API reference is at ",l(a.a,{href:"https://docs.engagefabric.com",children:"docs.engagefabric.com"}),"."]}),"\n",n(c,{children:[l(s,{href:"https://engagefabric.com/signup",variant:"primary",children:"Start Building Free"}),l(s,{href:"https://demo.engagefabric.com",variant:"demo",children:"Try the Live Demo"})]})]})}return{default:function(e={}){const{wrapper:n}=e.components||{};return n?l(n,{...e,children:l(_createMdxContent,{...e})}):_createMdxContent(e)}};function _missingMdxReference(e,l){throw new Error("Expected "+(l?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}

Blog

How to Add Gamification to Your SaaS App in 10 Minutes