Quickstart

Create your accountCopy Anchor Link

Open the dashboard and choose Create an account. Enter your email, a password of at least 8 characters, and the password again. Select Create account.

Miniwall sends you a link. Open it to confirm your email, then sign in. Details and every message you can see are in Account and sign-in.

The first time you sign in, Miniwall creates a project called My project and opens its Screens page. You can add more projects later; see Projects.

Pick a templateCopy Anchor Link

On the Screens page, the checklist's first step has a Pick a template button. You can also select New screen at any time.

The gallery opens. Browse by screen type (Paywalls, Onboarding, Permission prompts, Announcements, Feedback & ratings, Account moments), by category or by goal, or search by word. Select a card to see it larger, in Light and Dark.

In the dialog, type a Screen name and select Use template. Miniwall creates the screen as a draft and opens it in the editor. If you would rather start empty, choose the Blank card and then Create blank screen.

More on this: New screen and Template gallery.

Edit the screenCopy Anchor Link

In the editor, select any text, button, image or plan on the canvas and change it in the panel on the right. Every word, color and font in a template is editable.

The editor saves your draft by itself about two seconds after your last change. The status next to the screen name reads All changes saved when it is done. You can also press Ctrl+S (Cmd+S on a Mac) or select Save Draft.

If the screen sells something, each plan card has a package ID, for example monthly or annual. Your website will pass a price for each package ID. See Packages and pricing.

PublishCopy Anchor Link

Your website can only show published screens. Select Publish, then Publish Draft in the confirmation. A toast reads Screen published successfully.

If the button reads 1 Issue (or more) instead of Publish, the screen has a problem that blocks publishing. Select it to see the list; each item can select the layers to fix. See Validation.

Going back to the Screens page, the card for your screen shows a Published badge.

Create a placementCopy Anchor Link

A placement is a key that your website asks for, such as upgrade_button. You point the key at a screen in the dashboard, so you can change the screen later without touching your code.

Open Placements. In the Add a placement strip:

1. Type a Placement key, for example upgrade_button. Lowercase letters, numbers, _ and - only. Spaces turn into _ as you type.
2. In Shows, choose the screen you published.
3. Select Add placement.

A toast confirms with Added "upgrade_button". Your site asks for it by this key. and a Get code button.

More: Placements.

Install the SDKCopy Anchor Link

Select Get code, or open Install SDK in the sidebar. The page builds a snippet for the screen you pick in the Paywall selector, with your project's public key and your placement already filled in.

• If the page says You need a public key for the snippet to work, select Create a public key. New projects normally start with one.
• If it says that no placement shows the screen yet, select Create a placement.
• Choose the Script tag, Web component or React tab, and copy the code.

A script-tag version looks like this:

<script src="https://sdk.miniwall.app/ui-kit.iife.js"></script>
<script>
  UIKit.configure({ apiKey: 'pk_your_public_key' });

  document.querySelector('#upgrade').addEventListener('click', async () => {
    const result = await UIKit.presentPaywall({
      paywall: { placement: 'upgrade_button' },
      // Prices from your store or billing provider, keyed by package ID.
      products: {
        monthly: { price: 9.99, currency: 'USD', period: 'month' },
        annual: { price: 99, currency: 'USD', period: 'year' },
      },
      onPurchase: async ({ packageId }) => {
        // Run your own checkout for this package.
        // Return true when paid, false when the visitor cancelled.
        return startCheckout(packageId);
      },
    });
    console.log(result);
  });
</script>

startCheckout is your own function. Miniwall never handles payment. Replace the example prices with the real ones from your billing provider. Copy the exact snippet from the Install page rather than from here: it always matches your project.

More: Install SDK and the SDK guide.

See it liveCopy Anchor Link

Add the snippet to a page, open the page, and click the element that triggers it (here, a button with the id upgrade). The screen opens over your page.

Back in the dashboard, the Install page's status block turns from Waiting for your site. to Live, with a line such as "Your site is showing paywalls: 3 views in the last 7 days." On the Screens page, the checklist says Your site just showed its first screen.

Open Analytics to see views and conversions.