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 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éconçus.
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.

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 basée sur un modèle par défaut ou commencer à partir de zéro en sélectionnant un modèle vierge.

Ajouter du contenu

Mise en page

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

Création de messages in-app en mode 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.

Messages in-app en mode portrait

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.

Messages in-app en mode paysage

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

Ajout de colonnes aux messages in-app en mode paysage

Si vous devez ajouter des colonnes à vos messages in-app en mode 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 mode paysage avec des colonnes, passez à l’onglet Mobile. Faites défiler jusqu’à la section RESPONSIVE DESIGN, située en bas du panneau des paramètres, et activez l’option Do Not Stack on Mobile.

Note

Cette étape est essentielle pour maintenir la conception prévue de vos messages in-app en mode paysage lorsqu’ils sont affiché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 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 (padding) 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 Smart Headings, saisissez quelques mots-clés, et cliquez sur Get Suggestions :

Texte

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 remplissage (padding).

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 Smart Text :

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 Magic Image, décrivez l’image que vous souhaitez créer, et cliquez sur Generate Images :

Dans la section Action, vous pouvez définir l’action qui doit être effectuée lorsque l’on clique sur l’image. Vous pouvez ouvrir un site web (ou un lien profond vers une page de votre application) ou fermer le 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.

Note

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 (deep link).

Bouton

Une fois qu’un bouton est ajouté à votre modèle, vous pouvez personnaliser son texte, sa couleur, son remplissage (padding) 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 Smart Buttons, de saisir des mots-clés, et de cliquer sur Get 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. Vous pouvez ouvrir un site web ou fermer le pop-up. Vous pouvez également insérer un attribut de gestionnaire JavaScript personnalisé pour définir l’action de clic sur le bouton.

Note

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 (deep link).

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 (padding) 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, les numéros de téléphone, les préférences et d’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é (placeholder) ;
• 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 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 :

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 retour). 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 que vos utilisateurs parlent. 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.

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

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

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

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

Sélectionner l’animation d’entrée

Choisissez comment le message apparaît à l’écran.

Les options incluent : Haut, Bas, Gauche, Droite

Sélectionner l’animation de sortie

Choisissez comment le message disparaît.

Les options incluent : Haut, Bas, Gauche, Droite

Activer le balayage pour fermer (optionnel)

Permettre 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 une notification push qui ouvre un in-app lorsqu’on clique dessus ;
• Afficher un seul in-app à vos utilisateurs.