Configurer un modèle HTML5 pour Broadsign Publish

Cette page décrit la manière dont un administrateur peut configurer le modèle de message de Broadsign Publish.

Note : Pour tirer parti de la fonctionnalité des modèles de Broadsign Publish, vous devez disposer au minimum de la version 12.1 du lecteur Broadsign Control Player. Pour plus d'informations, consultez Broadsign Control Player dans la documentation de Broadsign Control.

Aperçu

Un modèle est une simple page Web, un paquet HTML que vous pouvez fournir à vos utilisateurs locaux afin qu'ils puissent le personnaliser tout en s'assurant que le contenu convient à n'importe quel écran et respecte vos directives de marque.

Vous pouvez télécharger un exemple de fichier modèle.

Dans ce document, vous trouverez les sections suivantes :

Structure du paquet HTML : Vous devez fournir à Broadsign un paquet HTML ayant une structure de fichiers spécifique.
Configurer le modèle : Configurez les paramètres que vos utilisateurs verront.
Mettre à jour le fichier HTML : Modifiez les champs appropriés dans votre fichier HTML.
Mettre à jour le fichier params.json : Remplissez les paramètres de votre fichier params.json (voir aussi Référence params.json).
Configurer le modèle pour un nouveau choix d'image : Modifiez un modèle afin que l'utilisateur final puisse choisir entre l'image par défaut ou en télécharger / en choisir une nouvelle dans sa bibliothèque.
Configurer le modèle pour un choix d'image à partir d'une liste : Modifiez un modèle afin que l'utilisateur final puisse choisir entre un nombre défini d'images dans un menu déroulant.
Configurer le modèle pour un nouveau choix de fichier audio : Modifiez un modèle afin que l'utilisateur final puisse choisir entre le fichier audio par défaut ou en télécharger / en choisir un nouveau dans sa bibliothèque.
Configurer le modèle pour un choix de fichier audio à partir d'une liste : Modifiez un modèle afin que l'utilisateur final puisse choisir entre un nombre défini de fichiers audio dans un menu déroulant.

Note : Dans le paquet HTML, les fichiers autres que les fichiers HTML et JSON (p. ex., CSS, polices, etc.) relèvent de la seule responsabilité du développeur.

Note : Pour vous assurer que toutes les animations dans vos modèles commencent pendant la lecture, et non avant la mise en tampon, Broadsign Publish ajoute automatiquement la fonctionnalité « BroadSignPlay() ». Consultez BroadSignPlay() pour plus d'information.

Configurer le modèle

Pour configurer le modèle, vous devrez modifier les fichiers .html (voir Mettre à jour le fichier HTML) et les fichiers .json (voir Mettre à jour le fichier params.json).

Mettre à jour le fichier params.json

Le fichier params.json vous permet d'ajuster les paramètres des différents éléments HTML.

Vous pouvez télécharger un exemple de fichier params.json.

Attention : Les champs de votre fichier params.json doivent correspondre à ceux de votre fichier HTML.

Vous pouvez :

Définir l’orientation (p. ex., portrait ou paysage).
Nommer le champ.
Ajouter le texte par défaut qui apparaîtra dans chaque champ (p. ex., « Prenez rendez-vous dès maintenant! »).
Régler le paramètre « mandatory » sur « true » (si nécessaire) ou « false » (si optionnel).
Définir la longueur maximale ou minimale possible dans chaque champ (p. ex., 50 caractères).
Définir le choix des images que l'utilisateur aura.
Définir si vos utilisateurs peuvent choisir l'image proposée ou en choisir une nouvelle.
Définir si vos utilisateurs peuvent choisir le fichier audio proposé ou en choisir un nouveau.
Définir une durée de modèle prédéfinie, en secondes, dans un message.

Note : Vous pouvez ajouter un code réactif à votre paquet HTML5 pour ajuster l’orientation en fonction de l’appareil utilisé.

Pour obtenir plus de détails sur les champs et leurs descriptions, consultez Référence params.json.

