Web screens are a feature that lets you integrate websites or HTML content into your STQRY web app. This way, you can enrich your app with external content such as maps, surveys, forms, or games, and keep your users engaged within your app. In this article, we will guide you on how to use web screens.
How to Choose the Type of Web Screen for Your App
This feature offers three different modes for embedding websites: URL Web Screen, HTML Web Screen, and Zip Web Screen.
- URL Web Screen
- HTML Web Screen
- Zip Web Screen
URL Web Screen
This type of web screen renders a website full-screen with browser chrome. Browser chrome is the user interface elements of the browser, such as the back button, forward button, refresh button and link to open the URL in the Operating System browser. You can use this type of web screen to display websites such as Google Maps or your Shopify store.
The web screen behaves differently in the native app versus the mobile web version:
- Native app – uses a WebView, which works much like a standard web browser with only minor differences.
- Mobile web – uses an iframe, which has stricter limitations due to security policies.
To ensure your app displays correctly on the web, please make sure that the embedded website supports iframes and does not use a frame buster that blocks iframe loading.
Another common issue when a website doesn’t display in a STQRY Web Screen is the X-Frame-Options HTTP header, which may prevent the site from being loaded inside an iframe. To resolve this, you’ll need to ask the website’s webmaster to either remove this header from their web server configuration or ensure that https://yourapp.stqry.app is included in the Content-Security-Policy’s frame-ancestors directive, like so:
Content-Security-Policy: frame-ancestors https://yourapp.stqry.app;
An example of a website that cannot be embedded due to the X-Frame-Options HTTP header
HTML Web Screen
This type of web screen renders HTML content without browser chrome. You can use this type of web screen to display custom HTML content that you create or copy from other sources, such as SurveyMonkey or Mailchimp.
If you want your Web Screen to act as a wrapper and allow scrolling of the entire page, use the code below and change the part https://example.com to your website.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="refresh" content="0; url=https://example.com" />
<title>Redirecting…</title>
</head>
<body>
<p>If you are not redirected automatically,
<a href="https://example.com">click here</a>.</p>
</body>
</html>If you want your Web Screen to display the website in full screen, use the code below and change the part https://example.com to your website.
<!DOCTYPE html>
<html>
<head>
<style>
html, body, iframe {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<iframe
src="https://example.com"
allowfullscreen
width="100%"
height="100%"
style="border: none;"
></iframe>
</body>
</html>
Three screenshots comparing browser, URL Web Screen, and HTML Web Screen
Zip Web Screen
This type of web screen is similar to HTML Web Screen, but it allows you to include assets such as images, fonts, or scripts in a zip file. You can use this type of web screen to display complex HTML content that requires external resources, such as games or animations.
Important: The zip file must contain an index.html file at the root of the zip file. i.e Do not zip the whole folder, zip the contents of the folder.
One application ideal for creating simple games is Hype. You can explore it further here: https://tumult.com/hype.
How to Create a Web Screen for Your App
Here are the steps to create a web screen for your app:
- Log in to your STQRY account
- Under the “Content” section, click on the “Add Screen” button and select “Web Screen” from the list of screen types.
- Fill out the Title and Short title.
- Under the “Page Types” section, select the type of web screen that you want to use for your app from the drop-down menu. Depending on the type of web screen that you selected, enter the URL of the website, paste the HTML code, or upload the zip file that contains the HTML content and assets for your app.
- Fill out the coordinates of the screen (optional)
- Click on the “Save” button to save your changes.
How to Preview and Publish Your Web Screen
Remember to hit Save to commit the changes. Adding a new web screen does not require a new app build but you will need to link the new content to the app. Users will see the updates upon their first download. For existing app users, they will need to update the app to view the changes.
For more detailed instructions and insights on how to make the most of these features, don't hesitate to reach out to our support team at support@stqry.com. Happy app building!
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article