- 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.
In this document you will find the following sections:
- HTML Package template Structure: You need to provide Broadsign with an HTML package that has a specific file structure.
- Configure the Template: 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).
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().
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().
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).
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>
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
}
]
}
Parameter | Description |
id |
The id of the field. It must correspond to the id of the element in your HTML file. For example:
|
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.
|
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. |