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 have a few options to avoid this error, however it will not work on all platforms (ex. yes for Windows player, no for Android player) and avoiding this security increases a risk of security breach.

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.

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, and there is nothing we can do on our side to override them. (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.

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:

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