Maximizing App Engagement with STQRY's Web Screens

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 browser's own interface. It includes 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.

For your app to display correctly on the web, the embedded website must support iframes. It also must not use a frame buster that blocks iframe loading.

Another common reason a website doesn’t display in a STQRY Web Screen is the X-Frame-Options HTTP header. It may prevent the site from being loaded inside an iframe. To resolve this, ask the website’s webmaster to remove this header from their web server configuration. Alternatively, they can make sure 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

For STQRY Kiosk, please ensure that the web screen’s Content Security Policy (CSP) directive includes the following sources: https://kiosk.stqry.com and http://localhost:*.

Content-Security-Policy: frame-ancestors https://yourapp.stqry.app https://kiosk.stqry.com http://localhost:*;

HTML Web Screen

This type of web screen renders HTML content without browser chrome. Use it to display custom HTML content that you create or copy from other sources, such as SurveyMonkey or Mailchimp.

To make your Web Screen act as a wrapper that allows scrolling of the entire page, use the code below. 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 like HTML Web Screen, but lets you 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, enter the website’s URL, paste the HTML code, or upload the zip file with your HTML content and assets.
• 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 help making the most of these features, reach out to our support team at support@stqry.com. Happy app building!