Skip to main content
Reward campaigns are a great way to inspire and engage your customers. But to make them truly effective, customers need a simple and clear way to see what’s available and how they’re progressing.

​
Step 1: Fetch All Available Reward Campaigns

Use the Get Reward Campaigns Configurations API endpoint to list all active and visible campaigns. This response provides:
  • Campaign Name and Icon: Display campaign names like “Join our family 👯‍♂️” and their corresponding icons
  • Description: Use descriptions to explain the campaign
  • Rewards: Highlight the rewards customers will earn, such as double points (walletRewardFactor: 2)
  • Visibility and Activation: Ensure only visible and active campaigns are displayed based on visibility and activation fields
Example Campaign Data: 
{
    "id": 5858,
    "name": "Join our family 👯‍♂️",
    "description": "Welcome to the family! Check out your new reward for signing up 😉",
    "rewards": [
        {
            "rankReward": 0,
            "walletReward": 0,
            "walletRewardFactor": null,
            "couponReward": null
        }
    ],
    "icon": "https://cdn.gameball.co/uploads/gb-library/general/signup.webp"
}
What Happens on the Frontend:
  • Render the campaigns as a scrollable grid or list, with icons and descriptions
  • Add a “Check Your Rewards” button using the redirectionButtonText and redirectionButtonLink fields
Campaigns grid example

​
Step 2: Fetch Customer Progress for Campaigns

To provide a personalized experience, fetch progress for the displayed campaigns using the Get Customer Campaigns Progress API. This response includes:
  • achievedCount: Indicates how many times the customer has achieved the campaign
  • completionPercentage: Shows progress for ongoing campaigns (e.g., 33% for “Third Order Campaign 🛍️”)
Example Progress Response: 
[
    {
        "rewardsCampaignName": "Join our family 👯‍♂️",
        "rewardsCampaignId": 5858,
        "completionPercentage": 100.0,
        "achievedCount": 1
    },
    {
        "rewardsCampaignName": "Double points",
        "rewardsCampaignId": 6652,
        "completionPercentage": 50.0,
        "achievedCount": 0
    }
]
What Happens on the Frontend:
  • Use completionPercentage to display progress as a progress bar or circle
  • Highlight completed campaigns where completionPercentage = 100 and dim or gray-out incomplete campaigns
Progress visualization example

​
Step 3: Integrating Rewards and Progress

Combine data from both endpoints to create a seamless user experience: For Completed Campaigns:
  • Use achievedCount and completionPercentage = 100 to highlight campaigns
  • Show rewards (e.g., “Sign-up bonus unlocked!”) prominently for completed campaigns
For Ongoing Campaigns:
  • Use completionPercentage to display a progress bar (e.g., “50% complete”)
  • Include a call-to-action, such as “Complete your next purchase to earn double points!” using the campaign description or custom text
Visual Mockup Suggestion:
  1. Grid Layout of Campaigns: Campaign name and icon at the top, progress bar or circle beneath the name, rewards displayed below the progress bar
  2. Color Coding: Use green for completed campaigns, orange for in-progress, and gray for locked
  3. Actionable Buttons: Include “Claim Reward” for completed campaigns or “Learn More” for ongoing ones

Get Campaigns Configurations API

Fetch all available reward campaigns

Get Customer Campaigns Progress API

Show customer progress for reward campaigns

Build Your Own UI

Back to Build Your Own UI overview