Web page

Editing Web Page:

1 Insert the URL (link) to the page you want to integrate.

If you receive the following error, that means that chosen website does not allow being embedded or linked on a different website.

You do not have to do anything about it: when the address check finds such a page, the Render without iframe switch turns on by itself (you can also turn it on yourself). The device then draws the page directly on top of the scene instead of inside an iframe, so the restriction does not apply. Two things to keep in mind: the page is drawn above everything else in the scene, so anything placed over it is hidden; and the editor and previews cannot show such a page, so they show a "Will be visible on the device" placeholder in its place.

If you would rather have the page embedded as a regular iframe, the restriction has to be lifted on the page's side:

If you control the server/application: Modify the X-Frame-Options header to either:

• Remove it completely

• Change it to: SAMEORIGIN (allows framing from same domain)

• Change it to: ALLOW-FROM https://client.screenmanager.tech and https://client2.screenmanager.tech (or other allowed domains).

If you don't control the server:

• Request permission from the site owner to whitelist your domain
• Consider embedding the content in other ways like:
  • Using APIs if available
  • Taking screenshots/thumbnails
  • Using direct links instead of iframes

2 Choose screen orientation: Portrait, Landscape or set your own screen dimensions by clicking on Create custom button.

3 Toggle screen scrolling. When disabled, you can set the preview width settings4 using a slider.

When enabled, the frame will be scrollable and preview width settings4 will be hidden and ingored.

Toggle Render without iframe for pages that refuse to be embedded (X-Frame-Options or a content security policy). The device renders the page directly on top of the scene, so anything layered over it is hidden, and the preview shows a placeholder instead of the page. The switch turns on automatically when the address check finds such a page.

5 Choose Refresh interval: set how often the webpage should be refreshed.

Once you are done setting everything up, click on Create or Create & Publish to save progress. Click on the X to return to the previous menu.

Frequently Asked Questions

What does the Web Page item do?

It embeds an external web page (via an <iframe>) into your scene. You provide a URL and the player loads and displays that page on the screen.

What are the requirements for a page to render?

For a page to display correctly, it must meet all of the following:

• HTTPS. The URL must be served over https://. Insecure http:// pages are blocked as mixed content and will not load.
• No frame restrictions. The page must not send an X-Frame-Options: DENY / SAMEORIGIN header, and must not set a Content-Security-Policy with frame-ancestors 'none' / 'self'. These headers tell the browser the page may not be embedded in an iframe. The address check in the editor detects them and switches on Render without iframe, which draws the page directly on the device instead (see above). Many large sites — e.g. Google, YouTube watch pages, Facebook, most banks — block embedding this way; use the dedicated YouTube item for YouTube videos.
• All sub-resources over HTTPS. Any CSS, JS, images, or fonts the page loads must also be HTTPS. A page that pulls resources over http:// may render broken or blank.
• Reachable from the device. The screen/device must be able to reach the URL over its network. Internal-only or firewalled hosts may work in your office browser but fail on the device.
• Self-contained / no login. The page must not require a login, cookie consent click, or other interaction — the player cannot click through these. Pass any needed parameters in the URL itself.

What does "Render without iframe" do?

Normally the page is embedded in an iframe, which a page can forbid with an X-Frame-Options header or a content security policy. With Render without iframe on, the device renders the page itself, directly on top of the scene, where that restriction does not apply. The switch turns on automatically when the address check finds such a page, and you can turn it on for any page. The trade-offs: the page is drawn above everything else in the scene, so items placed over it are hidden; and the editor and previews show a "Will be visible on the device" placeholder instead of the page. Touches on the page still count as activity for an interactive scene's inactivity reset.

Why does my page show up blank or empty even though the URL works in my browser?

The most common cause is vertical centering. By default the item scales the page to fit the scene and may render it at a very large internal height. Pages that center content vertically using top: 50% together with transform: translateY(-50%) (or other percentage/viewport-based positioning) will center relative to that large height, pushing the content off-screen — so the page looks empty.

Two ways to fix it:

1. Turn on the "Enable scrolling" switch on the item. This renders the page at full size without height scaling and resolves the issue immediately. (Quickest fix.)
2. On the page itself, avoid relying on top: 50% / translateY(-50%) for layout — use a fixed height or top-aligned content instead.

My page looks too big, too small, or cropped. What controls the size?

Use the Preview width setting to match the page's intended design resolution. The page is rendered at that width and then scaled to fit the scene. If scaling causes layout problems, enable "Enable scrolling" to render the page at native size.

How often does the page refresh?

You can set a refresh interval (in minutes) on the item. The page reloads automatically on that interval, which is useful for dashboards or menus that update during the day.