Rewards

View live demo

Need to provide Rewards on your frontend?

The Rewards module gives you a plethora of options to build a Rewards program for you front end website. With simple API’s allowing you to add users and then rewards to those users or give them points to reach “tiered” rewards. The Rewards backend will allow you to easily add/remove/edit the items in your rewards program on the fly.

Check out the example below to get an idea of something you can build:

Profile Picture
Jane Smith
Salesperson
18 Points
Add points for demo

Rewards

Coca-cola

The Whisky Club

2 points to go

Bose Headphones

12 points to go

Galaxy Fold 3

22 points to go

Macbook Pro

How to build a simple rewards frontend

Now this example is assuming you have already have a user log in/log out system setup, you can see our Login & User Management module for the API’s to achieve that. With that out the way I will take you through the different parts of the example above and what API’s are used to get you started.

Step one: User token

A users token or “Bearer Token” will be needed to get your users unique rewards data, so we first will need to make sure you are adding your users to the Rewards module. For that you will need the “Sign up” API:

POST https://example.mobiconnect.net/api/auth/signup
Content-Type: "application/json"
Payload:
{
    "email":"example@test.com",
    "password":"Pa$$word123",
    "firstName":"jane",
    "lastName":"smith"
}

This will give you a response of “200 ok” and “User registered successfully!”

Once a user is in Mobiconnect you can when they sign in use the “Sign in” API to get their user details including the “Bearer Token”.

POST https://example.mobiconnect.net/api/auth/signin
Content-Type: "application/json"
Payload:
{
    "username":"example@test.com",
    "password":"Pa$$word123"
}

The Response:

Status: 200 OK
{
    "token": "eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJqb3NoX2xhd3NvbjZAaG90bWFpbC5jb20iLCJpYXQiOjE2MzMwNDg2ODAsImV4cCI6MTYzMzkxMjY4MH0.jl4ZQOOJSOAAQ7WaX2kgjrbZit5oCREsJfSwGBEEGyhgbqoe38OYbNl6zFw77IIePFmVJeLvINjJ7HMy1CX8Xw",
    "type": "Bearer",
    "email": "example@test.com",
    "password": "$2a$10$s2qwZtBJWbOsterYJJ41FOhRS7qKoB0IViXCgFJ5cAvpNPvK4AnZG",
    "firstName": "Jane",
    "lastName": "Smith",
    "userId": 238,
    "userName": "example@test.com",
    "departmentId": null,
    "departmentName": null,
    "departmentDescrition": null,
    "screens": {},
    "tokenExpiry": 1633912680860,
    "roles": [
        "ROLE_APPUSER"
    ],
    "tokenType": "Bearer",
    "accessToken": "eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJqb3NoX2xhd3NvbjZAaG90bWFpbC5jb20iLCJpYXQiOjE2MzMwNDg2ODAsImV4cCI6MTYzMzkxMjY4MH0.jl4ZQOOJSOAAQ7WaX2kgjrbZit5oCREsJfSwGBEEGyhgbqoe38OYbNl6zFw77IIePFmVJeLvINjJ7HMy1CX8Xw"
}

Now we have the token we can move on to step two

Step Two: Adding rewards to a user

There are a few types of rewards a user can have:

  • Voucher Code
  • Points
  • Instant
  • Rules

The Voucher Code type can be used to give a specific reward or points to a user, in this example we have used this type to add points to a user.

Point based rewards are “unlocked” by a user when they redeem a certain amount of Points which in this example we have used as the Physical rewards.

The two reward types not used in this example but which are still very useful are instant rewards, which you can use the “Random Reward” API and a users Bearer Token to run a randomiser in the Rewards module giving a user a chance to win a reward with the instant type or a “better luck next time” style response. The other type is Rule based which you can use custom rules setup in the backend to apply rewards on specific criteria. Check out our API documentation for more info.

Moving on with the example, we have to first create the rewards in the Mobiconnect backend. For the Purposes of this example we are creating 6 Rewards, 5 using the Point based type which will act as our physical rewards unlocked at Point milestones and one Voucher Code type so we can add points to our user.

Next, to add points to our user we need to use the “Assign coupon for user” API which using the users bearer token and the “code” Param will assign the user this reward which we gave a reward value of One point to.

POST https://example.mobiconnect.net/api/assignCouponForUser?code=zKqDzL7LPhYTTV2O
Content-Type: "application/json"
Bearer: eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJqb3NoX2xhd3NvbjZAaG90bWFpbC5jb20iLCJpYXQiOjE2MzMwNDg2ODAsImV4cCI6MTYzMzkxMjY4MH0.jl4ZQOOJSOAAQ7WaX2kgjrbZit5oCREsJfSwGBEEGyhgbqoe38OYbNl6zFw77IIePFmVJeLvINjJ7HMy1CX8Xw

You will get a “200 ok” response and your user will now have one point.

Note: For this example I have unlocked the amount of times a “voucher code” can be redeemed however usually a user can only redeem a Voucher code once. This means if you wanted to create a program where a user needs to collect points in order to get prizes you will create multiple of the Point rewards and a user will have to collect each one. This protects from a user fraudulently collect one code 50 times.

Step Three: Displaying Rewards

Rewards in Mobiconnect can have many fields including images, descriptions, terms and conditions and many more. Once setup in the backend you can call all the reward information using the “Get all reward” API this will return all reward info, however it can be filtered using Params if need be. For the purpose of this example we only want to display the rewards with the Points type so I will need to filter the API.

