Créer des messages in-app natifs

Les in-apps natifs utilisent des mises en page prêtes à l’emploi que le SDK Pushwoosh affiche directement sur l’appareil, au lieu de la page HTML chargée par un in-app personnalisé. Cela leur permet de se charger plus rapidement et d’avoir des animations plus fluides, et vous n’avez pas besoin de compétences en design ou en développement pour en créer un.

Optez pour un in-app natif lorsque vous souhaitez lancer rapidement une promotion, un rappel ou une annonce de fonctionnalité et qu’une mise en page entièrement personnalisée n’est pas nécessaire. Si vous avez besoin d’un contrôle total sur le design, créez plutôt un in-app basé sur HTML.

Prérequis

Assistance d'un développeur requise

Vous pouvez créer un modèle d’in-app natif dans le Control Panel sans aucune modification de code. Mais les utilisateurs ne le verront que si leur application exécute une version du SDK Pushwoosh suffisamment récente pour l’afficher. Vérifiez auprès de votre équipe de développement avant de le lancer.

Avant de créer un modèle d’in-app natif, assurez-vous que :

• Le SDK Pushwoosh est intégré dans votre application pour que les messages in-app puissent apparaître. En savoir plus
• Votre application exécute le SDK iOS 7.2.0+ ou le SDK Android 6.10.0+ pour modal, fullscreen et stories. Sheet, carousel et banner nécessitent le SDK iOS 7.2.1+ ou le SDK Android 6.10.1+.

Créer un modèle d’in-app natif

1. Allez dans Contenu → In-apps.
2. Cliquez sur Créer un in-app.
3. Saisissez un nom de modèle.
4. Sélectionnez Créer un rich media natif.
5. Dans TYPE D’AFFICHAGE, choisissez un type d’affichage : modal, fullscreen, stories, sheet, carousel ou banner.
6. Cliquez sur Créer un in-app.

L’éditeur s’ouvre avec un aperçu mobile en direct à droite et les champs du modèle à gauche, regroupés en Contenu, Configuration et Actions. Ce que vous voyez dans chaque groupe dépend du type d’affichage que vous avez choisi.

Configurer le type d’affichage

Attention

Le menu déroulant Type d’affichage en haut de l’éditeur vous permet de changer de type à tout moment, mais ce changement réinitialise tous les champs Contenu, Configuration et Actions ci-dessous à leurs valeurs par défaut pour le nouveau type. Ne remplissez le contenu qu’après avoir choisi un type.

Modal

Une carte centrée, affichée éventuellement sur un arrière-plan assombri.

1. Sous Contenu, ajoutez un titre et un message, chacun avec sa propre couleur de texte, plus une image facultative.
2. Sous Configuration, définissez la couleur d’arrière-plan de la carte. Cela remplit la carte derrière votre texte et votre image.
3. Activez Bouton de fermeture si vous voulez un contrôle ✕ pour que les utilisateurs puissent fermer l’in-app sans appuyer sur un bouton.
4. Activez Assombrir l’arrière-plan pour assombrir l’écran derrière la carte et maintenir l’attention sur votre message.
5. Sous Actions, ajoutez un ou plusieurs boutons. Voir Configurer les boutons.

Fullscreen

Une image de couverture bord à bord avec du texte et des boutons par-dessus. Remplissez ces champs dans le panneau de gauche :

1. Sous Contenu, ajoutez une image de couverture, plus un titre et un message, chacun avec sa propre couleur de texte.
2. Sous Configuration, définissez la couleur de la couverture. Elle s’affiche pendant le chargement de l’image de couverture, ou seule si vous laissez l’image vide.
3. Activez Bouton de fermeture si vous voulez un contrôle ✕ pour que les utilisateurs puissent fermer l’in-app sans appuyer sur un bouton.
4. Sous Actions, ajoutez un ou plusieurs boutons. Voir Configurer les boutons.

Stories

Une séquence de diapositives en plein écran avec des barres de progression en haut, similaires aux stories des réseaux sociaux. Chaque diapositive est sa propre entrée Stories sous Contenu.

