Badges offer a means to grant rewards upon achieving specific objectives, whether it's reaching a designated stop, accurately answering quiz questions, or arriving at a specific location through GPS or beacon triggering.

As users engage with your app by performing actions like navigating to a screen, correctly responding to questions, or approaching a particular location, a popup notification will emerge. This notification signals the acquisition of a badge, acknowledging the successful completion of designated tasks and activities.

Users can view the badges they acquired by selecting the Profile tab, in place of the Setting tab. The “Settings” is now located on the Profile Tab. Look for the gear iconon the top right section of the screen.

How to add badges in your app:

1. Create a badge group

You can create groups as many as you want. To do this choose Content >> Badges >> Create Group >> then choose Add new badge to add a new badge to the group.

2. Fill out the badge form.

The picture below shows the windows to configure a badge. Numbers in the images refer to the functions on the window.

1. Badge name: only appears in the builder.
2. Group: drop-down menu for the badge group where your badge intends to belong.
3. Badge Page: the toggle to set up the badge visibility of your badge on the Profile tab.
4. The image of the badge: this can be taken by uploading from your PC/device or you can get it from STQRY Builder’s Media Files. Hit Save after finishing 1, 2, 3 and 4. 
5. Triggers: select a trigger for your badge. This is the action that users need to perform to earn the badge. The available trigger options include screens, quizzes, locations triggered by GPS, or locations triggered by beacons. For instance, users might need to open a screen, answer a quiz correctly, or visit a specific location to earn the badge.
6. Badge Popups (Unearned): badge popup appears when the user clicks on an unearned badge on the Profile tab. Help text: Used to provide some information to the user about how to earn this badge.
7. Start Screen: screen link to start the tour or series of challenges. Default is None. When None, the button will be omitted from the badge popup. Start Page Button Label: required only if Start Screen is set.

8. Badge Popups (Earned): badge popup appears when the badge is initially earned, or when the user clicks on an earned badge on their Badges screen.

   Heading: the congratulatory line on the badge popup.

   Message Body: provides some information to the user about the badge they just earned.

9. Reward Screen: if you would like to provide a screen link for the user to be able to navigate to after earning the badge to provide extra information or access to hidden content. Default is None. When None, the button will be omitted from the badge popup.

   Reward Page Button Label: Required only if Reward Screen is set.

For the badge image, you can use an image of any size and resolution, as long as it is square. Keep in mind that a circular mask will be applied to the image, with the circle's diameter matching the width of the square.

3. Link the badge(s) to the app

When done adding your badges, you can now link them to your app. To do this:

1. Go to the Project tab
2. Select your app.
3. On the Overview page, scroll down and add a group of badges by choosing Select Add New Badge Group.

4. Once you link a badge group, the Setting tab will be replaced with the Profile tab

Adding badges will require a new app build. For assistance, please contact your Customer Success Manager or email us at [email protected]. Happy app building!