Créer des messages in-app avec l'éditeur no-code

Pour créer un modèle in-app (également appelé Média Riche), allez dans Contenu → In-Apps (Média Riche) et cliquez sur Ajouter un modèle :

Ici, vous avez trois options :

1. Télécharger un fichier ZIP avec votre message in-app HTML.
2. Choisir et personnaliser l’un des modèles prédéfinis.
3. Construire votre propre modèle à partir de zéro.

Dans cet article, nous allons voir comment créer un modèle à partir de zéro. Suivez les mêmes étapes pour personnaliser votre modèle existant.

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 changer la couleur de fond 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 (padding) et télécharger une image de fond.

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

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

Pour les Rich Media en orientation paysage, qui sont généralement affichés sur des écrans plus larges comme les tablettes ou dans des applications orientées horizontalement telles que les jeux ou les lecteurs de musique, naviguez vers l’onglet Ordinateur dans l’éditeur. Ici, vous pouvez structurer votre Rich Media pour tirer parti d’un espace horizontal plus large.

Si vous devez ajouter des colonnes à votre Rich Media en format 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 Rich Media en format paysage avec des colonnes, passez à l’onglet Mobile.

Faites défiler jusqu’à la section DESIGN RESPONSIVE, située en bas du panneau des paramètres, et activez l’option Ne pas empiler sur mobile.

Pushwoosh vous permet également de combiner différentes mises en page de colonnes dans votre 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 (padding) 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, entrez 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 (padding).

Vous pouvez également utiliser l’éditeur IA de Pushwoosh pour réécrire votre texte avec un ton différent, modifier sa longueur en caractères et vérifier la grammaire. Pour ce faire, cliquez sur le bloc de texte → Smart Text et choisissez l’un des formats de texte intégrés :

Pour ajouter une image, cliquez sur le bloc 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écharger 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 à effectuer lors d’un clic sur l’image : ouvrir un site web (ou un lien profond vers une page de votre application) ou fermer le popup. 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.

Si vous souhaitez ouvrir une page dans votre application mobile lorsque l’on clique sur l’image, sélectionnez l’option Ouvrir un site web et insérez un lien profond.

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

L’IA peut vous aider à trouver du texte pour vos boutons. Cliquez simplement sur le bouton dans la section Smart Buttons, entrez des mots-clés, et cliquez sur Obtenir des suggestions :

Pour spécifier l’action à effectuer après avoir cliqué sur le bouton, allez dans la section Action et sélectionnez l’option requise : ouvrir un site web ou fermer le popup. Vous pouvez également insérer un attribut de gestionnaire JavaScript personnalisé pour définir l’action de clic sur le bouton.

Si vous souhaitez ouvrir une page dans votre application mobile lorsque l’on clique sur le bouton, sélectionnez l’option Ouvrir un site web et insérez un lien profond.

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, le type de ligne, l’alignement et les paramètres de marge intérieure (padding) du séparateur.

Pour configurer cet élément, vous aurez besoin de l’aide d’un développeur.

Les formulaires vous permettent de collecter les e-mails, les numéros de téléphone, les préférences et d’autres informations des utilisateurs qui peuvent être utiles pour les communications futures. Cet élément est configuré comme un formulaire HTML standard : les données sont envoyées via 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 auquel les données du champ sont transmises ;
• Étiquette 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.

Ajoutez le bloc HTML si vous souhaitez inclure votre propre code HTML dans le modèle.

L’élément Menu vous permet de placer plusieurs éléments cliquables sur une ligne ou dans une 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 lorsque l’on clique 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’un Rich Media, sélectionnez le bloc de contenu requis, cliquez sur Fusionner les Tags, et sélectionnez le Tag que vous souhaitez utiliser :

Vous pouvez localiser les textes de votre modèle 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 par défaut dans les Paramètres de langue.

Tout élément que vous ajoutez au modèle apparaît avec le même contenu pour toutes les langues. N’oubliez pas de localiser les textes ajoutés (y compris les textes des boutons) pour toutes les langues que vous utilisez dans votre modèle.

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

• Définir la position du popup sur l’écran ;
• Modifier la largeur et la hauteur du popup ;
• 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 de fond ou ajouter une image de fond ;
• Personnaliser la position et l’apparence du bouton de fermeture.

Cliquez sur Enregistrer pour appliquer les modifications :

Vous pouvez maintenant utiliser votre modèle Rich Media pour envoyer vos messages in-app. Veuillez suivre ce guide pour ce faire >