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

Ajouter un nouveau modèle

Allez dans Contenu → In-apps 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 de message in-app à partir d’un modèle par défaut ou 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 marge intérieure 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, généralement préférés 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 Ne pas empiler sur mobile.

Note

Cette étape est essentielle pour maintenir la conception prévue de vos messages in-app en mode paysage lorsqu’ils sont consulté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 marge intérieure 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. Vous pouvez modifier les paramètres de police, de couleur, d’alignement du texte, de hauteur de ligne et de marge intérieure.

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 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é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 Image magique, 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 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 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.

Note

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

Bouton

Une fois qu’un bouton est ajouté à votre modèle, vous pouvez personnaliser son texte, sa couleur, sa marge intérieure 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, saisissez 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 sélectionnez l’option requise. Vous pouvez 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.

Note

Si vous souhaitez ouvrir une page dans votre application mobile lorsque l’on clique sur le bouton, sélectionnez l’option Ouvrir le site web 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 marge intérieure 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 les communications futures. 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 passées ;
• É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 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 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.

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

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

• Définir la position du popup à l’écran ;
• Changer 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.

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

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