1. Remplissez les champs Image, Titre et Message de la première diapositive (chacun avec sa propre couleur de texte).
2. Réglez Secondes sur la durée pendant laquelle la diapositive reste à l’écran avant de passer à la suivante. La valeur par défaut est 5. Saisissez une valeur de 1 à 30. Les valeurs en dehors de cette plage bloquent l’Enregistrement avec une erreur de validation.
3. Facultativement, cliquez sur Ajouter à l’intérieur de la diapositive pour lui donner son propre bouton CTA. Voir Configurer les boutons.

4. Cliquez sur Ajouter sous la dernière diapositive pour en ajouter une autre, puis répétez les étapes 1 à 3 pour celle-ci.
5. Sous Configuration, activez Boucle si vous voulez que la story recommence à partir de la première diapositive après la fin de la dernière.
6. Activez Bouton de fermeture si vous voulez un contrôle ✕ pour que les utilisateurs puissent quitter avant que toutes les diapositives ne soient lues.

Exemple de l’apparence de la story terminée pour l’utilisateur

Sheet

Une feuille inférieure qui glisse vers le haut depuis le bord inférieur de l’écran. Une poignée en haut permet aux utilisateurs de la faire glisser vers le bas pour la fermer.

Remplissez ces champs dans le panneau de gauche :

1. Sous Contenu, ajoutez un titre et un message, chacun avec sa propre couleur de texte, plus une image facultative.
2. Sous Configuration, définissez la couleur d’arrière-plan de la feuille. Cela remplit le panneau derrière votre texte et votre image.
3. Activez Bouton de fermeture si vous voulez un contrôle ✕ pour que les utilisateurs puissent fermer la feuille sans appuyer sur un bouton.
4. Sous Actions, ajoutez un ou plusieurs boutons. Voir Configurer les boutons.

Carousel

Un message en plein écran avec plusieurs cartes que les utilisateurs font défiler. Des points en bas indiquent quelle carte est active. Sous Contenu, chaque carte est une entrée Cartes distincte.

1. Remplissez les champs Image, Titre et Message de la première carte (chacun avec sa propre couleur de texte).
2. Définissez l’Action pour la carte. Choisissez fermer pour fermer l’in-app lorsque l’utilisateur appuie sur la carte, ou url pour ouvrir un lien (mêmes options que Configurer les boutons).
3. Cliquez sur Ajouter sous la dernière carte pour en ajouter une autre, puis répétez les étapes 1 et 2 pour celle-ci.
4. Activez Bouton de fermeture si vous voulez un contrôle ✕ pour que les utilisateurs puissent quitter le carrousel sans appuyer sur une carte.

Attention

Si vous désactivez le Bouton de fermeture et que vous réglez l’Action de chaque carte sur url, l’utilisateur n’aura aucun contrôle à l’écran pour fermer le carrousel. Un appui ouvrira toujours un lien au lieu de le fermer.

Banner

Une barre compacte épinglée au bord supérieur ou inférieur de l’écran, pour les messages qui ne doivent pas bloquer toute l’interface utilisateur.

1. Sous Contenu, ajoutez un titre et un message, chacun avec sa propre couleur de texte, plus une petite image facultative.
2. Sous Configuration, réglez Position sur haut ou bas pour épingler la bannière au bord de l’écran que vous souhaitez.
3. Réglez Fermeture automatique, sec pour fermer automatiquement la bannière après ce nombre de secondes. Laissez ce champ vide pour conserver la bannière jusqu’à ce que l’utilisateur la ferme.
4. Définissez la couleur d’arrière-plan de la barre.
5. Activez Bouton de fermeture si vous voulez un contrôle ✕ sur la bannière.
6. Sous Actions, réglez Action sur fermer ou url. Les bannières n’ont pas de boutons séparés. Appuyer n’importe où sur la bannière exécute cette action. Voir Configurer les boutons pour le comportement de fermer et url.

Attention

Si vous désactivez le Bouton de fermeture, que vous réglez l’Action sur url et que vous laissez Fermeture automatique vide, la bannière restera à l’écran sans aucun moyen de la fermer. Un appui ouvrira toujours le lien au lieu de la fermer.

Configurer les champs de texte

Les champs de texte ne prennent pas en charge le texte sur plusieurs lignes. Si vous appuyez sur Entrée, l’éditeur peut afficher un saut de ligne, mais Pushwoosh enregistre un espace à la place. Sur l’appareil, le texte apparaît sur une seule ligne.

