How to copy and create a Milestone

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:

1. Create the "Activated" Screen: This is the hidden screen that applies a tag to the user.

2. Create the "Initial" Milestone Screen: This is the screen the user sees and interacts with to claim the milestone.

3. Add the New Milestone to the Main List: Making the new milestone visible and accessible to users.

4. 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.

1. Navigate to Milestones in your app's control panel.

2. Click on an existing milestone to use as a template (e.g., "10 Year Anniversary").

3. 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.

4. Once on the activated screen, click the three-dot menu (...) in the top right and select Duplicate Plugin.

5. 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").

6. Click on the new "Activated" screen to edit it. Go to the Tagging section at the top.

7. Remove the old tag (e.g., "10 years") by clicking the 'X' next to it.

8. 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.

1. Navigate back to the initial screen of the milestone you originally copied (the one before you clicked "Click to Claim").

2. Click the three-dot menu (...) and select Duplicate Plugin.

3. Rename this new plugin to match your new milestone (e.g., "Got a Job Milestone").

4. 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.").

5. 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.

1. Navigate to the main Milestones page where all milestones are listed.

2. On the right-hand side, click Add Action.

3. 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.

4. Upload the same image you used for the milestone to serve as its icon in the list.

5. 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.

1. Navigate to the User Directory feature.

2. Click the Add Badge button.

3. 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").

4. 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:

1. Open the app on a physical mobile device (phone or tablet).

2. Log in as a user.

3. Navigate to the Milestones section and complete the steps to claim your new milestone.

4. Check your user profile to confirm that the new badge has been awarded.