Button
Add a button that closes the screen, opens a link, moves to another screen, or tells your site which button was pressed.
Use a Button for anything a visitor taps that is not buying a plan: Continue, Not now, Terms, a close icon. What happens on tap is the button's action.
Add it
- Drag Button from Interactive onto the phone.
- Or hover a layer in Layers, click +, then Interactive, then Button.
A new button has the label Button, white semibold text on a blue rounded rectangle, and the action Close the screen.
Where it can go
In stacks, the header, the footer, tab content and carousel pages. It is tappable, so it cannot sit inside another button, a plan, an answer or a tab button, and it cannot contain interactive layers. Text, icons, images and stacks inside are fine. See Where components can go.
Design panel
The Action section comes first, then all the controls of a Stack for the button's look.
| Control | What it does |
|---|---|
| Type | The action, one of the choices below. |
| Action ID | Only for Run your code. The ID your site receives in onAction. Placeholder get_started. Lowercase letters, numbers, _ . -, starting with a letter, up to 48 characters. Empty or invalid shows a red message. |
| Screen | Only for Go to another screen. A menu of the other screens in the project. Unpublished ones are marked (not published). |
| URL | For the three link types. Per language. |
| Open Method | For the three link types: Deep Link, External Browser, In-App Browser. Default External Browser. |
| Type | What it does |
|---|---|
| Run your code | Reports the Action ID to your site. |
| Go to another screen | Opens the chosen screen in the same window, keeping answers. |
| Back to previous screen | Returns to the previous screen. On the first screen it closes. |
| Close the screen | Closes the screen. |
| Open Terms of Service | Opens your terms link. |
| Open Privacy Policy | Opens your privacy link. |
| Open Custom URL | Opens any link. |
| Restore Purchases | Restores purchases. Only shown on sites that pass onRestore to the SDK. |
If a screen was imported with an action the editor does not offer, Type shows Not supported yet. See Actions and links and Flows and questions.
States
Continue buttons (Run your code, Go to another screen) are dimmed on your site until required questions are answered. The editor preview keeps them clickable. A button has no When selected tab.
Dark mode and screen sizes
Set a dark fill and text color if the default blue does not suit dark mode. Use Fill width for a full-width button.
Tips and common mistakes
- A close button is a button, not an icon: put an X Icon inside a button set to Close the screen. The SDK adds no close button of its own.
- Go to another screen needs a published target, or it does nothing on your site, and publishing is blocked if no screen is picked.
- Unique Action IDs per button make Analytics easier to read.
In the JSON
The component type is button, with action and one inner stack. Run your code is action.type of workflow with triggers.on_press set to the ID. Screen links use screen: followed by the screen's ID, and screen:back for back.