How to create an HTML Widget

A widget is a zip file (need to have file ending .zip) that besides a website and pictures etc. contains a manifest. 


When the zip file is loaded, Dise will look for a name, thumbnail and start page that it will use be used by reading the manifest.  


HTML Widgets can also be hosted as a webpage, you can then schedule your webpage as a playlist item


TABLE OF CONTENTS

Supported versions

Version 1.32.12 and later

Functions

Here are some things you can do with HTML Widgets. 


  • Access local files on the player.
    The index.html file work as any other index file that you can link it items on the local pc which in this case is a player.
    For example you can add '<img src="C:\folder\xxx.jpg"> and it will display this image.

  • A widget has access to custom settings for the player, which are sent as querystring variables with the start URL. For example a variable named TestId with a value of 1234, the URL requested by the player will be https://domain.com/index.html?TestId=1234

Format manifest

The manifest is in json format, must be called "manifest.json" and looks like below. Where the value is printed or where it says <required>, these fields are required, while <optional> is optional. The order in which the attributes come is not important.



{
    "name": "<required>",
    "media_type": "application/x-dise-widget",
    "manifest_version": 1,
    "start": "<required>",
    "thumbnail": "<required>",
    "version": "<optional>",
    "description": "<optional>",
    "created": "<optional>",
    "size": <optional>,
    "hash": "<optional>",
    "privileges": "<optional>"
}


  • name
    Name to display in the portal, in content and playlists

  • media_type
    Must be "application / x-dise-widget". If it does not exist, the portal will not continue to extract thumbnails and players will not continue to load the widget.

  • manifest_version
    For now this value needs to be 1

  • start
    Provides information about the filename of the html page to be displayed. The page is recommended to be at the root level.

  • thumbnail
    filename of the file to be used by the portal as a thumbnail. The file is recommended to be at the root level and have a .png or .jpg file extension

  • version
    For future use. Describes version of the content of the widget. Can be any string and is intended to be displayed in the portal.

  • description
    For future use. Longer description of the contents of the widget. Can be any string and is intended to be displayed in the portal.
  • created
    For future use. Time when the content of the widget was created. A timestamp in ISO8601 format. Is supposed to appear in the portal

  • size
    For future use. Total size in bytes on the contents of the widget, for verification of widget validity. Is supposed to appear in the portal.

  • hash
    For future use. A SHA2 hash of the content of the widget, to verify the validity of the widget

  • privileges
    Describes the rights the web page in the widget should have in its iframe. 
    Read out by player when it is loading the widget.
    Follows the same format as an iframe's "sandbox" attribute, see ex. this page:
    https://html.com/attributes/iframe-sandbox/

    If the attribute does not exist, default to:
allow-forms allow-modals allow-pointer-lock allow-popups allow-scripts allow-same-origin


Example

An example of a manifest for a widget:

{
    "name": "MyWebsite",
    "media_type": "application/x-dise-widget",
    "manifest_version": 1,
    "description": "HTML5-application to show internal information",
    "start": "info.html",
    "thumbnail": "logo.png",
    "privileges": "allow-forms allow-modals allow-pointer-lock allow-popups allow-scripts allow-same-origin"
}

An example of what a widget might contain


How to schedule a Widget

In the portal, go to Content library > folder and tap Upload file. 
Select your zip file and press 'Ok'. 
The portal will use the name specified in the manifest instead of the file name, as well as extract and use the thumbnail sent with and specified in the manifest.