• All Files
Docs Tips
  • We provide a short video introducing the features of our docs. See Broadsign Documentation in MadCap Flare.
  • Images are thumbnails. To embiggen, click the image.
  • Search is based on keyword. Ex: "Proposals"
  • Do not search with natural language. Ex: "How do I create a proposal?"

Contact Services

Modify HTML5 Package Templates

This document describes how an admin can modify a Broadsign Publish message template.

Overview

In this document you will find the following sections:

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

Warning: To ensure that any animation in your templates starts during playback, and not during pre-buffering, you will need to use the "BroadSignPlay()" feature. For more information, see BroadSignPlay().

HTML Package template Structure

Below, we illustrate a suggested way to organize the assets in your HTML package.

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

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

Warning: To ensure that any animation in your templates starts during playback, and not during pre-buffering, you will need to use the "BroadSignPlay()" feature. For more information, see BroadSignPlay().

Configure the Template

To configure the template, you will need to edit the .html files (see Update the HTML File) and .json files (see Update the params.json file).

Update the HTML File

The elements you want to configure in the HTML file must have the following span tag:

data-publish-id

For example:

<p><span data-publish-id="subtitle-1"></span></p>

Here is a sample HTML document with the tags included:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<meta name="description" content="">
		<meta name="author" content="">
		<link href="https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700" rel="stylesheet">
		<title></title>
		<style>[...]</style>
	</head>
	<body>
		<div class="wrapper">
			<div id="container" class="clear">
				<section class="clear">
					<figure>
						<figcaption>
							<p><span data-publish-id="subtitle-1"></span></p>
							<h2><span data-publish-id="title"></span></h2>
							<p><span data-publish-id="subtitle-2"></span></p>
							<footer class="more"><span data-publish-id="footer"></span></footer>
						</figcaption>
					</figure>
				</section>
			</div>
		</div>
	</body>
</html>
Update the params.json file

In the params.json file, adjust the parameters of the various HTML elements.

Warning: The fields in your params.json file must correspond to the fields in your HTML file.

Warning: To ensure that any animation in your templates starts during playback, and not during pre-buffering, you will need to use the "BroadSignPlay()" feature. For more information, see BroadSignPlay().

You can:

  • Set the orientation (i.e., portrait or landscape).
  • Name the field.
  • Add the default text that will appear in each field (e.g., “Book an appointment now!”).
  • Set the “mandatory” parameter to “true” (if required) or “false” (if optional).
  • Set the maximum or minimum length possible in each field (e.g., 50 characters).

Note: You can add responsive code to your HTML5 package to adjust orientation based on device.

For more details about the fields and their descriptions, see params.json Reference.

Here is a sample params.json file that corresponds to our HTML file:

{
	"orientation": "landscape",
	"fields": [
		{
			"id": "subtitle-1",
			"label": "Subtitle",
			"mandatory": false,
			"maxLength": 50
		},
		{
			"id": "title",
			"default": "Book a free consultation with one of your doctors",
			"label": "Title",
			"mandatory": true,
			"maxLength": 50
		},
		{
			"id": "subtitle-2",
			"default": "Defy your age without surgery",
			"label": "Subtitle",
			"mandatory": false,
			"maxLength": 50
		},
		{
			"id": "footer",
			"default": "2017 Dermapure. All rights reserved.",
			"label": "Footer",
			"mandatory": false,
			"maxLength": 50
		}
	]
}
params.json Reference
Parameter Description
id

The id of the field. It must correspond to the id of the element in your HTML file.

For example:

data-publish-id="subtitle-1"
default The default alphanumeric text string that will appear in the field. Your users are able to update this string, if they want.
label The field label (e.g. “Subtitle”).
mandatory

Boolean.

  • If “true”, your users must enter a value in the field.

  • If “false”, your users can leave the field blank.
maxLength The maximum length, in characters, permitted in the field.
orientation

Set the orientation (i.e., portrait or landscape).

Note: This setting applies only to the orientation of the message in Broadsign Publish. It will not modify the orientation of the image on the player.