Modify the HTML5 Template

This page describes how an admin modifies Broadsign Publish message template.

Note: To take advantage of the templates functionality in Broadsign Publish, you need at least version 12.1 of the player.

Configure the Template

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

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.

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).
Set the choice of images that the user will have.
Set whether your users can choose the offered image or pick a new image.
Set whether your users can choose the offered audio file or pick a new audio file.
Set a predefined template duration, in seconds, in a message.

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
allowFreeRatio	Boolean. If “true”, your users can change the aspect ratio of the new image. This changes the behavior of the cropper. If “false”, your users can only use the default aspect ratio. See Modify the Template for New Image Choice for more details.
allowNewImage	Boolean. If “true”, your users can choose or pick a new image. If “false”, your users can only use the default image. See Modify the Template for New Image Choice for more details.
aspectRatio	Set the aspect ratio of the image (for example, 16:9). See Modify the Template for New Image Choice Modify the Template for New Image Choice for more details.
choices	List of images or audio files from which the end-user can choose when creating a message. These images or audio files must be available on the domain. See Modify the Template for Image Choice from a List or Modify the Template for Audio Choice from a List for more details.
default	The default alphanumeric text string that will appear in the field. Your users are able to update this string, if they want.
duration	Predefined template duration, in seconds, in a message to use, for instance, when the animation design in a template is based on a specific duration. When creating a message with the Message Creation Wizard, the message duration will be read-only and a tool tip explains that the user cannot change the duration. For more information, see Message Creation Tutorial. Note: The Maximum message duration still applies. Fore more information, see Set the Maximum Message Duration.
id	Identifier of the field. It must correspond to the id of the element in your HTML file. For example: data-publish-id="subtitle-1"
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 (that is, 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.