Web page

The Web Page app lets you embed a web page in your Playr page. This web page will always be retrieved directly from the device on which the Playr page is shown. So this also enables you to show web pages that are only accessible from within your own (company) network.

Web Page

Properties

You can configure the app using the following properties:

Property Explanation
Web address The web address (URL) of the web page to be shown.
Zoom Zoom in or out on the web page.
Web page width Sets the outline width of the web page. Most web pages will adjust their layout to this width.
Web page height Sets the outline height of the web page.
Refresh content Select how often you like the web page to be reloaded during playback. A reload will always be more or less noticeable on the screen during playback. So if you don't expect frequent updates of the web page, be sure set this to a greater refresh interval.
Automatically scroll content Select if you want the content of the web page to scroll up during playback so the content of the whole page is shown. The page will scroll from the position you choose to the "end" set by the Web page height setting. So make sure that that value is large enough for the relevant parts of the page to be shown while scrolling.
Allow user interaction Turn this option on if you display the web page on a touch-screen and want users to be able to interact with it.

In addition, when you select the Web Page element, it will show vertical and horizontal scroll bars with which you can position the web page within the app such that it only displays the part that you like.

Note that browsers do not always display web pages exactly the same. We therefore recommend to use the same browser for configuring the Web page app in your Playr page as you use for playing your channel. For all apps (ChromeOS, Android and Porteus Kiosk) this is Google Chrome.

Some web pages vertically center their content, like a Google Presentation or a Microsoft Office365 Powerpoint presentation. If you leave the web page height set to the default value of 3000, that content will be invisible at first. Be sure to reduce the web page height to match the actual height of the app to see that content.

And finally there are a number of generic app properties that you can configure that you'll find on many other elements as well.

Potential security issues

Security on the internet is an ever present concern and browser manufacturers constantly add new restrictions to ensure maximum security while the user browses the internet. This unfortunately also makes it ever harder to include one web page in another; in this case in a Playr page. We'll address the most common restrictions that you might run into with the Web Page app.

Web page does not allow embedding

Website owners have the ability to prevent their site from being embedded in another web page. In that case Playr is also unable to display that web page and the app will remain blank. If you yourself are owner of that specific website, then make sure that on your web server, the following is configured:

  • Header Content-Security-Policy should either not be set or at least be set to frame-ancestors 'self' http://playr.biz http://*.playr.biz https://playr.biz https://*.playr.biz.
  • Header X-Frame-Options should not be set. Note that setting the ALLOW-FROM option will not work, as documented by Mozilla.
  • If your website requires cookies, e.g. to store session information, then you need to configure your cookie response to use the SameSite=None; Secure setting to allow cookies to function within another web page like Playr. It is therefore important to always play Playr in HTTPS. You can force that by checking the Enforce playback via HTTPS setting in the company settings page.

Cookie warnings

Some websites will show a cookie warning. There are two ways to deal with this:

  1. Leave the warning in place and just scroll it out of view. This will immediately work on the playback device as well.
  2. Accept the cookie warning on the machine you are managing your content on. But then the same warning will show up on your playback device. You will need to accept the cookie warning on your playback device as well.

Accepting cookies on your playback device

The easy way

  1. In the Web page app, turn on the Allow user interaction option
  2. Connect a mouse to the playback device
  3. Restart the channel (or playback device).
  4. When the cookie warning appears you should now be able to accept it with a mouse click.

After this, you should no longer see the cookie warning. Not even if you restart the playback device.

If all else fails

  1. Make sure you have registered your playback device.
  2. On the edit page of the registered playback device fill in the web address of the website it concerns in the Go to web address (instead of channel) field and save.
  3. Connect a mouse to your playback device and restart it.
  4. When the website is shown on the playback device, accept the cookie warning.
  5. On the edit page of the registered playback device remove the web address again from the Go to web address (instead of channel) field and save.
  6. Remove the mouse from your playback device and restart it.

Logging in to a website

Showing the content of a website that requires you to log in is practically only possible if you can select to stay logged in forever on that site. In that case, you must first log in to the relevant website from the playback device, indicating that you want to stay logged in forever. To do this, follow the exact same procedure as described above for accepting cookies on your playback device.