Créer une page Rich Media dans l'éditeur intégré

Allez dans Contenu → Rich Media et cliquez sur Ajouter un modèle :

Saisissez un nom de modèle, sélectionnez Créer un nouveau modèle, et cliquez sur Ajouter un modèle :

Vous pouvez créer une nouvelle page Rich Media à partir d’un modèle par défaut ou partir de zéro en sélectionnant un modèle vierge.

Définissez la mise en page du modèle en faisant glisser et en déposant les blocs de contenu requis dans le corps du modèle. Vous pouvez ajouter une image, du texte, un bouton, un séparateur, un formulaire à remplir, un bloc HTML et un menu.

Si vous souhaitez placer plus d’un élément de contenu sur une même ligne, ajoutez l’élément Colonnes au modèle, sélectionnez le type de bloc requis et ajoutez du contenu à chaque colonne :

Pour modifier la couleur d’arrière-plan d’une mise en page, cliquez sur ses marges extérieures, assurez-vous que toute la mise en page est sélectionnée, et choisissez la couleur :

Si toute la mise en page est sélectionnée, vous pouvez également modifier les paramètres de marge intérieure et téléverser une image d’arrière-plan.

Pushwoosh offre la flexibilité de créer du contenu Rich Media en orientation portrait et paysage, garantissant que vos campagnes sont visuellement attrayantes et efficaces sur tous les appareils.

Pour créer une page Rich Media conçue pour l’orientation portrait, généralement utilisée sur les appareils mobiles, accédez à l’onglet Mobile de l’éditeur. Ici, vous pouvez concevoir votre contenu pour qu’il s’adapte à une mise en page verticale, adaptée aux écrans de smartphones.

Pour une page Rich Media orientée en mode paysage, généralement préférée pour les écrans plus larges, accédez à l’onglet Bureau de l’éditeur. Ici, vous pouvez structurer votre page Rich Media pour tirer parti d’un espace horizontal plus large.

Si vous devez ajouter des colonnes à votre page Rich Media en mode paysage, ajoutez d’abord l’élément Colonne et définissez le nombre et la disposition des colonnes dont vous avez besoin.

Après avoir conçu votre page Rich Media en mode paysage avec des colonnes, passez à l’onglet Mobile. Faites défiler jusqu’à la section DESIGN ADAPTATIF, qui se trouve en bas du panneau de configuration, et activez l’option Ne pas empiler sur mobile.

Pushwoosh vous permet également de combiner différentes mises en page de colonnes dans vos pages Rich Media. Vous pouvez configurer des colonnes spécifiques pour qu’elles s’empilent verticalement tout en gardant les autres horizontales. Pour ce faire, ajustez chaque bloc de colonne selon vos besoins.

Vous pouvez modifier les paramètres de police, de couleur, d’alignement du texte, de hauteur de ligne et de marge intérieure pour les titres.

Vous pouvez également gagner du temps en laissant l’IA générer le texte du titre pour vous. Cliquez sur le bouton dans la section Smart Headings, saisissez quelques mots-clés, et cliquez sur Obtenir des suggestions :

Les textes sont personnalisables de la même manière que les titres : vous pouvez modifier les paramètres de police, de couleur, d’alignement du texte, de hauteur de ligne et de marge intérieure.

Vous pouvez également améliorer votre texte en utilisant l’option Smart Text :

Pour ajouter une image, cliquez sur le bloc d’image et faites glisser votre fichier dans le panneau de l’éditeur :

Alternativement, vous pouvez spécifier l’URL de l’image au lieu de téléverser un fichier.

Vous pouvez également expérimenter la génération d’images par IA. Pour ce faire, cliquez sur le bouton dans la section Magic Image, décrivez l’image que vous souhaitez créer, et cliquez sur Générer des images :

Dans la section Action, vous pouvez définir l’action qui doit être effectuée lors d’un clic sur l’image : ouvrir un site web (ou un lien profond vers une page de votre application) ou fermer la pop-up. Vous pouvez également insérer un attribut de gestionnaire JavaScript personnalisé pour définir l’action de clic sur l’image. Si aucune action n’est requise, ignorez ce paramètre.

Une fois qu’un bouton est ajouté à votre modèle, vous pouvez personnaliser son texte, sa couleur, sa marge intérieure et ses bordures.

L’IA peut vous aider à trouver du texte pour vos boutons. Il vous suffit de cliquer sur le bouton dans la section Smart Buttons, de saisir des mots-clés et de cliquer sur Obtenir des suggestions :

Pour spécifier l’action qui doit être effectuée après avoir cliqué sur le bouton, allez dans la section Action et sélectionnez l’option requise : ouvrir un site web ou fermer la pop-up. Vous pouvez également insérer un attribut de gestionnaire JavaScript personnalisé pour définir l’action de clic sur le bouton.

