Set up an HTML5 Template for Broadsign Publish

This page describes how an admin can set up a Broadsign Publish message template.

Note: To take advantage of the templates functionality in Broadsign Publish, you need at least version 12.1 of Broadsign Control Player. For more information, see Broadsign Control Player in the Broadsign Control documentation.

Overview

A template is simple web page, an HTML package you can provide to your local users so that they can customize it while still making sure that the content fits on any screen and respects your branding guidelines.

You can download an example of template file.

In this document you will find the following sections:

HTML Package Structure: You need to provide Broadsign with an HTML package that has a specific file structure.
Configure an HTML5 Template for Broadsign Publish: Configure the settings that your users will see.
Update the HTML File: Change the appropriate fields in your HTML file.
Update the params.json File: Populate the parameters of your params.json file (see also params.json Reference).
Set up the Template for New Image Choice: Modify a template so that the end user can choose between the default image or upload/pick a new one from its library.
Set up the Template for Image Choice from a List: Modify a template so that the end user can select between a set number of images in a drop-down field.
Set up the Template for New Audio Choice: Modify a template so that the end user can choose between the default audio file or upload/pick a new one from its library.
Set up the Template for Audio Choice from a List: Modify a template so that the end user can select between a set number of audio files in a drop-down field.
Set up the Template for a Custom List: Modify a template so that the Administrator can set up a custom list, and the end user can select an item from that list.
Set up the Template for CSS Style Choices: Modify a template so that the Administrator can set up a list of CSS styles, and the end user can select an item from that list.
Use BroadSignPlay() for Audio/Video in HTML5 Templates: Add a JavaScript function to your template to ensure that any animation starts during playback, and not during pre-buffering, for your audio or video files.

Note: In the HTML package, files other than the HTML and JSON files (for example., CSS, fonts, etc.) are the sole responsibility of the developer.

HTML Package Structure

The following illustrates a suggested way to organize the assets in your HTML5 package.

Note: The index.html and params.json files are mandatory and must sit at the root of the package.

Note: The names of the files and paths included in the HTML template are case-sensitive.

Copy

package
     |
     + - index.html
     + - params.json
     + - extra html1
     + - extra html2
     + - assets
     |        |
     |        + - css
     |        |        |
     |        |        + - css1
     |        |        + - css2
     |        + - fonts
     |        |        + - font1
     |        + - js
     |        |        |
     |        |        + - js_1_
     |
     + - images
     |         |
               + - image1
               _              + - _image2