Pour ajouter un emoji, cliquez sur Emoji à côté de la barre d’outils du champ. Les emojis sont pris en charge dans les mêmes champs de texte que le texte brut. Vérifiez l’aperçu en direct pour voir leur apparence sur la mise en page.

Ajouter du contenu dynamique

Chaque champ de texte prend en charge la personnalisation avec des tags et l’User ID.

1. Cliquez sur Personnalisation à côté de la barre d’outils du champ.
2. Sous Tag, choisissez un tag ou User ID.
3. Choisissez un modificateur de format (par exemple, CapitalizeFirst ou regular).
4. Facultativement, saisissez une Valeur de Tag par défaut.
5. Cliquez sur Insérer.

Le tag inséré s’affiche sous forme de puce dans le champ. Vous pouvez modifier le tag, le modificateur et la valeur par défaut avant de cliquer sur Insérer. La personnalisation utilise les mêmes tags, modificateurs et valeurs par défaut que le Contenu dynamique.

Conseil

Pour une logique conditionnelle (par exemple, afficher ce texte uniquement si un tag est égal à une valeur spécifique), tapez la syntaxe Liquid directement dans le champ.

Lorsque vous cliquez sur Enregistrer, Pushwoosh vérifie le contenu dynamique et Liquid dans chaque champ de texte. Si un champ ne peut pas être analysé (par exemple, une balise {% if %} non fermée), l’Enregistrement est bloqué et un message d’alerte Le contenu dynamique contient des erreurs nomme le champ et la langue défectueux. Corrigez-le, puis cliquez à nouveau sur Enregistrer.

Note

La vérification Liquid lors de l’enregistrement détecte les erreurs de syntaxe comme une balise non fermée. Elle peut tout de même laisser passer des expressions incomplètes qui n’échoueront que lors de l’envoi du message. Envoyez-vous un test si vous utilisez autre chose qu’un simple tag.

Configurer les boutons

Les types modal, fullscreen, chaque diapositive de stories et sheet utilisent les mêmes champs de bouton :

• Texte du bouton et sa couleur.
• Arrière-plan, Couleur de la bordure et Rayon de la bordure.
• Action : choisissez ce qui se passe lorsque l’utilisateur appuie sur le bouton :
  • fermer : ferme l’in-app.
  • url : ouvre le lien que vous saisissez dans le champ qui apparaît. Utilisez une adresse web (par exemple, https://example.com) ou un deep link dans votre application (par exemple, myapp://product/123).

Cliquez sur Ajouter pour ajouter un autre bouton, ou sur le × d’un bouton pour le supprimer.

Attention

Si vous désactivez le Bouton de fermeture et que vous n’ajoutez aucun bouton, l’utilisateur n’aura aucun contrôle à l’écran pour fermer l’in-app.

Ajouter des localisations

Par défaut, un in-app natif a une seule langue. Pour en ajouter d’autres :

Note

Le sélecteur de langue ici ne compte que les appareils sur les plateformes qui affichent le contenu in-app. Les valeurs de langue définies via les Tags au niveau de l’utilisateur ne sont pas liées à une plateforme d’appareil, elles n’apparaissent donc pas ici.

1. Cliquez sur + à côté du sélecteur de langue dans la barre supérieure.
2. Sélectionnez les langues à ajouter et cliquez sur Appliquer.

3. Utilisez le sélecteur de langue dans la barre supérieure pour basculer entre les langues et remplir les champs de texte pour chacune d’elles.

Note

Lorsque vous ajoutez une langue, Pushwoosh y copie le contenu de la langue par défaut : texte, images et libellés de boutons. Passez à cette langue et modifiez n’importe lequel de ces champs indépendamment.

Enregistrer le modèle

Cliquez sur Enregistrer en haut à droite pour conserver vos modifications.

Le modèle apparaît alors dans Contenu → In-apps à côté de vos autres modèles d’in-app.

L’utiliser dans une campagne

Un modèle d’in-app natif apparaît dans le sélecteur de modèles avec vos autres modèles d’in-app.

Vous pouvez l’utiliser pour :

• Envoyer un in-app instantané
• Ajouter une étape in-app à un Customer Journey
• Ouvrir un in-app lorsque l’utilisateur appuie sur un push

Note

Les paramètres de livraison, tels que les dates de début et de fin et le plafonnement de la fréquence, fonctionnent de la même manière que pour tout autre in-app et ne font pas partie de cet éditeur.