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).
Les éléments que vous voulez configurer dans le fichier HTML doivent porter la balise <span> data-publish-id. Par exemple :
<p><span data-publish-id="subtitle-1"></span></p>Voici un exemple de document HTML incluant les balises :
<!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>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 le choix d'audio 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 si vos utilisateurs peuvent choisir le fichier vidéo proposé.
- 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": "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
}
]
}| Paramètre | Description |
| allowFreeRatio |
Type de données booléen.
Consultez Configurer le modèle pour un nouveau choix d'image pour plus d'information. |
| allowNewAudio |
Type de données booléen.
Consultez Configurer le modèle pour un nouveau choix de fichier audio pour plus d'information. |
| allowNewImage |
Type de données booléen.
Consultez Configurer le modèle pour un nouveau choix d'image pour plus d'information. |
| allowNewVideo |
Type de données booléen.
Consultez Configurer le modèle pour un nouveau choix de fichier vidéo 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 : Copier
Si vous utilisez des fichiers audio ou vidéo ([data-publish-id="music"] ou [data-publish-id="video"]) et que vous souhaitez utiliser la fonction de lecture automatique, vous devez ajouter une fonction JavaScript qui appelle BroadSignPlay(). Voir Utiliser BroadSignPlay() pour l'audio et la vidéo dans les modèles HTML5. |
| label | L’étiquette du champ (p. ex., « Sous-titre»). |
| mandatory |
Type de données booléen.
|
| 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. |