Webpage

The Webpage app can be used to show external web content as part of a playlist. There are two distinct use cases for this app:

Non-interactive

In this use case, we want to show a web page in a playlist, along with and in sequence with other content. While interactivity could still be enabled and would work, the primary use case is to show web content without user interaction.

Interactive kiosk

In this use case, we want to show an external web site and allow the user to interact and navigate around the site. The Webpage app is often used in combination with the Touch Trigger app to create attract loops (also known as idle loops or screen savers).

Note that this use case can also be covered using the Web Kiosk Mode in Dise, if the players are running on Windows or Linux.

Also note that if you are in control of the web application (as in being the owner or developer), an alternative to running it as an external web site could be to manage and deploy the application from within Dise. In this scenario, you would not use the Webpage app at all, but instead package the complete application as a Dise template, create a message, and publish it to a playlist. The advantages of this method is that your application would run locally on the player and not depend on the internet connection, no need to host the application on the web, and an easy way to update the application.

Installing and using the app

Download the app here (Portrait and Landscape versions provided for convenience):
Webpage (P)
9.86 KB
Webpage (L)
9.86 KB
The app can be used out of the box and does not require any customization or configuration, but read below if you want to change anything.
Upload the zip (including any changes to the json files) as a template in the CMS.
Create a message, type in the Url (including http:// or https//), and publish to playlist.

Options

Display scrollbars
If the webpage does not completely fit on the screen, the default in any browser is to show scrollbars. If this is not desired, this option can be turned off. Whether or not this will have the desired effect depends on how the webpage is implemented.

Preload webpage
Preloading is normally desirable for all types of content, so that transitions between playlist items are seamless and instant (see Player API Flow for a detailed description of preloading in the Dise player). However, if the web page for example starts a video, animation, or sound, it may not work well with preloading and then it can be turned off.

Check webpage status
When this option is enabled, the status of the webpage will be checked before attempting to show it. If the page is unreachable, that is, if a http status other than 200-299 is returned, it will just be skipped and no error message shown.

Access control

If the player runs on Windows or Linux, the Web Access Control List also applies to web content displayed through the Webpage app. This gives you full control to white- or blacklist domain names for Urls, cookies, and local storage access.

Limitations

Like with any Dise template, a webpage displayed through this app will be shown in an iframe in the player. A lot of websites use http headers to actively prevent this (X-Frame-Options, Access-Control-Allow-Origin). The browser embedded in the Dise player on Windows and Linux has a special feature which will bypass these headers, making it possible to still show these web pages.

When previewing a Webpage message in the Dise CMS, the preview area is embedded in the CMS on the dise.com domain running in the user’s desktop browser. Therefore, any webpage with these headers will not work in preview mode - but may still work in the Dise player if running on Windows or Linux. On other platforms, the Dise player uses the standard web engine provided by the platform, meaning that webpages using these headers cannot work.

It should be noted that regardless of all the above, some websites simply won’t work properly running in an iframe. This is why Dise offers the Web Kiosk Mode, where the website is run in its own browser session.

Customizing the app

To customize the app, unpack the zip file, edit the template.json file as described below, then create a new zip with all files.

Changing the template name in template.json:
```
"name": "Webpage (L)",
```
This is particularly useful if you need several copies of the app covering different resolutions than the standard portrait and landscape versions provided here.

Changing the resolution in template.json:

"targetWidth": 1920,
"targetHeight": 1080,

Changing captions in template.json:
```
"caption": "Display scrollbars"
```
Captions of any field may be changed, for example to translate to another language

Removing optional fields in template.json
Any of the following three fields may be deleted if not needed:

    {
      "type": "checkbox",
      "key": "scrollBars",
      "caption": "Display scrollbars",
      "default": true
    },
    {
      "type": "checkbox",
      "key": "preloadPage",
      "caption": "Preload webpage",
      "default": true
    },
    {
      "type": "checkbox",
      "key": "checkStatus",
      "caption": "Check webpage status",
      "default": true
    }