Actions and links
Decide what a button does when pressed. Run your own code, move between screens, close the screen, open a link, or restore purchases.
Use this page when you add a button and need it to do something: start your sign-up, ask for a browser permission, go to the next step of a flow, close, or open your terms.
Set a button's action
Add a Button layer, or select one. A button is a frame (a stack) with your label inside it. Change the label by selecting the Text layer inside.
In the Design panel, find the Action section and open Type.
Pick an action and fill in the fields it shows.
The Type menu has eight options.
| Type | What happens when pressed | Extra fields |
|---|---|---|
| Run your code | Your site receives the button's Action ID in onAction and decides what happens. | Action ID |
| Go to another screen | The next screen of a flow opens in the same window. | Screen |
| Back to previous screen | Returns to the screen before this one. | None |
| Close the screen | Closes the screen. | None |
| Open Terms of Service | Opens a link. | URL, Open Method |
| Open Privacy Policy | Opens a link. | URL, Open Method |
| Open Custom URL | Opens a link. | URL, Open Method |
| Restore Purchases | Asks your site to restore the visitor's purchases. | None |
A new button starts as Close the screen, with the label "Button". If an imported button uses an action the editor does not offer, the menu shows "Not supported yet" and the editor leaves the button as it is.
Run your code
Use this for anything Miniwall should not decide itself: "Get started", "Turn on notifications", "Contact sales", "Update card". Onboarding screens, permission prompts and surveys are built from these buttons.
Action ID is the name your site listens for. It is required.
- Start with a lowercase letter, then use lowercase letters, numbers,
_,.and-. Up to 48 characters. - The editor lowercases what you type.
- When you switch a button to Run your code, the editor suggests an ID from the label: "Get started" becomes
get_started. If it cannot make one, it usescustom_action. - The field shows "Required. Your site listens for this ID." when empty, and "Start with a letter; use lowercase letters, numbers, _ . -" when the format is wrong. Publishing is blocked until every ID is valid. See Validation.
On your site, handle the ID in onAction:
import { presentPaywall } from '@ui-kit/web';
const result = await presentPaywall({
paywall: { placement: 'welcome' },
onAction: async ({ actionId, answers }) => {
if (actionId === 'enable_notifications') {
await Notification.requestPermission();
}
// Return false to keep the screen open.
},
});
if (result.outcome === 'action') {
console.log(result.actionId, result.answers);
}With presentPaywall, the screen closes after onAction finishes unless it returns false, and the call resolves with { outcome: 'action', actionId }. With mountPaywall and the React and web component versions, the screen stays on the page and only your callback runs. If you pass no onAction to presentPaywall, the screen still closes and returns the outcome. See Callbacks.
Every press of a Run your code button is also counted in Analytics, under Button presses, by screen and Action ID.
A Run your code button is disabled until every required question on the screen is answered. See Flows and questions.
Go to another screen
Pick Go to another screen, then choose a screen from Screen. The list holds the other screens of the current project. Screens that are not published yet are marked "(not published)".
The note under the field tells you what is wrong, if anything:
| Note | Meaning |
|---|---|
| "Required. Pick the screen that comes next." | No screen chosen yet. |
| "That screen no longer exists. Pick another one." | The target was deleted. |
| "Publish NAME too: until then this does nothing on your site." | The target has no published version. |
| "Create another screen first (Screens → New screen), then link to it here." | The project has only this screen. |
| "Opens in the same window. Answers carry over, and Back returns here." | All good. |
The Web SDK swaps the next screen in place, with a short fade and no page change. It loads linked screens ahead of time so the swap is instant. It always uses the published version of the target screen.
A screen cannot link to itself. For the full picture, including answers, see Flows and questions.
Back to previous screen
Returns to the screen the visitor came from, with their answers still selected. On the first screen of a flow there is nowhere to go back to, so it closes the screen like Close the screen. A Back button is never disabled by unanswered required questions.
Close the screen
Closes the screen. On a presented screen (presentPaywall), the call resolves with { outcome: 'closed' } and onClose runs. On a mounted or embedded screen, only onClose runs.
The Web SDK adds no close button of its own. Visitors can press Escape, and click outside a popup or drawer, but add a button with Close the screen (an icon button with an X works well) so touch users can leave. Most templates already have one.
Open a link
Open Terms of Service, Open Privacy Policy and Open Custom URL all open a web address. Fill in:
| Field | What it does |
|---|---|
| URL | The address, for example https://example.com/terms. It is saved per language: it shows the language chosen in Preview language, and you can set each language's address from there or in the Translations panel. |
| Open Method | Deep Link, External Browser (the default) or In-App Browser. |
The Web SDK opens a link in a new browser tab, or hands it to your onOpenUrl function if you pass one. The Open Method setting is stored with the button, but the Web SDK does not use it. Only http, https, mailto and tel links, and paths that start with a single /, open; the SDK refuses anything else and reports it to onError. A button with an empty URL does nothing.
Restore Purchases
Pick Restore Purchases for a "Restore purchases" button. The button only shows on your site when you pass onRestore to the SDK. The editor canvas always hides it, and the panel says so: "Only shown on sites that pass onRestore to the SDK. The canvas hides it."
Return true (or nothing) from onRestore when something was restored. Return false when nothing was.
Buying: the Purchase Button
Buying has its own layer, the Purchase Button, because it works with plan cards. Its Checkout Behavior has one Type, In-App Checkout: pressing it calls your onPurchase with the package that is selected. See Packages and pricing.
Answers can navigate too
An answer in a single-choice question has When picked: Just select it, or Select it and go to another screen. The second option shows the same Screen field as a button. See Flows and questions.