Créer des messages in-app dans l'éditeur intégré

Vidéo Youtube : Créez des In-Apps sans coder dans notre éditeur facile à utiliser

Ajouter un nouveau modèle

Pour créer un modèle in-app, allez dans Contenu → In-apps et cliquez sur Ajouter un modèle :

Ici, vous avez deux façons de créer un modèle :

1. Télécharger un ZIP — téléchargez un fichier ZIP avec votre message in-app HTML.
2. Créer un nouveau modèle — construisez un modèle dans l’éditeur visuel. Après l’avoir créé, vous pouvez partir d’un modèle pré-construit ou d’un modèle vierge.

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.

Entrez 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 de message in-app à partir d’un modèle par défaut ou commencer de zéro en sélectionnant un modèle vierge.

Paramètres généraux du modèle

Avant d’ajouter des blocs de contenu, configurez le modèle dans l’onglet Popup :

• Définissez la position de la popup sur l’écran.
• Modifiez la largeur et la hauteur de la popup.
• Ajustez l’arrondi des bordures.
• Configurez les paramètres de contenu pour l’ensemble du modèle : alignement, largeur, polices et couleurs.
• Définissez la couleur de fond ou ajoutez une image de fond.
• Personnalisez la position et l’apparence du bouton de fermeture.

Les in-apps en plein écran et en écran partiel utilisent le même éditeur. Choisissez un format ci-dessous et définissez la largeur et la hauteur de la popup pour qu’elles correspondent.

Message in-app en plein écran

Utilisez les in-apps en plein écran pour l’intégration, les murs de paiement et les promotions telles que les murs d’offres.

Dans l’onglet Popup, définissez une largeur et une hauteur proches de la taille de l’écran de l’appareil cible afin que le message couvre la majeure partie de l’affichage.

Recommandations d’images pour les in-apps en plein écran (orientation portrait)

Image et texte	Haute résolution : 1200 x 1000 px Taille minimale : 600 x 500 px Ratio d’aspect : 6:5
Image seule	Haute résolution : 1200 x 2000 px Taille minimale : 600 x 1000 px Ratio d’aspect : 3:5

Note

Pour les applications natives iOS et Android, ouvrez Paramètres → Paramètres In-App, et définissez la position du message sur Plein écran.

Message in-app en écran partiel

Les in-apps en écran partiel sont des messages superposés compacts qui laissent une partie de l’application visible derrière la popup. Utilisez-les pour les invites d’opt-in, les annonces et le contenu promotionnel.

Dans l’onglet Popup, définissez une largeur et une hauteur plus petites pour que la popup ne couvre pas tout l’écran.

Note

Pour les applications natives iOS et Android, ouvrez Paramètres → Paramètres In-App, et choisissez Centre, Haut, ou Bas pour la position du message.

Conseil

Pour automatiser les popups d’opt-in et de récupération d’opt-out pour les permissions push dans Customer Journey, consultez Créer des popups d’opt-in et d’opt-out.

Ajouter du contenu

Blocs de contenu

Définissez la mise en page du modèle en glissant-déposant les blocs de contenu requis dans le corps du modèle. Vous pouvez ajouter des titres, du texte, des images, des boutons, des séparateurs, des formulaires à remplir, des blocs HTML, des menus, des carrousels d’images, des comptes à rebours et des tableaux.

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 remplissage et télécharger une image de fond.

Orientation portrait et paysage

Pushwoosh offre la flexibilité de créer du contenu de message in-app en orientation portrait et paysage. Cela garantit que vos campagnes sont visuellement attrayantes et efficaces sur tous les appareils.

Portrait (onglet Mobile)

Pour créer des messages in-app conçus pour une 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 smartphones.

Paysage (onglet Bureau)

Pour les messages in-app orientés paysage, ce qui est généralement préféré pour les écrans plus larges, naviguez vers l’onglet Bureau dans l’éditeur. Ici, vous pouvez structurer vos messages in-app pour tirer parti d’un espace horizontal plus large.

Colonnes dans les mises en page paysage

Si vous devez ajouter des colonnes à vos messages in-app en paysage, ajoutez d’abord l’élément Colonne. Définissez le nombre et la disposition des colonnes dont vous avez besoin.

Après avoir conçu vos messages in-app en 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.

Note

Cette étape est essentielle pour maintenir le design prévu de vos messages in-app en paysage lorsqu’ils sont consultés sur des appareils mobiles. Elle garantit que les colonnes restent côte à côte, au lieu de s’empiler.

Pushwoosh vous permet également de mélanger et d’assortir les mises en page en colonnes dans vos messages in-app. 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.

Éléments de contenu

Titre

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

Note

Si vous souhaitez personnaliser le titre pour chaque utilisateur, ajoutez-y des Tags.

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 Titres Intelligents, entrez quelques mots-clés, et cliquez sur Obtenir des Suggestions :

