The floating preview button
Updated 17 July 2026
While you design, Kinflo keeps a real preview of your app one click away. That is the job of the floating Preview on device button, the orange-to-yellow gradient pill that hovers over the Style Manager.
Where it appears
The button lives on the Style Manager, because that is where you design your app. The Homepage Builder offers the same preview from a button in its own header. On smaller screens the pill moves to the left edge so it never collides with the mobile menu button.
What clicking it does
The button opens a modal titled Preview your app on your phone, containing:
- A QR code. Scan it with your phone's camera. It opens your app's preview page, which launches the Kinflo Preview app if you have it installed, or walks you through installing it if not.
- A note on real-time updates. Design changes you save in the dashboard appear in the app preview in real time, there is no rebuild step.
- An instant web preview link. This opens your hosted web app in the browser, no install needed. It is your real member-facing web app, though native features such as in-app purchases behave differently in a browser.
For the full walkthrough of both preview routes, see Preview your app on your phone.
When it becomes Preview Flow
The button is context-aware. On the Style Manager's Onboarding tab, where you build the screens new members see on first launch, the pill changes to Preview Flow with a play icon. Clicking it plays through your onboarding screens right there in the dashboard, welcome, sign-up steps, questions and paywall, so you can test the flow without picking up a phone.
Leave the Onboarding tab and the button returns to its usual Preview on device behaviour.
Get into the habit of pressing the preview button after every meaningful design change. The in-dashboard phone mockup is excellent for iterating, but nothing beats seeing your actual app respond on an actual device seconds after you press Save.
Troubleshooting
- The modal says preview is unavailable. Your app's workspace has not finished loading, wait a moment and reopen the modal, or refresh the page.
- The QR code will not scan. Make sure your phone camera has permission to scan codes, or open the instant web preview link instead and continue in the browser.
- Changes are not showing. Confirm you pressed Save in the Style Manager header, unsaved edits only exist in your dashboard session. Saved changes reach the preview within seconds.