> ## Documentation Index
> Fetch the complete documentation index at: https://docs.gameball.co/llms.txt
> Use this file to discover all available pages before exploring further.
# Reward Campaigns
> Display active campaigns and customer progress using the Reward Campaigns and Progress APIs
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](/api-reference/configurations/program-configurations/campaigns) 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:**
```json theme={null}
{
"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
## 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](/api-reference/customers/progress/get-customer-campaigns-progress). 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:**
```json theme={null}
[
{
"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
## 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
***
## Related Resources
Fetch all available reward campaigns
Show customer progress for reward campaigns
Back to Build Your Own UI overview