Texte

Les textes sont personnalisables de la même manière que les titres (dans l’éditeur, ce bloc est étiqueté Paragraphe). Vous pouvez modifier les paramètres de police, de couleur, d’alignement du texte, de hauteur de ligne et de remplissage.

Note

Si vous souhaitez personnaliser le texte pour chaque utilisateur, ajoutez-y des Tags.

Vous pouvez également améliorer votre texte en utilisant l’option Texte Intelligent :

Image

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 coller l’URL d’une image de votre Médiathèque dans le champ URL de l’image.

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

Pour placer du texte directement sur une image, sélectionnez le bloc image et cliquez sur Appliquer des effets. Cliquez sur Texte, insérez votre contenu, et ajustez ses paramètres :

Dans la section Action, ouvrez le menu déroulant Type d’action pour définir ce qui se passe lorsque l’on clique sur l’image : URL ou Deeplink (ouvrir un site web ou un lien profond vers une page de votre application), Fermer la Popup, ou Javascript Personnalisé (insérer un gestionnaire JavaScript personnalisé). Si aucune action n’est requise, laissez Fermer la Popup sélectionné.

Note

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

Bouton

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

Note

Si vous souhaitez personnaliser le texte du bouton pour chaque utilisateur, ajoutez-y des Tags.

L’IA peut vous aider à trouver du texte pour les boutons. Cliquez simplement sur le bouton dans la section Boutons Intelligents, entrez des mots-clés, et cliquez 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 ouvrez le menu déroulant Type d’action : URL ou Deeplink (ouvrir un site web ou un lien profond), Fermer la Popup, ou Javascript Personnalisé (insérer un gestionnaire JavaScript personnalisé).

Note

Si vous souhaitez ouvrir une page dans votre application mobile lorsque vous cliquez sur le bouton, sélectionnez l’option URL ou Deeplink et insérez un lien profond.

Séparateur

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 évidence les blocs les plus importants. Vous pouvez modifier la largeur, le type de ligne, l’alignement et les paramètres de remplissage du séparateur.

Formulaire

Note

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

Les formulaires vous permettent de collecter les e-mails, numéros de téléphone, préférences et autres informations des utilisateurs 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 ;
• É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’espace entre les champs, le texte du bouton, les couleurs et les polices.

HTML

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 enquêtes, vous pouvez utiliser le bloc HTML pour inclure vos propres formulaires conçus.

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 message in-app pré-conçu avec un formulaire d’enquête 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 d’enquête.

De plus, vous pouvez améliorer vos messages in-app en intégrant des vidéos pour une expérience utilisateur plus engageante. Voici un exemple de comment intégrer une vidéo YouTube en utilisant 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>

Menu

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 en cliquant sur l’élément :

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

Carrousel d’images

L’élément Carrousel affiche plusieurs images dans un curseur défilant au sein d’un seul message in-app. Utilisez-le pour présenter plusieurs produits, captures d’écran ou étapes d’intégration.

Pour configurer le carrousel :

1. Avec le bloc Carrousel sélectionné, basculez entre Mobile et Bureau en haut du panneau pour configurer chaque vue.

2. Dans la section Images, utilisez les onglets Image 1, Image 2, Image 3, etc. pour sélectionner une diapositive. Cliquez sur + pour ajouter une autre diapositive ou sur l’icône de suppression pour supprimer celle qui est active.

3. Pour la diapositive sélectionnée, cliquez sur Télécharger l’image ou choisissez une option dans Plus d’images. Vous pouvez également coller un lien hébergé dans URL de l’image, y compris une image de votre Médiathèque.

4. Entrez le Texte alternatif pour la diapositive. Pour ajuster l’image elle-même, cliquez sur Modifier l’image à côté de l’aperçu de la miniature.

5. Cliquez sur Afficher plus d’options en bas du panneau si vous avez besoin de paramètres de diapositive supplémentaires.

Compte à rebours

L’élément Compte à rebours ajoute un décompte à votre message in-app. Utilisez-le pour les offres à durée limitée, les ventes flash et les rappels d’événements. Définissez la date et l’heure cibles, puis personnalisez l’apparence du compte à rebours.

Pour configurer le compte à rebours :

1. Avec le bloc Compte à rebours sélectionné, basculez entre Mobile et Bureau en haut du panneau pour configurer chaque vue.

2. Dans la section Compte à rebours, définissez l’Heure de fin à la date et à l’heure auxquelles le compte à rebours doit atteindre zéro. Choisissez le Fuseau horaire et la Langue pour les étiquettes du compte à rebours.

3. Activez les Étiquettes pour afficher Jours, Heures, Minutes et Secondes sous les chiffres, ou désactivez-les pour n’afficher que les chiffres du compte à rebours.

4. Dans la section Style, définissez l’Arrière-plan, la Couleur des chiffres et la Couleur des étiquettes. Choisissez la Police des chiffres, la Taille de la police des chiffres, la Police des étiquettes et la Taille de la police des étiquettes.

