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 create and update a Progress Bar using the Progress Bar API.

​
Design a Progress Bar

Before creating a Progress Bar, you need to design it:
  1. Go to the Offers Design section and click Add New Design.
  2. Configure the Offer Settings:
    • Use the dropdown in the Type field to select Progress Bar.
    • Enter a design Name and External ID.
  3. Under Progress Bar Frame, set the Background Opacity and Frame Radius.
  4. Under Progress Bar Design, configure the following:
    • Bar Fill Color
    • Background Color
    • Border Color
    • Border Radius
    • Border Width
    • Upload an image for the Progress Bar.
    If you provide an external image URL, Appcharge saves and uses the URL as-is. Appcharge doesn’t download, copy, upload, or host the image. If you use an external image URL, host the image on your own infrastructure and keep it available at the provided URL.We recommend uploading image files instead of using external URLs when possible. Appcharge hosts uploaded files on its CDN.
    • Points Ribbon Color, which appears on all offers that contribute toward the Progress Bar.
  5. 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 need to create it:
  1. Go to the Progress Bar section and click Create New Progress Bar.
  2. In the Settings tab, provide the Bar External ID, Bar Name, and select an existing Bar Offer Design.
  3. Under Segments, you can assign specific player segments to the Progress Bar.
  4. In the Configuration tab, create your missions:
    • In the Bar Size field, enter the number of points required to complete the mission.
    • Select the Product and Amount representing the reward players receive upon completing the mission.
    • Click Add to include additional missions.
  5. In the Schedule tab, choose whether to keep the Progress Bar as a permanent offer in your web store or display it for a limited time:
    • Select the date range and time for the Progress Bar to be active.
    • Add any relevant notes.
    • Click Add Appearance.
  6. Click Save to complete the Progress Bar creation process.

​
Edit a Progress Bar

To edit an existing Progress Bar:
  1. Go to the Progress Bar section 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 remain completed, and players keep any rewards they already received.Changes apply only to missions the player hasn’t yet reached, and rewards aren’t granted retroactively.Learn more about how configuration changes affect player progress.

​
Duplicate a Progress Bar

To duplicate a Progress Bar:
  1. Go to the Progress Bar section 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. Go to the Progress Bar section 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. Go to the Progress Bar section 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. Go to the Progress Bar section 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.