Configure an HTML5 Template for Broadsign Publish

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).

The elements that you want to configure in the HTML file must have the data-publish-id span tag. For example:

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

The following is a sample HTML document with the tags included:

Copy 
<!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.

You can download a example of params.json file.

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

You can:

  • Set the orientation (that is, portrait or landscape).
  • Name the field.
  • Add the default text that will appear in each field (for example, “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 (for example, 50 characters).
  • Set the choice of images that the user will have.
  • Set the choice of audio 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 whether your users can choose the offered video 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.

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

Copy 
{    
    "orientation": "landscape",    
    "duration":10,    
    "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
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 Set up the Template for New Image Choice for more details.
allowNewAudio

Boolean.

  • If “true”, your users can choose or pick a new audio file.

  • If “false”, your users can only use the default audio file.

See Set up the Template for New Audio 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 Set up the Template for New Image Choice for more details.
allowNewVideo

Boolean.

  • If “true”, your users can choose or pick a new video.

  • If “false”, your users can only use the default video.

See Set up the Template for New Video Choice for more details.
aspectRatio

Set the aspect ratio of the image (for example, 16:9).

See Set up 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 Set up the Template for Image Choice from a List or Set up 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:

Copy 
data-publish-id="subtitle-1"

If you are using audio or video files ([data-publish-id="music"] or [data-publish-id="video"]) and you want to use the autoplay feature, you must add a JavaScript function that calls BroadSignPlay(). See Use BroadSignPlay() for Audio/Video in HTML5 Templates.
label The field label (for example, “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.
type Type of content used in the message. Available types are audio and image.