Skip to main content
This article explains how to design, create, and manage a Progress Bar for your web store in the Publisher Dashboard. Alternatively, you can design a Progress Bar using the Progress Bar Offer Design API and create and update it via the Progress Bar API.

​
Design a Progress Bar

Before creating a Progress Bar, you need to design it:
  1. In the sidebar menu, go to Studio > Offers Design, and then click Create New Offer Design.
  2. Select Progress Bar.
  3. Complete the following sections:
    • Progress Bar
      • Progress Bar Type: Use the drop-down menu to select which progress bar type you want to create, Classic or Milestones. The preview and some fields in the Progress Bar Design section below update according to the selected type.
      • Name: Enter a descriptive name for the design.
      • External ID: Enter an ID for the design.
    • Progress Bar Frame
      • Background Color: Use the drop-down menu to select a color for the frame background. Alternatively, you can upload a background image for the frame in the Background Image field below.
      • Background Opacity: Enter a number for the background color opacity percentage. This field doesn’t apply if you have a background image.
      • Frame Radius: Enter a number for the rounding percentage of the frame radius.
      • Background Image: Upload an image for the frame background. Alternatively, you can select a background color for the frame in the Background Color field above.
    • Title
      • Title Name: Enter a name for the Progress Bar title.
      • Title Font Weight: Use the drop-down menu to select a font weight for the title, Regular, Medium, or Bold.
      • Title Font Size: Enter a number for the title’s font size.
      • Font Color: Use the drop-down menu to select a font color for the title.
    • Subtitle
      • Subtitle: Enter a name for the Progress Bar subtitle.
      • Subtitle Font Weight: Use the drop-down menu to select a font weight for the subtitle, Regular, Medium, or Bold.
      • Subtitle Font Size: Enter a number for the subtitle’s font size.
      • Font Color: Use the drop-down menu to select a font color for the subtitle.
    • Progress Bar Design
      • Font Color: Use the drop-down menu to select a font color for the text in the progress bar, such as the milestone points indicator text and the Ends In timer. This color doesn’t include the title and subtitle.
      • Bar Fill Color: Use the drop-down menu to select a color used for filling the bar as progress is made.
      • Border Color: Use the drop-down menu to select a color for the bar’s border.
      • Bar Background Color: Use the drop-down menu to select a color for the bar’s background.
      • Bar Radius: Enter a number for the rounding percentage of the bar radius.
      • Border Width: Enter a number for the width of the bar’s border.
      • Tooltip Background Color: Use the drop-down menu to select a background color for the milestone’s tooltip. The tooltip displays when a player clicks a milestone to view its rewards. Relevant only for type Milestones.
      • Accumulated Item Image: Upload an image for the accumulated item.
      • Accumulated Item Ribbon Image: Upload an image for the ribbon displayed on contributing offers showing how many accumulated items the offer contributes.
      • Header Image: Upload an image for the Progress Bar header.
      • Milestone Completed Icon Image: Upload an image for the checkmark icon displayed on a milestone when completed. Relevant only for type Milestones.
  4. Click Save in the top-right corner to finalize the design.

​
Create a Progress Bar

Currently you can only have one Progress Bar per web store.
After designing a Progress Bar, you can create the offer:
  1. In the sidebar menu, go to Offers > Progress Bar, and then click Create New Progress Bar.
  2. In the Settings tab, complete the following sections:
    • General
      • Bar External ID: Enter an ID for the Progress Bar.
      • Bar Name: Enter a name for the Progress Bar.
      • Bar Offer Design: Use the drop-down menu to select the design you want to use. Make sure you select a classic design type if you want to create a Classic progress bar, and a milestones design type if you want to create a Milestones progress bar. The Configuration tab and preview update according to the design you select.
    • Segments
      • Segment Name: Enter segment names to display the offer to specific groups of players.
  3. Go to the Configuration tab.
  4. If you selected a classic progress bar design, configure the Classic progress bar:
    • Mission 1
      • Bar Size: Enter the number of accumulated items (points) required to complete the mission. The mission size matches what players see filling the bar.
      • Product: Use the drop-down menu to select a product to add to the mission.
      • Amount: Enter a number for the product quantity.
    • Add: Click to add additional missions. The fields are the same as in Mission 1.
  5. If you selected a milestones progress bar design, configure the Milestones progress bar:
    • Milestone 1 (Final Reward)
      • Bar Size: Enter the number of accumulated items (points) required to reach the milestone. This is each milestone’s point requirement, not the full length of the visible bar because the bar displays all milestones at once.
      • Product: Use the drop-down menu to select a product to add to the milestone. This first milestone configuration represents the grand reward.
      • Product Type: Use the drop-down menu to select the product type:
        • Main: A primary product displayed prominently in the offer.
        • Sub: A secondary product displayed in a smaller layout. Sub products can appear on their own or under a Main product.
        • Web Only: Select Web Only to promote items that are available exclusively in the Web Store.
      • Amount: Enter a number for the product quantity.
    • Add milestone: Click to add additional milestones. The fields are the same as in Milestone 1.
  6. Go to the Schedule tab, and select Permanent to keep the Progress Bar as a permanent offer in your web store, or Schedule to display it for a limited time.
    • Schedule
      • Pick a date: Use the calendar modal to select the date range and time for the Progress Bar to be active, and then click Apply.
      • Notes: Add any relevant notes.
      • Add Appearance: Click to add the appearance in the web store. Repeat the schedule fields to add more appearances.
  7. Click Save to complete the Progress Bar creation process.

​
Edit a Progress Bar

To edit an existing Progress Bar:
  1. In the sidebar menu, go to Offers > Progress Bar to view your existing Progress Bars.
  2. Click the ellipsis next to the Progress Bar you want to edit, and then click Edit.
  3. Modify the Progress Bar as needed.
  4. Click Save to apply the changes.
If you update the Bar Size field after players have already earned points, Appcharge doesn’t recalculate or redistribute player progress. Completed missions or milestones remain completed, and players keep any rewards they already received.Changes apply only to missions or milestones the player hasn’t yet reached, and rewards aren’t granted retroactively.Learn more about updating required points and how configuration changes affect player progress.

​
Duplicate a Progress Bar

To duplicate a Progress Bar:
  1. In the sidebar menu, go to Offers > Progress Bar to view your existing Progress Bars.
  2. Click the ellipsis next to the Progress Bar you want to duplicate, and then click Duplicate.
  3. Edit the duplicated Progress Bar as desired.
  4. Click Save to apply the changes.

​
Deactivate a Progress Bar

To deactivate a Progress Bar:
  1. In the sidebar menu, go to Offers > Progress Bar to view your existing Progress Bars.
  2. Click the ellipsis next to the Progress Bar you want to deactivate, and then click Deactivate.
  3. The Progress Bar is now marked as Inactive and hidden from the web store.

​
Activate a Progress Bar

A new Progress Bar is active by default. You can also activate a previously deactivated one:
  1. In the sidebar menu, go to Offers > Progress Bar to view your existing Progress Bars.
  2. Click the ellipsis next to the Progress Bar you want to activate, and then click Activate.
  3. The Progress Bar now appears in the web store.

​
Delete a Progress Bar

To delete a Progress Bar:
  1. In the sidebar menu, go to Offers > Progress Bar to view your existing Progress Bars.
  2. Click the ellipsis next to the Progress Bar you want to delete, and then click Delete.
  3. The Progress Bar is permanently removed from the web store.