5. Configurez d’autres options dans Image, Action et Général selon vos besoins.

Tableau

L’élément Tableau vous permet de présenter du contenu structuré en lignes et colonnes, comme des comparaisons de forfaits, des tarifs ou des listes de fonctionnalités. Ajoutez ou supprimez des lignes et des colonnes et personnalisez les bordures, le remplissage et le style du texte.

Pour configurer le tableau :

1. Avec le bloc Tableau sélectionné, basculez entre Mobile et Bureau en haut du panneau pour configurer chaque vue.

2. Dans la section Mise en page, définissez les Colonnes et les Lignes avec les boutons + et -.

3. Choisissez la Couleur de fond. Activez la Bordure pour définir le style, l’épaisseur et la couleur, ou utilisez Plus d’options pour des paramètres de bordure avancés. Activez les Lignes zébrées pour alterner les arrière-plans des lignes.

4. Cliquez sur une cellule dans l’aperçu pour entrer le texte de l’en-tête ou du corps.

5. Dans En-tête et Contenu, personnalisez les polices, les couleurs et l’alignement du texte pour les cellules d’en-tête et de corps.

6. Configurez les Liens, Général et Design Responsive selon vos besoins.

Personnalisation du contenu

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 de messages in-app, sélectionnez le bloc de contenu requis, cliquez sur Fusionner les Tags, et sélectionnez le Tag que vous souhaitez utiliser :

Modèles multilingues

Vous pouvez localiser les textes de votre modèle de message in-app 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.

Note

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.

Personnaliser l’apparence et le comportement des messages in-app (iOS et Android Natif)

Utilisez les Paramètres In-App pour contrôler l’apparence et le comportement de vos messages in-app sur les applications natives iOS et Android. Vous pouvez ajuster la position à l’écran, choisir des animations et activer les gestes de balayage pour fermer.

Pour configurer les paramètres in-app :

1. Cliquez sur Paramètres en haut de l’écran.

2. Dans la fenêtre des paramètres, choisissez comment vous voulez que votre message in-app apparaisse et se comporte en ajustant les options disponibles :

Définir la position du message à l’écran

Choisissez où le message doit apparaître.

Les options incluent : Plein écran, Haut, Centre, Bas

Définir les animations d’entrée et de sortie

Choisissez comment le message apparaît et disparaît de l’écran. Dans les paramètres, utilisez Animation de présentation pour l’entrée et Animation de fermeture pour la sortie. Les deux champs offrent les mêmes options :

• Haut
• Bas
• Gauche
• Droite
• Fondu : le message apparaît ou disparaît en fondu.
• Aucune : le message apparaît ou disparaît instantanément, sans animation.
• Par défaut : utilise l’animation définie dans le code de votre application (la valeur par défaut du SDK).

Note

Fondu et Aucune fonctionnent actuellement sur Android. Sur iOS, la modale apparaît ou disparaît instantanément (alignement à venir).

Définir la durée de l’animation (optionnel)

Définissez la durée des animations d’entrée et de sortie.

1. Dans le champ Durée de l’animation, entrez une valeur de 100 à 3000 millisecondes par pas de 100.
2. Laissez le champ vide pour utiliser la durée par défaut du SDK.

Le paramètre s’applique à l’animation d’affichage et de masquage de la modale sur iOS et Android Natif.

Note

Durée de l’animation (ms) n’a pas de valeur par défaut prédéfinie dans l’éditeur. Lorsque le champ est vide, le SDK utilise la durée de votre code d’application.

• Sur Android, définissez-la avec animationDuration() dans Rich media modal Android.
• Sur iOS, consultez Rich media modal iOS pour les paramètres d’animation de la modale.

Activer le balayage pour fermer (optionnel)

Permettez aux utilisateurs de fermer le message en balayant dans une ou plusieurs directions.

Les options incluent : Gauche, Droite, Haut, Bas

3. Après avoir sélectionné vos préférences, cliquez sur Appliquer pour enregistrer les modifications ou sur Annuler pour les ignorer.

Enregistrer et utiliser le modèle

Cliquez sur Enregistrer pour appliquer les modifications.

Note

L’éditeur conserve les modifications non enregistrées en tant que brouillon dans votre navigateur. Lorsque vous rouvrez le même modèle, cliquez sur Restaurer dans la boîte de dialogue Restaurer les modifications non enregistrées ? pour continuer à partir du brouillon, ou sur Ignorer pour ouvrir la dernière version enregistrée.

Vous pouvez maintenant utiliser votre modèle de message in-app de l’une des manières suivantes :

• Afficher un in-app dans le cadre d’un parcours client ;
• Envoyer un push qui ouvre un in-app lorsqu’on clique dessus ;
• Afficher un seul in-app à vos utilisateurs.