Appearance
Achievement Page Overview
This document breaks down the functions and purposes of each component in the Achievement creation page.
Display
Name
- This is the display name of the achievement.
Description
This optional field lets you override the default goal label with a custom summary of the achievement.
When to use it:
- When the achievement has multiple goals, and you want to provide a general summary instead of listing each goal.
- When you want to hide the goal label from users and instead show a custom description.
Tip: For most single-goal achievements, you can leave this field empty and let the goal label speak for itself.
Goals
A goal is the specific action or set of actions a user needs to complete to trigger an unlock of an achievement. All achievements have at least one goal. A goal defines what the user must do to unlock the achievement and must be something measurable—for example: buying a product, shopping from a certain category, or shopping at a certain time of day.
Each achievement requires at least one goal to be valid, but you can add multiple goals. All goals must be fulfilled for the achievement to be unlocked. Users will see progress for each achievement: completed goals will be crossed out, and progress will be visible on the achievement page.
What Can Be a Goal?
Anything measurable can be turned into a goal. For example:
- Writing 10 reviews
- Posting a picture to a board
- Buying a specific product
- Visiting a page, completing a survey, or inviting friends
Script type
Script type determines the type of logic that powers the achievement.
- Template Template-based logic
- Mimic Mimics another achievement's logic but replaces the goal values
- Advanced Node-based goals. This option is not available for self-serve customers.
Template
This dropdown selects which template the achievement goal uses. A template provides predefined logic that you can customize with specific goal values and types. Example: "Buy 5 products in the Electronics category" or "Write 3 reviews for movies"
Goal Label
The Goal Label is what users see as the description of the task they need to complete.
Using %p – The Progress Placeholder
You can include the special placeholder %p in your Goal Label. This automatically displays the user's progress toward the goal.
For example:
Goal Label: Write %p reviews
Will display as:
- Write 0/5 reviews
- Write 2/5 reviews
- Write 5/5 reviews (when completed)
Why You Should Use %p
- %p shows live progress, helping users understand how close they are to completing the goal.
- If you don't use %p, the label becomes static (e.g. "Write 5 reviews"), and progress like "2/5" will not be shown.
- This reduces clarity and user motivation.
- The use of %p makes it easier to create a series of achievements because you can reuse the same goal label for each achievement in the series also adding to the consistency of the achievement series.
Tip: Achievement Series & Cloning
When creating achievement series (e.g. Bronze → Silver → Gold tiers), using %p in the goal label is especially helpful:
- When cloning a tiered achievement, the label updates automatically with the new target value.
- For example, the cloned goal label "Write %p reviews" will automatically update to reflect new targets like 10 or 20.
Target value
The target value represents the threshold a user must reach to unlock the achievement. For example, if you select the template "Write X reviews" and set the target value to 5, users will need to write 5 reviews to complete the goal and unlock the achievement.
The target value is the "X" in template descriptions—it defines the specific quantity or amount required for completion.
Recommended: Always use %p in your Goal Labels unless you have a specific reason not to.
Multiple Goals
You can define multiple goals for a single achievement. For example:
- Write 5 reviews AND
- Upload a profile picture
Each goal can have its own template, label, and target value. If you have multiple goals, the user must complete all of them to unlock the achievement.
Note: Use description in display to summarize multiple goals.
Templates
Templates are pre-built goal types created for easy setup and reuse. They define the logic behind how an action is tracked (e.g., counting product purchases, post submissions, etc.). By selecting a template, you ensure consistency and avoid building logic from scratch.
Target Value
A numeric value that determines when the goal is completed.
- If a user must write 5 reviews, the Target Value is set to
5. - When the tracked value reaches this number, the goal is marked complete.
Media
This section allows the user to upload or generate an image for the achievement badge. The image goes through a visual pipeline made up of the following stages:
Raw → Cutout → Sticker → Final (compressed)
You can upload an image at any stage of this pipeline. The system will automatically apply the remaining steps from the point of upload onward.
Raw Upload
- Upload the original image file.
Stages
Depending on what stage you upload the image to, the image will go through different stages of processing.
| Upload To | What Happens | Example |
|---|---|---|
| Raw | Image is processed through Cutout, then Sticker, then Compression. | Upload a square logo → System removes background → Adds border sticker → Compresses for final use. |
| Cutout | Skips Raw. Goes through Sticker and Compression only. | Upload an image with background already removed → Adds border → Compresses. |
| Sticker | Skips Raw and Cutout. Only applies Compression. | Upload an already prepared sticker with border → Only compresses to final format. |
| Final/Icon | Typically auto-generated, not uploaded directly. These are outputs from previous stages. | Used internally or for display icons. |
Examples
Example 1: Unedited Picture on white background
- Upload a raw PNG of a trophy with background → System removes background (Cutout), adds sticker border, compresses.
Example 2: Unedited Picture on transparent background
- Upload to Cutout → System adds sticker styling (like shadows or borders), then compresses.
Example 3: Already in final form or no need to add sticker outline
- Upload to Sticker → System just compresses it.
Example 4: Final image that already is compressed
- Upload to Final the . This is not recommeded and should be used with caution as it may lead to large unoptimized images in the frontend.
Prompt
- (Optional) Use AI prompt to generate an image.
Settings
Status
The current visibility/state of the achievement:
| Status | Description |
|---|---|
| Active | Shown and trackable by users |
| Secret | Hidden from users unless triggered |
| Legacy | No longer active, but still visible |
| Disabled | Inactive and not visible |
| Archived | Permanently stored and unused |
Tier
- Designates the reward tier (e.g., Bronze, Silver, Gold).
- Affects display priority or grouping.
Parent
- Used in tiered series of achievements.
- Example: Silver is the child of Bronze.
Read more about tiered parent/child structure in the creating achievement series section.
Order
- Defines the position in achievement lists.
- Higher numbers push the achievement to the top.
Visibility
Toggle for sensitive or hidden achievements.
Visible for everyone: Everybody can see this achievmentHide from other customers: Only the customer that has unlocked the achivement can see it in their inventory.