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 Panneau de Contrôle 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 les types modal, fullscreen et stories. Les types 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 Ajouter un modèle.
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 Ajouter un modèle.

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. Remplissez le contenu uniquement après avoir choisi un type définitif.

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 le Bouton de fermeture si vous voulez une commande ✕ pour que les utilisateurs puissent fermer l’in-app sans appuyer sur un bouton.
4. Activez Assombrir l’arrière-plan pour foncer 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, ainsi qu’un titre et un message, chacun avec sa propre couleur de texte.
2. Sous Configuration, définissez la couleur de couverture. Elle s’affiche pendant le chargement de l’image de couverture, ou seule si vous laissez le champ de l’image vide.
3. Activez le Bouton de fermeture si vous voulez une commande ✕ 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, similaire aux stories des réseaux sociaux. Chaque diapositive est sa propre entrée Stories sous Contenu.

1. Remplissez l’Image, le Titre et le Message de la première diapositive (chacun avec sa propre couleur de texte).
2. Réglez les Secondes pour déterminer combien de temps 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 la Sauvegarde avec une erreur de validation.
3. Facultativement, cliquez sur Ajouter à l’intérieur de la diapositive pour lui donner son propre bouton d’appel à l’action. 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 depuis la première diapositive après la fin de la dernière.
6. Activez le Bouton de fermeture si vous voulez une commande ✕ 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 le Bouton de fermeture si vous voulez une commande ✕ 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 l’Image, le Titre et le 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 pour 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 le Bouton de fermeture si vous voulez une commande ✕ 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 définissez l’Action de chaque carte sur url, l’utilisateur n’a aucune commande à l’écran pour fermer le carrousel. Un appui ouvre 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 la 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 le Bouton de fermeture si vous voulez une commande ✕ sur la bannière.
6. Sous Actions, réglez l’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 reste à l’écran sans aucun moyen de la fermer. Un appui ouvre toujours le lien au lieu de la fermer.

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 lien profond 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 non plus, l’utilisateur n’a aucune commande à 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 :

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 copie le contenu de la langue par défaut dans celle-ci : texte, images et libellés de boutons. Passez à cette langue et modifiez n’importe lequel de ces champs indépendamment.

Sauvegarder le modèle

Cliquez sur Sauvegarder en haut à droite pour enregistrer 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 une notification 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.