Previewing Your App with Web Preview

While starting out on your STQRY Apps project, you may need to quickly view the content in order to make formatting or layout adjustments. This guide will show you how to review your app's look and functionality in real-time before going live using the Web Preview feature

How to Access Web Preview

First, make sure your project has the preview function enabled.

In your STQRY Builder, navigate to the Project Overview tab. Do you see a box with "Want to get a full launch preview?" If so, please reach out via our Live Chat to request that a support representative enable this feature.

If you see the preview option already available, select "Launch Web preview" and follow the instructions below for your browser of choice. We recommend using Google Chrome.

How to Use Preview in Different Browsers

Below are step-by-step instructions for accessing responsive viewing options in Google Chrome and Safari.

Google Chrome

After the preview opens in a new tab, you can use one of two methods to open responsive viewing options:

Option 1: Use the secondary (right) click, then select Inspect

Option 2: Navigate to View in the menu bar, then select Developer>> Developer Tools

In both options, your browser will now resemble the image below. To change between different screen sizes use the Dimensions dropdown located at the top of the screen (indicated in red below). Feel free to disregard the console on the right-hand side of the screen.

Safari

After the preview opens in a new tab, follow these instructions to enable and use responsive viewing options:

1. Open settings by selecting it in the Safari tab, then navigate to Advanced. Enable the option for Show Develop in menu bar

2. Use the Develop tab in the menu bar to select Enter Responsive Design Mode

Your browser should now appear as the following image, and you'll be presented with different device options to view the content. Change the orientation by clicking on the device.

Checking for updated content

It's vital that you develop the habit of checking for updates when previewing the app. 

To do so, navigate to the Settings tab- or Profile tab if your app has badges enabled- then use the button labeled Check For Updated Content to pull any recent changes to the Web preview. 

Please note that it may take up to 5 minutes for some content.

Here's a Help Article with more information: Updating your content