Les séparateurs sont des lignes que vous pouvez placer entre les blocs de contenu. Utilisez-les pour structurer votre modèle et mettre en valeur les blocs les plus importants. Vous pouvez modifier la largeur du séparateur, le type de ligne, l’alignement et les paramètres de marge intérieure.

Les formulaires vous permettent de collecter les e-mails des utilisateurs, leurs numéros de téléphone, leurs préférences et d’autres informations qui peuvent être utiles pour de futures communications. Cet élément est configuré comme un formulaire HTML standard : les données sont envoyées dans une requête GET ou POST à l’adresse spécifiée dans le champ URL.

Cliquez sur le nom du champ pour configurer ses paramètres :

• Type de champ : le type de données qui doit être transmis dans le champ ;
• Nom du champ : le nom du paramètre dans lequel les données du champ sont transmises ;
• Libellé du champ : texte affiché au-dessus du champ ;
• Texte de l’espace réservé ;
• Case à cocher indiquant si le champ est obligatoire pour soumettre le formulaire.

Pour ajouter un autre champ, cliquez sur Ajouter un nouveau champ et sélectionnez le type de données :

Vous pouvez personnaliser les paramètres du formulaire tels que la largeur, l’alignement, l’espacement entre les champs, le texte du bouton, les couleurs et les polices.

Le bloc HTML vous permet d’ajouter votre propre code HTML personnalisé à un modèle.

Cela peut être particulièrement utile pour améliorer vos messages in-app avec des éléments interactifs ou visuellement attrayants. Par exemple, si vous cherchez à créer des formulaires personnalisés pour des sondages, vous pouvez utiliser le bloc HTML pour inclure vos propres formulaires.

Après avoir configuré le formulaire, vous pouvez suivre les statistiques directement dans Pushwoosh, ce qui permet une analyse facile des résultats et des interactions des utilisateurs. Pour mettre en œuvre cela, vous aurez besoin de l’aide de votre équipe de développement, veuillez partager ce lien avec eux.

Il existe un modèle de page Rich Media préconçu avec un formulaire de sondage personnalisé dans les modèles par défaut. Vous pouvez l’utiliser comme référence ou point de départ pour vos propres formulaires de sondage.

De plus, vous pouvez enrichir vos messages in-app en y intégrant des vidéos pour une expérience utilisateur plus engageante. Voici un exemple d’intégration d’une vidéo YouTube à l’aide de HTML :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>In-App Video Example</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    text-align: center;
  }
  .video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
  }
  .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>
</head>
<body>

<h1>In-App Video Example</h1>

<div class="video-container">
       <iframe src="https://www.youtube.com/embed/TN1uyD2mONs?autoplay=1&mute=1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

</body>
</html>

L’élément Menu vous permet de placer plusieurs éléments cliquables en ligne ou en colonne. Par exemple, vous pouvez ajouter une barre de navigation ou les contacts de l’entreprise.

Pour ajouter un élément de menu, cliquez sur Ajouter un nouvel élément :

Ajoutez le texte de l’élément et définissez l’action qui doit être effectuée lors d’un clic sur l’élément :

Choisissez le type de menu horizontal ou vertical et ajoutez un séparateur entre les éléments si nécessaire :

Personnalisez le texte principal, l’en-tête ou le texte du bouton pour rendre votre contenu plus pertinent et engageant. Par exemple, vous pouvez vous adresser aux utilisateurs par leur nom ou mentionner leurs préférences.

D’abord, vous devez configurer les Tags et configurer la collecte de données auprès des utilisateurs (par exemple, via un formulaire de feedback). Lors de la création d’une page Rich Media, sélectionnez le bloc de contenu requis, cliquez sur Insérer des Tags, et sélectionnez le Tag que vous souhaitez utiliser :

Vous pouvez localiser les textes de votre modèle de page Rich Media pour chaque langue parlée par vos utilisateurs. Pour ce faire, basculez entre les langues dans la liste Langue modifiable et modifiez le contenu dans chaque langue séparément :

Si le contenu n’est pas localisé, il sera affiché dans la langue spécifiée comme langue par défaut dans les Paramètres de langue.

Dans l’onglet Popup, vous pouvez configurer les paramètres généraux du modèle :

• Définir la position de la pop-up sur l’écran ;
• Modifier la largeur et la hauteur de la pop-up ;
• Ajuster l’arrondi des bordures ;
• Configurer les paramètres de contenu pour l’ensemble du modèle : alignement, largeur, polices et couleurs ;
• Définir la couleur d’arrière-plan ou ajouter une image d’arrière-plan ;
• Personnaliser la position et l’apparence du bouton de fermeture.

Cliquez sur Enregistrer pour appliquer les modifications :

Vous pouvez maintenant utiliser votre modèle de page Rich Media de l’une des manières suivantes :

• Afficher un message In-App dans le cadre d’un parcours client ;
• Envoyer une notification push qui ouvre un message In-App lors du clic ;
• Afficher un unique message In-App à vos utilisateurs.