Gameball Developers Guide
v3.0
v3.0
  • Introduction
  • What's New in V3.0
  • Installing Gameball
    • Web
      • Show Gameball Customer Widget
      • Track Customer Events
      • Track Orders & Cashback Reward
      • Integrate Redemption
      • Track Referrals
      • Go-Live Checklist
    • iOS
      • Getting Started
      • Initialize Gameball Customer Profile
      • Track Customer Events
      • Track Orders & Cashback Reward
      • Integrate Redemption
      • Track Referrals
      • Push Notifications
      • Go-Live Checklist
    • Android
      • Getting Started
      • Initialize Gameball SDK
      • Initialize Gameball Customer Profile
      • Track Customer Events
      • Track Referrals
      • Push Notifications
      • Go-Live Checklist
    • React Native
      • Getting Started
      • Initialize Gameball Customer Profile
      • Track Customer Events
      • Track Orders & Cashback Reward
      • Integrate Redemption
      • Track Referrals
      • Push Notifications
      • Go-Live Checklist
      • Migration from v1 to v2
    • Flutter
      • Getting Started
      • Initialize Gameball SDK
      • Initialize Gameball Customer Profile
      • Track Customer Events
      • Track Referrals
      • Go-Live Checklist
    • Generic Mobile App
      • Initialize Gameball Customer Profile
      • Track Customer Events
      • Track Orders & Cashback Reward
      • Integrate Redemption
      • Track Referrals
      • Push Notifications
    • Retail & Modern POS
      • Initialize Gameball Customer Profile
      • Track Orders & Cashback Reward
      • Track Refunds
      • Enable Redemption
        • Prepare POS for Redemption
        • Using Virtual ID
          • Using Virtual Card
  • REST API
    • Overview
      • Server-Side SDKs
    • Authentication
    • API Reference
      • Customer
      • Event
      • Transactions
      • Order
      • Coupons
      • Leaderboard 👑
      • Notifications 👑
      • Configurations 👑
      • Batches 👑
        • Batch Operations Data
      • OTP
      • Partner 🤝
        • Client 🤝
        • Redemption Rule 🤝
        • Cashback Rule 🤝
    • Webhooks
      • Notifications Webhook
      • Customer Profile Webhook
    • Errors
    • Object Reference
  • Tutorials
    • Build Custom UI Elements 👑
      • Display Reward Campaign Progress
      • Show VIP Tiers
      • Show Customer Points Balance
      • Build Leaderboards
      • Show Notifications Inbox
      • Adapt UI to Configurations
      • Advanced UI Techniques
        • Increase Sales with Cashback UI Elements
        • Derive Engagement with Rewards Campaigns UI Elements
    • Tracking Customer Events
    • Build your Own Notification System
    • Checkout Integration Example
    • Redemption Integration Options
      • Redeem with coupon system
        • Integrate your coupon system
          • Example using e-commerce platform(WooCommerce)
          • Example using a custom coupon system
        • Build couponing experience
          • Using Gameball widget
          • Build custom experience
            • Showing customers available points
            • Allowing customers to create coupons
            • Apply the discount code to your cart
        • Coupon integration reference
      • Redeem with direct debt
        • Get customers points balance
        • Redeem customer points
  • Third Party Integrations
    • Segment Integration
Powered by GitBook
On this page
  • 1. Setting Up the Rewards Campaign
  • 2. Using the Customer Progress API
  • 3. Showing all rewards campaigns progress on your platform
  1. Tutorials
  2. Build Custom UI Elements 👑
  3. Advanced UI Techniques

Derive Engagement with Rewards Campaigns UI Elements

PreviousIncrease Sales with Cashback UI ElementsNextTracking Customer Events

Last updated 1 year ago

As businesses look for new ways to engage with their customers, loyalty programs have become an increasingly popular tool for incentivizing customer behavior and building strong relationships. And when it comes to loyalty programs, few platforms are as robust and effective as Gameball.

