Maximizing App Engagement with STQRY's Web Screens

Created by Glen Barnes, Modified on Tue, 15 Oct at 11:19 AM by Natalie Nguyen

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.

We will cover the following topics:

How to choose the type of web screen for your app
How to create a web screen for your app
How to preview and publish your web screen

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 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.

If you're having trouble displaying a website in a STQRY Web Screen, X-Frame-Options HTTP header could be the reason why. 

Ask the website's webmaster to remove this header from their web server configuration or make sure that https://yourapp.stqry.app is included into 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. To embed a website into a Web Screen and make it full screen, use the following code and change the part https://bus.wakadata.nz/locator/c7f58eca61434bf4a8ca630d09c2accb to your

<!DOCTYPE html>
<html>
<head>
<style>
html, body, iframe {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<iframe
src="https://bus.wakadata.nz/locator/c7f58eca61434bf4a8ca630d09c2accb"
allowfullscreen
width="100%"
height="100%"
style="border: none;"
></iframe>
</body>
</html>

Tips! Do you know that you can embed a YouTube video into STQRY in full-screen mode? This feature is particularly useful for STQRY Kiosk. To enhance the viewing experience, add "&rel=0" to the end of the embedded link to prevent YouTube recommendations from appearing at the end of the video. Here is an example to demonstrate this idea.

<!DOCTYPE html>
<html>
<head>
<style>
html, body, iframe {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<iframe
src="https://www.youtube.com/embed/BbZXh1fkbR4?si=QuNdIDMgipEDYT1L&rel=0"
allowfullscreen
width="100%"
height="100%"
style="border: none;"
></iframe>
</body>
</html>

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!

ReferencesX-Frame-Options reference
Content-Security-Policy frame-ancestors reference

Attachments (1)

8179521518351.png
344 KB