Click through your pages before you build them
A pricing page can look right on its own and still lead nowhere. You find that out when you click "Choose Pro" and there is no checkout. Wirely lets you wire the pages on your canvas together and click through them before anyone builds them.
Link an element by hand
- Click the button, link, or card that should open another screen.
- In the inspector's Prototype section, pick the page it opens. You can also pick Back to previous screen, or Close overlay for an element inside an overlay.
- Choose Navigate to replace the screen, or Overlay to open the page on top of it, for a dialog or a menu.
- A navigation can be instant, dissolve, or slide left or right. An overlay always opens without a transition.
Each link is an edit like any other, so Cmd+Z undoes it.
Or ask your agent
Tell your agent to link the screens, for example "make Choose Pro open the checkout page with a slide". It calls link_element on that element and gives you the play link back. To remove a link, ask the agent to unlink it, or press Remove link in the inspector.
Play it
Press Play in the editor to open the play view. Click through the screens the way a user would. Back returns to the screen you came from, a switch shows the desktop or mobile version, and presenting fills the screen.
To step through screens with the arrow keys in a set order, ask your agent for a screen order. It saves one with set_prototype_flow, and you can change the order by asking again.
Then build it
The links are attributes on the page's HTML, so when your agent builds the pages in your codebase, it can read where each element leads. Checking a build against its design covers what happens next.