With Gameball, businesses can easily create customized rewards campaigns and rewards that encourage customers to engage with their brand and make repeated purchases. And by integrating Gameball into your platform, you can create a seamless loyalty experience that keeps customers coming back for more.

In this article, we'll explore a scenario where you want to motivate your customers to complete their profile details on your platform. We will create a rewards campaign that is linked to an event which you will send once the customer completes his profile. Once gameball receives this event, the customer will be rewarded the rewards campaign automatically.

1. Setting Up the Rewards Campaign

We will start by creating the event on Gameball. log in to the Gameball dashboard and set up an event to be sent when a customer completes their profile. This event will be used to trigger the rewarding of points or coupons based on your rewards campaign configuration. You can visit this to add the event, let's assume the event was named profile_completed.

You will need to configure your backend to send the profile_completed event when a customer completes his profile on your platform. You can check this for more details on how to send and track your customers actions on your platform.

After creating the event, you can create a new rewards campaign called "Complete Your Profile.". Please follow this on how to create a custom-event rewards campaign.

Sample rewards campaign trigger configuration

After this configuration, if you send profile_completed through the API, the customer will be rewarded with the Profile Completed rewards campaign.

2. Using the Customer Progress API

With the rewards campaign and event set up, you can now use the Customer Progress API to track whether a customer has completed their profile. The Customer Progress API allows the client to query a customer's progress towards a particular rewards campaign or set of rewards campaigns, giving them real-time insights into the customer's behavior and motivations.

If the Customer Progress API indicates that the customer has not yet completed the "Complete Your Profile" rewards campaign, the client can use this information to motivate the customer to finish the rewards campaign. For example, they might display a pop-up message or banner on their application that encourages the customer to complete their profile in exchange for points or rewards.

By using the Customer Progress API in this way, the client can create a more personalized and engaging loyalty experience for their customers. And by incentivizing behavior that aligns with their business goals, they can drive increased customer engagement and loyalty over time.

https://api.gameball.co/api/v3.0/integrations/player/{playerUnqiueId}/progress/challenge/{handle}

Make sure to provide both of the API key and Secret key in the request header

You will replace the {playerUniqueId} parameter with the current logged in customer's unique id, and the {handle} can be replaced with the rewards campaign id, you can find it right here:

The API response would contain A single object array of ChallengesProgress object. Where the rewards campaign progress contains many useful information as achievedCount attribute which states the number of times the customer was rewarded the rewards campaign.

{
    "challengesProgress": [
        {
            "completionPercentage": 0.0,
            "achievedCount": 1,
            "challengeConfig": {
                "id": 5196,
                "name": "Complete your profile",
                "description": "Unlock this challenge by completing all of your profile information",
                "isRepeatable": false,
                "maxAchievement": 1,
                "type": "EventBased",
                "visibility": "Always Visible",
                "rewards": [
                    {
                        "rankReward": 0,
                        "walletReward": 5,
                        "couponReward": null
                    }
                ]
            }
        }
    ]
}

3. Showing all rewards campaigns progress on your platform

https://api.gameball.co/api/v3.0/integrations/player/{playerUnqiueId}/progress

The response will result in a summarized view of the customer's progress over various gameball programs as VIP tiers and points. For the scope of this tutorial we will only focus on challengesProgress object.

{
    "challengesProgress": [
        {
            "completionPercentage": 0.0,
            "achievedCount": 1,
            "challengeConfig": {
                "id": 1234,
                "name": "Bags lover",
                "description": "Place an order with an item of the bags collection in your cart",
                "rewards": [
                    {
                        "rankReward": 0,
                        "walletReward": 100,
                        "couponReward": null
                    }
                ],
                "isRepeatable": false,
                "maxAchievement": 1,
                "icon": "https://cdn.gameball.co/uploads/gb-library/general/shopping-10.png"
            }
        },
        {
            "completionPercentage": 0.0,
            "achievedCount": 2,
            "challengeConfig": {
                "id": 1235,
                "name": "The shopper",
                "description": "Place an order and win the badge!",
                "rewards": [
                    {
                        "rankReward": 0,
                        "walletReward": 50,
                        "couponReward": null
                    }
                ],
                "isRepeatable": true,
                "maxAchievement": -1,
                "icon": "https://cdn.gameball.co/uploads/gb-library/general/cashback.png"
            }
        },
        {
            "completionPercentage": 66.0,
            "achievedCount": 0,
            "challengeConfig": {
                "id": 1236,
                "name": "HaTrick!",
                "description": "Place 3 orders to earn this badge!",
                "rewards": [
                    {
                        "rankReward": 0,
                        "walletReward": 300,
                        "couponReward": null
                    }
                ],
                "isRepeatable": false,
                "maxAchievement": 1,
                "icon": "https://cdn.gameball.co/uploads/gb-library/general/shopping-8.png"
            }
        }
    ]
}