Voici un exemple de fichier params.json qui correspond à notre fichier HTML :

{
	"orientation": "landscape",
	"duration":10,
	"fields": [
		{
			"id": "subtitle-1",
			"label": "Subtitle",
			"mandatory": false,
			"maxLength": 50
		},
		{
			"id": "title",
			"default": "Réservez une consultation gratuite avec l'un de vos médecins",
			"label": "Title",
			"mandatory": true,
			"maxLength": 50
		},
		{
			"id": "subtitle-2",
			"default": "Défiez votre âge sans chirurgie",
			"label": "Subtitle",
			"mandatory": false,
			"maxLength": 50
		},
		{
			"id": "footer",
			"default": "2017 Dermapure. Tous droits réservés.",
			"label": "Footer",
			"mandatory": false,
			"maxLength": 50
		}
	]
}

Référence params.json

Paramètre	Description
allowFreeRatio	Type de données booléen. Si le paramètre indique « true », vos utilisateurs peuvent modifier le rapport de format de la nouvelle image. Cela change le comportement du recadrage. Si le paramètre indique « false », vos utilisateurs peuvent utiliser seulement le rapport de format par défaut. Consultez Configurer le modèle pour un nouveau choix d'image pour plus d'information.
allowNewAudio	Type de données booléen. Si le paramètre indique « true », vos utilisateurs peuvent choisir un nouveau fichier audio. Si le paramètre indique « false », vos utilisateurs peuvent utiliser seulement le fichier audio par défaut. Consultez Configurer le modèle pour un nouveau choix de fichier audio pour plus d'information.
allowNewImage	Type de données booléen. Si le paramètre indique « true », vos utilisateurs peuvent choisir une nouvelle image. Si le paramètre indique « false », vos utilisateurs peuvent utiliser seulement l'image par défaut. Consultez Configurer le modèle pour un nouveau choix d'image pour plus d'information.
aspectRatio	Définir le format de l'image (par exemple, 16:9). Consultez Configurer le modèle pour un nouveau choix d'image pour plus d'information.
choices	Liste des images ou des fichiers audio parmi lesquels l'utilisateur final peut choisir lors de la création d'un message. Ces images ou fichiers audio doivent être disponibles dans votre domaine. Consultez Configurer le modèle pour un choix d'image à partir d'une liste ou Configurer le modèle pour un choix de fichier audio à partir d'une liste pour plus d'information.
default	La chaîne de texte alphanumérique par défaut qui apparaîtra dans le champ. Vos utilisateurs peuvent mettre cette chaîne à jour, s’ils le souhaitent.
duration	Durée de modèle prédéfinie, en secondes, dans un message à utiliser, par exemple, lorsque la conception de l'animation dans un modèle est basée sur une durée spécifique. Lors de la création d'un message avec l'assistant de création de message, la durée du message sera en lecture seule et une info-bulle explique que l'utilisateur ne peut pas modifier la durée. Consultez Tutoriel sur la création de messages pour plus d'information. Note : La durée maximale du message s'applique toujours. Consultez Définir la durée maximale du message pour plus d'information.
id	Identifiant du champ. Il doit correspondre à l’identifiant de l’élément dans votre fichier HTML. Par exemple : data-publish-id="subtitle-1"
label	L’étiquette du champ (p. ex., « Sous-titre»).
mandatory	Type de données booléen. Si le paramètre indique « true », vos utilisateurs doivent saisir une valeur dans le champ. Si le paramètre indique « false », vos utilisateurs peuvent laisser le champ vide.
maxLength	La longueur maximale, en caractères, autorisée dans le champ.
orientation	Définir l’orientation (p. ex., portrait ou paysage). Note : Ce paramètre s’applique uniquement à l’orientation du message dans Broadsign Publish. Il ne modifiera pas l’orientation de l’image sur le lecteur.
type	Type de contenu utilisé dans le message. Les types disponibles sont `audio` et `image`.