Syntaxe des modèles Rich Media

Ce guide concerne le développement de pages Rich Media personnalisées.

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 (placeholders) 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 :
\{{ Placeholder name | Type | Default value }}

Où :

Placeholder name — 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 — sélecteur de couleur
- text — champ de saisie de texte
- html — zone de texte (texte multiligne)
Default value — valeur par défaut utilisée si aucune valeur n’est fournie dans l’éditeur. Si aucune n’est définie, le Placeholder name est utilisé comme valeur par défaut.

Exemple :
\{{Header text|text|Tell Us What You Think}}

Ajout de Pushwoosh.json

Vous pouvez regrouper les espaces réservés afin qu’ils soient liés dans l’éditeur Rich Media :

Pour ce faire, ajoutez le fichier pushwoosh.json à l’archive de 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 retours d’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.

Lors de la création de formulaires, suivez quelques bonnes pratiques pour garantir la compatibilité et une fonctionnalité transparente au sein de l’éditeur Rich Media.

Voici un autre exemple tiré de l’un des modèles par défaut disponibles dans le Control Panel.

<!DOCTYPE html>
<html>
<head>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <style type="text/css">
        html, body {
            height: 100%;
            width: 100%;
            padding: 0;
            margin: 0;
            font-family: "Open Sans";
        }
        .main {
            height: 100%;
            width: 100%;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }
        .logo {
            width: 100%;
            height: 15%;
            background-image: url('{{Logo image URL|text|https://www.pushwoosh.com/wp-content/themes/pushwoosh/img/logo.png}}');
            background-position: 50% 50%;
            background-size: 50%;
            background-repeat: no-repeat;
            background-color: #{{Logo background color|color|343434}};
        }
        .topic-wrapper {
            width: 100%;
            height: 30%;
            text-align: center;
            display: table;
            color: #{{Topic text color|color|FFFFFF}};
            background-color: #{{Topic background color|color|23B7A4}};
        }
        .topic {
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }
        .topic-wrapper h1, .topic-wrapper p {
            margin: 0;
        }
        .padding-wrapper {
            width: 100%;
            height: 55%;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            padding: 0 2% 0 2%;
            background-color: #{{Text background color|color|FFFFFF}};
        }
        .text-wrapper {
            height: 70%;
            width: 100%;
            padding: 2% 0 2% 0;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            overflow: hidden;
        }
        .text {
            width: 100%;
            height: 99%;
            overflow: auto;
            padding-right: 15px;
        }
        .button-wrapper {
            height: 30%;
            width: 100%;
            padding: 2% 0 2% 0;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }
        .button {
            display: table;
            width: 100%;
            height: 100%;
        }
        .button a {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            font-size: 2em;
            text-decoration: none;
            color:#{{Button text color|color|FFFFFF}} ;
            border-radius: 20px;
            background-color: #{{Button background color|color|23B7A4}};
        }

        @media only screen
        and (orientation: landscape) {
            .padding-wrapper {
                height: 45%;
            }
            .logo {
                height: 20%;
            }
            .button a {
                border-radius: 10px;
            }
        }
    </style>
</head>
<body>

<div class="main">
    <div class="logo"></div>
    <div class="topic-wrapper">
        <div class="topic">
            <h1>{{Topic text|text|TOPIC TEXT}}</h1>
            <p>{{Sub-topic text|text|Subtopic here}}</p>
        </div>
    </div>
    <div class="padding-wrapper">
        <div class="text-wrapper">
            <div class="text">
                {{Main text|html|Main text here}}
            </div>
        </div>
        <div class="button-wrapper">
            <div class="button">
                <a href="{{Button URL|text|https://www.pushwoosh.com}}">
                    {{Button text|text|Submit}}
                </a>
            </div>
        </div>
    </div>
</div>
</body>
</html>

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 la manière dont les utilisateurs interagissent avec votre Rich Media via :

Clics sur les boutons
Clics sur les liens
Soumissions de formulaires

Pour permettre à Pushwoosh de suivre ces interactions :

Ajoutez un attribut « id » à chaque élément que vous souhaitez suivre.

Par exemple :

Pour suivre les clics sur les liens :

<a id=“my_link_1” href=“#”>…</a>

Pour suivre les soumissions de formulaires :

<form id=“my_form_1” action=“#” method=“GET”>…</form>

Pour suivre les clics sur les boutons :

<button id=“my_button_1” type=“button”>…</button> // type="button" est requis

Ajoutez un lien vers le fichier JavaScript depuis le CDN à la fin du document HTML :

<script src="https://cdn.pushwoosh.com/richmedia-service/statistics/v1/richmedia-statistics.js"></script>

Bonnes pratiques pour les éléments personnalisés en Rich Media

Gérez 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 : encapsulez 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.