The challengesResponse will be an array of all of your rewards campaigns, and a summary of the customer's progress on each rewards campaign.

Attribute

Description

completionPercentage

A value between 0 and 1 indicating the current customer's progress in the rewards campaign if it requires multiple actions to be achieved.

achievedCount

The number of times the customer has earned the rewards campaign

challengeConfig

Here is an example using HTML and CSS on how to use the progress API to render your rewards campaigns on your own platform:

<!DOCTYPE html>
<html>


<head>
    <meta charset="utf-8">
    <title>Gameball Rewards Campaign </title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .challenge {
            display: inline-block;
            margin-right: 25px;
            margin-top: 15px;
            text-align: center;
        }


        .challenge-icon {
            border-radius: 50%;
            width: 50px;
            height: 50px;
            background-color: #f2f2f2;
        }


        .challenge-text {
            font-size: 12px;
            margin-top: 5px;
        }


        .challenge-count {
            font-size: 14px;
            font-weight: bold;
            margin-top: 5px;
        }
    </style>
</head>


<body>
    <h1>Gameball Challenges</h1>
    <div id="challenges"></div>


    <script>
        $(document).ready(function () {
            var playerUniqueId = "player1234"; // Replace with the player unique Id
            var apiKey = "<api-key>"; // Replace with your actual API key


            $.ajax({
                url: "https://api.gameball.co/api/v3.0/integrations/player/" + playerUniqueId + "/progress",
                type: "GET",
                dataType: "json",
                headers: {
                    "APIkEY": apiKey
                },
                success: function (response) {
                    if (response.challengesProgress && response.challengesProgress.length > 0) {
                        var challengesHtml = "";


                        $.each(response.challengesProgress, function (index, challenge) {
                            console.log(challenge);
                            var iconUrl = challenge.challengeConfig.icon


                            challengesHtml += '<div class="challenge">';
                            challengesHtml += `<img class="challenge-icon" src="${iconUrl}"></img>`;
                            challengesHtml += '<div class="challenge-text">' + challenge.challengeConfig.name + '</div>';
                            challengesHtml += '<div class="challenge-count">' + challenge.achievedCount + '</div>';
                            challengesHtml += '</div>';
                        });


                        $("#challenges").html(challengesHtml);
                    } else {
                        $("#challenges").html("No challenges found.");
                    }
                },
                error: function (xhr, status, error) {
                    console.log(xhr.responseText);
                }
            });
        });
    </script>
</body>


</html>

To get the rewards campaign progress for a specific customer , you’ll need to send a GET request to the . The endpoint url is:

In your own UI, you can trigger a popup for example if you detect that for this specific rewards campaign, the current customer has achievedCount of 0, This means that this customer didn’t achieve this rewards campaign yet, so you can motivate them to achieve this rewards campaign to earn its rewards. The rewards object will contain the details of the rewards campaign reward. Refer to the for more information.

Using the you can display rewards campaigns to customers directly on your platform. You can show them to motivate customers and show them all the rewards campaigns they have already achieved and also what they can achieve.

you’ll need to send a GET request to the . The endpoint url is:

Extra details about the rewards campaign configurations. You can find further documentation .

Gameball API progress endpoint
API Reference
Gameball API progress endpoint
here
link
tutorial
tutorial
progress API,