A usage limit popup that says what ran out and when it returns

When a free allowance runs out, be exact about it: what is used up, when it comes back, and what upgrading gives. Two buttons, upgrade or wait. Nobody is left guessing.

Use this template, free Try the live demo

Display: Popup
Where: Centered over a dimmed page
When it shows: When your code opens it
Starts from: Usage Limit Reached template

Try it. This is the real thing.

The phone runs the same open-source Web SDK your site would load, with the template exactly as it ships. Tap a button and see what your code would receive. Prices here are examples; your site passes the real ones.

The button below opens it as a popup over this page, the way it appears on a site.

Tap anything, and scroll inside the phone for the rest. Your site gets the event.

When to use it

A free account uses up its monthly credits, exports or generations.
Someone hits a seat or project cap.
When you want the limit message to be changeable without a release.

What goes on it

A headline that names what is used up.
A meter and the date it resets.
An Upgrade for more button.
A quieter Wait until it resets button.

Set it up in three steps

Start from the Usage Limit Reached template
Rename the thing that ran out, and set the numbers and reset date to match your plan. The screen is fixed text, so keep it general or open a different placement for each limit.
Give it a placement
Name it something like limit_reached. Call it where your code finds the limit, instead of showing a plain error.
Send upgrades to your checkout
The upgrade button sends upgrade_plan to your code, which opens your plans or checkout. Wait until it resets closes the screen. Miniwall does not count usage, so your code decides when the limit is hit.

The code on your site

Prices and checkout stay in your product. The screen itself comes from Miniwall, so a new version reaches your site without a release.

Open it when your code hits the limit

// generate, openPlans and the limit check are your own functions.
async function onGenerate() {
  if (usage.remaining === 0) {
    const result = await UIKit.presentPaywall({
      paywall: { placement: "limit_reached" },
      onAction: ({ actionId }) => {
        if (actionId === "upgrade_plan") openPlans();
      },
    });
    return result;
  }
  return generate();
}

Good to know

Does Miniwall count usage?: No. Your product counts credits or exports and decides when to open the screen. Miniwall counts only how many times a screen was shown.
How is this different from the upgrade popup?: The upgrade popup lists your plans. This one explains a limit first, with an exact meter and reset date, and offers a wait as a real choice.

Popup
Upgrade popup
Your plans in a popup when someone taps a locked feature or reaches a limit.
See how it works
Popup
Failed payment notice
Tell people a payment failed and what happens next, with a button to fix it.
See how it works
Slide-in
Trial ending reminder
A card in the corner that reminds people before their trial runs out.
See how it works