Preview your app on your phone with the Previewer app

By the end of this tutorial you’ll have the WP Mobile App Manager Previewer installed on your phone or tablet, with your own site’s content loaded inside it. You’ll see a working version of your mobile app — the home screen layout, navigation tabs, colors, and live listings you configured earlier — running on a real device, no app-store submission required.

It’s the fastest way to see your app come to life. Change something on your website, and that change flows straight into the Previewer — so you can keep tweaking and re-checking on your phone as you go.


Prerequisites

Before you start, make sure you have:

  • A phone or tablet — either iOS or Android. The Previewer is available on both the App Store and Google Play.
  • A camera or QR scanner on that device. Most modern phones scan QR codes straight from the built-in camera app.
  • The App Setup Wizard open in your WordPress admin, on a computer or second screen, so you can see the QR codes while you scan them with your phone.
  • A supported content plugin active. The wizard’s full step list (including the previewer step) appears once a supported plugin such as GeoDirectory is installed and active. If you only see the Welcome step, install and activate your content plugin first.

It helps to have already worked through the earlier wizard steps (Home Screen, App Navigation, Colors and Branding) — though it’s not required. The Previewer shows whatever you’ve configured so far, even if that’s just the defaults.


Steps

1. Open the App Previewer step in the wizard

In your WordPress admin, open the App Setup Wizard and step through until you reach the App Previewer step (its tab is labeled View on the Preview App!). Or jump straight there from the Colors and Branding step with the Next Step: Get the App Previewer → button.

You’ll see a short intro here — See Your App on Your Phone — followed by two numbered cards side by side, 1. Install the Previewer app and 2. Load your app in it, each with its own QR code. The two codes do different jobs, so take them one at a time.

2. Scan the first QR code to install the Previewer

The first QR code sits under 1. Install the Previewer app, with the hint Scan with your phone camera to download it from the App Store or Google Play.

Point your phone’s camera at it. Your phone will offer to open a link that takes you to the WP Mobile App Manager Previewer in the App Store (iOS) or on Google Play (Android). Install it just like you would any other app.

No luck with the camera? Search your device’s app store directly for WP Mobile App Manager Previewer and install it from there.

3. Open the Previewer app

Once the install finishes, open the Previewer on your device. It launches ready to load a site — it just doesn’t know which site is yours yet. That’s what the second QR code is for.

4. Scan the second QR code to load your content

Back in the wizard, find the second QR code, under 2. Load your app in it (Scan with your phone camera — your site’s content opens live inside the Previewer.).

Scan this one with your phone (using your camera, or the scanning option inside the Previewer if it offers one). This code is tied to your account, so scanning it tells the Previewer to pull your site’s data — it loads your content and renders your mobile app live on the device.

Order matters here: the first code installs the app, the second loads your content into it. Scan the second code first, and your phone won’t have anywhere to put what it finds.

5. Explore your app on the device

You should now be looking at your app, running on your own phone. Try out the things you set up earlier in the wizard:

  • The home screen layout you chose.
  • The navigation tabs along the bottom (Home is always present; others such as Deals, Map, Events, and Favorites appear based on what you configured and which plugins are active).
  • Your brand colors on headers, highlights, and buttons.
  • Your live listings — if you had GeoDirectory listings on your site, they appear here in the content feed.

If something looks off, head back to the relevant wizard step (or to MAM → App Settings Manager), make your change, and refresh the Previewer. The app reads live from your site, so edits show up without a new install.


What’s next

You now have a real, on-device preview of your app — and a fast loop for refining it. From here:

  • Keep customizing in MAM → App Settings Manager — enable features like GeoFilters, reviews, tag clouds, and event tools, then re-check them in the Previewer.
  • Refine your branding — adjust colors, icons, and layouts any time, and watch the changes appear on your phone.
  • Publish your app — when you’re happy with what you see in the Previewer, the Publish App menu starts the process of submitting your app to the App Store and Google Play.

Head to the final wizard step, Next Steps and Resources, for pointers to all of these.

Was this article helpful?
Contents

    Need Support?

    Can't find the answer you're looking for? Don't worry we're here to help!