# Syntaxe des modèles Rich Media ## Structure du modèle Un modèle est simplement une archive .zip qui peut contenir du HTML, du JavaScript, du CSS et des images en tant qu'actifs Rich Media. L'archive doit contenir un fichier **index.html** à sa racine. ## Espaces réservés du modèle Vous pouvez utiliser des espaces réservés dans les modèles Rich Media qui vous permettront de modifier et de localiser les valeurs dans le contenu Rich Media. Un espace réservé doit suivre le format ci-dessous : ```liquid {{ Placeholder name | Type | Default value }}` ``` Où : * **Nom de l'espace réservé** — est le nom de l'espace réservé qui sera visible dans l'éditeur Rich Media. * **Type** — est le type de l'espace réservé. Le type peut être l'une des valeurs suivantes : * **color** — entrée de couleur * **text** — entrée de texte * **html** — zone de texte (texte multiligne) * **Valeur par défaut** — valeur par défaut qui est utilisée si aucune valeur n'est fournie dans l'éditeur. Si aucune n'est définie, alors le **Nom de l'espace réservé** est utilisé comme valeur par défaut. Exemple : ```liquid {{Header text|text|Tell Us What You Think}}` ``` ## Ajout de Pushwoosh.json Vous pouvez regrouper les espaces réservés pour qu'ils soient liés ensemble dans l'éditeur Rich Media : Interface de l'éditeur Rich Media montrant des espaces réservés groupés et liés dans des groupes d'entrée

Interface de l'éditeur Rich Media montrant des espaces réservés groupés et liés dans des groupes d'entrée

Pour ce faire, ajoutez le fichier **pushwoosh.json** à l'archive avec votre modèle Rich Media à côté du fichier **index.html**. La structure du fichier est très simple et devrait être explicite : ``` { "input_groups": [ ["Logo image URL", "Logo background color"], ["Topic text", "Topic text color", "Topic background color", "Sub-topic text"], ["Main text", "Text background color"], ["Button text", "Button URL", "Button text color", "Button background color"] ] } ``` ## Exemple Les formulaires personnalisés pour les enquêtes sont un cas d'utilisation courant pour les modèles Rich Media personnalisés. Ces formulaires vous permettent de recueillir de précieux commentaires des utilisateurs. Un modèle préconçu avec un formulaire d'enquête personnalisé est disponible dans les modèles par défaut. Utilisez-le comme point de départ pour vos propres enquêtes. Exemple de modèle de formulaire d'enquête personnalisé avec des champs de saisie pour recueillir les commentaires des utilisateurs

Exemple de modèle de formulaire d'enquête personnalisé avec des champs de saisie pour recueillir les commentaires des utilisateurs

Lors de la création de formulaires, [suivez quelques bonnes pratiques](#best-practices-for-custom-elements-in-rich-media) pour garantir la compatibilité et une fonctionnalité transparente dans l'éditeur Rich Media. Voici un autre exemple tiré de l'un des modèles par défaut disponibles dans le Panneau de Contrôle. ```txt

``` ## Suivre les performances des Rich Media personnalisés Vous pouvez également suivre les performances du contenu Rich Media personnalisé que vous créez et téléchargez sur Pushwoosh sous forme de fichier ZIP. Vous pouvez suivre comment les gens interagissent avec votre Rich Media par : * Clics sur les boutons * Clics sur les liens * Soumissions de formulaires Pour permettre à Pushwoosh de suivre ces interactions : 1. Ajoutez un attribut "id" à chaque élément que vous souhaitez suivre. Par exemple : **Pour suivre les clics sur les liens :** ```html … ``` **Pour suivre les soumissions de formulaires :** ```html ``` **Pour suivre les clics sur les boutons :** ```html // type="button" est requis ``` 2. Ajoutez un lien vers le fichier JavaScript depuis le CDN à la fin de la balise : ```html ``` ## Bonnes pratiques pour les éléments personnalisés dans les Rich Media ### Gérer attentivement les styles CSS Assurez-vous que vos styles CSS sont spécifiques pour éviter les conflits avec les styles de l'éditeur Rich Media. L'utilisation de styles à faible spécificité, tels que ceux appliqués aux noms de balises ou aux noms de classes courants, peut affecter l'apparence de l'éditeur Rich Media. Il est préférable de garder vos styles locaux — enveloppez votre contenu dans un conteneur avec un ID ou une classe unique et utilisez cet identifiant dans vos sélecteurs CSS pour les éléments enfants. ### Inclure des bibliothèques externes Vous pouvez intégrer des bibliothèques CSS ou JavaScript (telles que Font Awesome, Bootstrap, Tailwind CSS, etc.) pour utiliser leurs méthodes, icônes, polices, animations, et plus encore.

{{Topic text|text|TOPIC TEXT}}