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.

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 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 Pop-up :

• Définissez la position du pop-up sur l’écran.
• Modifiez la largeur et la hauteur du pop-up.
• 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 d’arrière-plan ou ajoutez une image de fond.
• Personnalisez la position et l’apparence du bouton de fermeture.

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

Message in-app plein écran

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

Dans l’onglet Pop-up, 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 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 écran partiel

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

Dans l’onglet Pop-up, définissez une largeur et une hauteur plus petites afin que le pop-up 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 pop-ups d’opt-in et de récupération d’opt-out de permission push dans Customer Journey, consultez Créer des pop-ups 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 orientations 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 l’orientation portrait, généralement utilisée sur les appareils mobiles, accédez à 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.

Paysage (onglet Bureau)

Pour les messages in-app orientés paysage, ce qui est généralement préférable pour les écrans plus larges, accédez à 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 affichés sur des appareils mobiles. Elle garantit que les colonnes restent côte à côte, plutôt que de s’empiler.

Pushwoosh vous permet également de mélanger et d’assortir les mises en page de 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, saisissez 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 intitulé 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 le pop-up, ou Javascript personnalisé (insérer un gestionnaire JavaScript personnalisé). Si aucune action n’est requise, laissez Fermer le pop-up 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. Il suffit de cliquer sur le bouton dans la section Boutons intelligents, de saisir des mots-clés, et de cliquer sur Obtenir des suggestions :

Pour spécifier l’action à effectuer après avoir cliqué sur le bouton, allez à la section Action et ouvrez le menu déroulant Type d’action : URL ou Deeplink (ouvrir un site web ou un lien profond), Fermer le pop-up, 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 valeur 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 balayable 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 retirer celle qui est active.

3. Pour la diapositive sélectionnée, cliquez sur Télécharger une image ou choisissez une option parmi 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. Saisissez un 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 Minuteur ajoute un compte à rebours à 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 minuteur.

Pour configurer le minuteur :

1. Avec le bloc Minuteur 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 minuteur.

3. Activez les Étiquettes pour afficher Jours, Heures, Minutes et Secondes sous les chiffres, ou désactivez-les pour n’afficher que les nombres 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 les 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 en colonnes, comme des comparaisons de forfaits, des prix 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 d’arrière-plan. 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 rayées pour alterner les arrière-plans des lignes.

4. Cliquez sur une cellule dans l’aperçu pour saisir 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 commentaires). 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 l’apparence et le comportement de votre message in-app 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

Sélectionner l’animation d’entrée

Choisissez comment le message apparaît à l’écran. Dans les paramètres, il s’agit de l’option Animation de présentation.

Les options incluent : Haut, Bas, Gauche, Droite

Sélectionner l’animation de sortie

Choisissez comment le message disparaît. Dans les paramètres, il s’agit de l’option Animation de fermeture.

Les options incluent : Haut, Bas, Gauche, Droite

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.

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.