This guide shows how to duplicate and customize a milestone, then link it to a user badge. Test on a real device since tags don’t apply in the admin panel.
Overview
This guide provides a step-by-step process for creating a new milestone within your app. Milestones are a great way to reward users for their engagement and achievements. They work by linking a user action to a tag, which then awards a visual badge in the user's profile.
The easiest way to create a new milestone is by duplicating an existing one. This guide will walk you through that process.
The Process at a Glance
Creating a milestone involves four main parts:
-
Create the "Activated" Screen: This is the hidden screen that applies a tag to the user.
-
Create the "Initial" Milestone Screen: This is the screen the user sees and interacts with to claim the milestone.
-
Add the New Milestone to the Main List: Making the new milestone visible and accessible to users.
-
Create the User Badge: Linking the tag to a visual badge that appears on a user's profile.
Step-by-Step Instructions
Part 1: Create the "Activated" Screen
This screen is the core of the milestone's functionality. When a user lands on this page, a tag is automatically applied to their profile.
-
Navigate to Milestones in your app's control panel.
-
Click on an existing milestone to use as a template (e.g., "10 Year Anniversary").
-
On the first screen, click the "Click to Claim" button. This will take you to the "activated" screen, which is what actually awards the milestone.
-
Once on the activated screen, click the three-dot menu (...) in the top right and select Duplicate Plugin.
-
A new, cloned screen will be created. Rename it to reflect its purpose. It's helpful to add "Activated" to the end (e.g., "Got a Job Activated").
-
Click on the new "Activated" screen to edit it. Go to the Tagging section at the top.
-
Remove the old tag (e.g., "10 years") by clicking the 'X' next to it.
-
Add your new tag. Type the name for your new tag (e.g., "got a job") and click Add. This tag will now be applied to any user who visits this screen.
Part 2: Create the Initial Milestone Screen
This is the public-facing screen that users will see and click to start the process.
-
Navigate back to the initial screen of the milestone you originally copied (the one before you clicked "Click to Claim").
-
Click the three-dot menu (...) and select Duplicate Plugin.
-
Rename this new plugin to match your new milestone (e.g., "Got a Job Milestone").
-
Now, customize this screen for the user:
-
Change the Image: Click the image icon to select and insert a new image for this milestone.
-
Edit the Text: Update the descriptive text (e.g., "I agree and attest that I have gotten a job.").
-
-
Next, link the claim button to the "Activated" screen you created in Part 1.
-
Click on the "Click to Claim" button to open its settings.
-
Click the Link icon.
-
In the "Link to" section, search for and select the "Activated" screen you created earlier (e.g., "Got a Job Activated").
-
Ensure the button text is correct (e.g., "Click to Claim").
-
Click Save.
-
Part 3: Add the New Milestone to the Main List
Your milestone is created, but it needs to be added to the main list so users can find it.
-
Navigate to the main Milestones page where all milestones are listed.
-
On the right-hand side, click Add Action.
-
Search for and select the initial milestone screen you created in Part 2 (e.g., "Got a Job Milestone"). Important: Be sure to select the main milestone plugin, not the "Activated" one.
-
Upload the same image you used for the milestone to serve as its icon in the list.
-
Click Save. Your new milestone will now appear in the list.
Part 4: Create the User Badge
The final step is to create the visual badge that users receive when they get the tag.
-
Navigate to the User Directory feature.
-
Click the Add Badge button.
-
Configure the badge:
-
Badge Name: Give your badge a name (e.g., "Job Badge").
-
Badge Image: Upload the same image you've used for the milestone for consistency.
-
Required Tag(s): This is the most critical step. Click to add a tag and select the new tag you created in Part 1 (e.g., "got a job").
-
-
Click Save.
Important: Testing Your Milestone
The tag-assigning functionality does not work within the admin control panel emulator. To properly test if your milestone is working correctly, you must:
-
Open the app on a physical mobile device (phone or tablet).
-
Log in as a user.
-
Navigate to the Milestones section and complete the steps to claim your new milestone.
-
Check your user profile to confirm that the new badge has been awarded.