GET https://example/api/getAllRewards?rewardType=POINTS&pageSize=150&pageNo=0&sortBy=id
Content-Type: "application/json"

Our response will be (depending on how many rewards you have loaded) quite long as it will list all the details of all rewards of that type, to that end i have only displayed a snippet of one reward as the response example below to show you the structure:

Status:200 OK
{
        "createdDate": 1626609570000,
        "lastModifiedDate": 1626609570000,
        "enabled": true,
        "deleted": false,
        "createdById": 241,
        "createdBy": null,
        "id": 230,
        "rewardName": "Example Name",
        "subDescription": "Example",
        "description": "This is a description",
        "logoImage": "https://imageurl.com/123.png",
        "image": "https://imageurl.com/123.png",
        "qrImage": "",
        "uploadCode": "QRCODE",
        "code": null,
        "redemptionType": "POINTS",
        "imageUrl": null,
        "points": 1,
        "limit": 500,
        "isFeatured": true,
        "startDate": 1626609491000,
        "endDate": 1630411080000,
        "isGeofence": true,
        "isRandom": false,
        "merchantId": 10,
        "redeemStartDate": 1626609491000,
        "redeemEndDate": 1630332000000,
        "rewardsNotes": "",
        "isCsv": false,
        "ruleId": null,
        "merchantName": "Mobi Footys",
        "ruleDescription": null,
        "count": 6,
        "segmentId": null,
        "logoImageId": null,
        "qrCodeImageId": null,
        "termsAndConditions": null,
        "priceType": "VOUCHER",
        "pointsAssigned": null,
        "redeemTime": "No Limit",
        "redeemDuration": null,
        "tags": "",
        "endPoint": null,
        "merchantDto": {
            "createdDate": 1625303657000,
            "lastModifiedDate": 1625303657000,
            "enabled": true,
            "deleted": false,
            "createdById": 37,
            "createdBy": null,
            "id": 10,
            "merchantName": "",
            "merchantLogo": "",
            "merchantCode": "",
            "latitude": -33.87,
            "longitude": 151.21,
            "imageId": null,
            "count": null
        },
        "ruleDto": {
            "createdDate": null,
            "lastModifiedDate": null,
            "enabled": null,
            "deleted": false,
            "createdById": null,
            "createdBy": null,
            "id": null,
            "ruleDescription": null,
            "count": null
        },
        "segmentDto": {
            "id": null,
            "version": null,
            "name": null,
            "address": null,
            "location": null,
            "beacon": null,
            "beaconId": null,
            "radius": null,
            "minimumAge": null,
            "maximumAge": null,
            "os": null,
            "active": null,
            "deviceCount": null,
            "userCount": null,
            "proximity": "UNKNOWN",
            "notificationUsersId": [],
            "imageDto": {
                "createdDate": null,
                "lastModifiedDate": null,
                "enabled": true,
                "deleted": false,
                "createdById": null,
                "createdBy": null,
                "id": null,
                "thumbnailPath": null,
                "description": null,
                "url": null,
                "inGallery": false,
                "name": null,
                "type": null,
                "path": null,
                "fileSize": null
            },
            "locationPinImageId": null
        },
        "luckyDrawEligibleUsersDto": {
            "createdDate": null,
            "lastModifiedDate": null,
            "enabled": true,
            "deleted": false,
            "createdById": null,
            "createdBy": null,
            "id": null,
            "rewardId": null,
            "userId": null,
            "userName": null,
            "winner": false
        },
        "coupon": null,
        "luckyDrawId": null,
        "sendPushNotification": false,
        "sendEmail": false,
        "sendSMS": false,
        "templateId": null,
        "sendRedeemPushNotification": false,
        "sendRedeemEmail": true,
        "sendRedeemSMS": false,
        "redeemTemplateId": null,
        "rewardEDM": null,
        "redeemEDM": "SENDGRID",
        "rewardCount": 5,
        "latitude": null,
        "longitude": null
    }

As you can see a lot of info is available above however for this example we only need image, logo and name.

Summary

So there you have it using those 5 API’s you can create a scalable rewards system for your users and build on it by using other types of rewards we provide as well as using various types of redemption mechanics including timers and with a SendGrid integration emailing codes and reward details automatically.

Step Four: Reward details for your user

Finally to complete the loop we will need to get what rewards our user has, to do this we just need the users token and the “User Reward” API:

Next, to add points to our user we need to use the “Assign coupon for user” API which using the users bearer token and the “code” Param will assign the user this reward which we gave a reward value of One point to.

GET https://example.mobiconnect.net/api/getAllRewardsOfUser
Content-Type: "application/json"
Bearer: eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJqb3NoX2xhd3NvbjZAaG90bWFpbC5jb20iLCJpYXQiOjE2MzMwNDg2ODAsImV4cCI6MTYzMzkxMjY4MH0.jl4ZQOOJSOAAQ7WaX2kgjrbZit5oCREsJfSwGBEEGyhgbqoe38OYbNl6zFw77IIePFmVJeLvINjJ7HMy1CX8Xw

The response will contain not only a the sum of points a user has but all the rewards and details of each reward:

Status: 200 OK
{
    "createdDate": null,
    "lastModifiedDate": null,
    "enabled": true,
    "deleted": false,
    "createdById": null,
    "createdBy": null,
    "rewardsCouponsDtos": [
        <<<Reward info will display here>>>
    ],
    "points": [],
    "sumOfPoints": 18
}