How to Create Badges in the App: A Step-by-Step Guide

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.

Follow the steps below to create a badge:

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

4. Customizing and Managing Badges in the App

4.1 Customizing Badge Appearance

• You can personalize how badges appear by adjusting the badge icons and descriptions. This helps create a more engaging and thematic user experience that aligns with your app’s branding.

• Badges can be set to either visible or invisible before they are earned. To keep a badge hidden, simply open the badge settings and disable the visible option.

4.2 Badge Display

• Badges are displayed in the order they are created by default. To rearrange them, simply click on the three horizontal lines icon next to the badge, and then drag and drop the badges within the badge group in the Builder.

• By default, when badges are linked to the app, the app settings will be changed to the Profile section, where all badges will be displayed. If you prefer to hide this section, you can do so by disabling the corresponding option in the Project Overview settings.
  

• Badges can also be added as a dedicated section on any screen. To do this, simply create a screen as usual and select New Section >> Badge Section. You can choose to add either an entire badge group or individual badges, depending on your preference.

  

• As users earn badges, the associated badge group will update automatically, and a progress indicator will be displayed to show how much of the app they have explored.

Adding badges will require a new app build. For assistance, please contact your Customer Success Manager or email us at support@stqry.com. Happy app building!