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

Créez un modèle de message in-app dans l’éditeur intégré de Pushwoosh sans écrire de code. Vous obtenez une mise en page réutilisable avec des blocs de contenu, des images, des boutons et du texte personnalisé que vous pouvez afficher dans un Customer Journey, en tant que message in-app ponctuel ou depuis une notification push.

Note

Avant de commencer, intégrez le SDK Pushwoosh pour que les messages in-app puissent apparaître dans votre application. En savoir plus

Créer un nouveau modèle in-app

Un modèle in-app est un design réutilisable que vous créez une fois puis que vous montrez aux utilisateurs dans les campagnes. Vous pouvez en créer un dans l’éditeur intégré, télécharger un ZIP HTML personnalisé ou construire un modèle rich media natif. Cet article couvre la création d’un modèle à partir de zéro dans l’éditeur intégré. Suivez les mêmes étapes pour personnaliser un modèle existant.

1. Allez dans Contenu → In-apps.
2. Cliquez sur Créer un in-app.

3. Saisissez un nom de modèle.
4. Choisissez comment créer le modèle :
   • Créer un nouveau modèle : construisez un modèle dans l’éditeur intégré.
   • Télécharger un ZIP : téléchargez un fichier ZIP avec votre message in-app HTML.
   • Créer un rich media natif : construisez un in-app natif rendu par le SDK. En savoir plus
5. Sélectionnez Créer un nouveau modèle.
6. Cliquez sur Créer un in-app.

Explorer la mise en page de l’éditeur

L’éditeur intégré comporte quatre zones. Chacune a une fonction claire.

Barre supérieure

La barre supérieure est l’endroit où vous gérez le modèle dans son ensemble : son nom, l’historique d’annulation, le statut de sauvegarde, son apparence sur l’appareil (Paramètres in-app), les langues (Traduction automatique et le sélecteur de langue), la largeur de l’aperçu sur téléphone ou ordinateur, et une analyse du contenu (Vérifier). Voir Configurer l’apparence de l’in-app sur l’appareil, Localiser le modèle, et Vérifier votre contenu avant de sauvegarder.

Ouvrez le menu ⋮ dans la barre supérieure pour plus d’actions :

Aperçu

Aperçu vous permet d’essayer le message avant de l’enregistrer : appuyez sur les boutons, naviguez dans les flux multi-écrans et vérifiez la mise en page sur téléphone ou ordinateur.

Ce qui fonctionne dans l’aperçu :

• Les boutons et les flux multi-écrans s’exécutent réellement.
• Les liens et les liens profonds sont signalés, mais pas ouverts.
• Les appels SDK et les statistiques d’ouverture/clic restent désactivés.
• La langue correspond au sélecteur de langue. Les Merge Tags restent des espaces réservés.

Dans l’en-tête de l’aperçu, basculez entre téléphone et ordinateur pour voir les deux mises en page. Cliquez sur Redémarrer pour afficher à nouveau le message depuis le début. Pour quitter l’aperçu, appuyez sur Échap ou cliquez en dehors du panneau.

Guide de marque

• Guide de marque : ouvrez le Guide de marque de votre compte.
• Appliquer les styles du guide de marque : redéfinissez le style du modèle pour qu’il corresponde à votre Guide de marque (une fois que vous en avez configuré un).
• Réinitialiser les styles personnalisés : supprimez les surcharges de style sur le modèle et revenez aux valeurs par défaut.

Télécharger .zip

Télécharger .zip enregistre le modèle sous forme de fichier ZIP. Il télécharge la dernière version enregistrée, alors enregistrez d’abord vos modifications. L’élément de menu n’apparaît qu’après que le modèle a été enregistré au moins une fois — les nouveaux modèles non enregistrés ne l’affichent pas.

Canevas

Modifiez le message sur le canevas : cliquez sur le texte, les images et les boutons pour les changer. Utilisez le sélecteur téléphone/ordinateur dans la barre supérieure pour vérifier l’apparence de la mise en page à chaque largeur. Le sélecteur ne modifie que l’aperçu, pas la mise en page elle-même.

Calques

Le panneau Calques liste chaque bloc de votre modèle sous forme d’arborescence, dans le même ordre que sur le canevas. Ouvrez-le depuis le bord gauche pour sélectionner un bloc imbriqué (par exemple, un bouton à l’intérieur d’un groupe) ou faites glisser les lignes pour réorganiser le contenu.

Panneau de droite

Basculez entre trois onglets :

• Blocs : ajoutez du contenu au message. Voir Référence des blocs de l’éditeur in-app.
• Paramètres : appliquez un style à l’ensemble du modèle en une seule fois. Voir Configurer les paramètres du modèle in-app.
• IA : discutez avec l’assistant IA pour générer ou modifier du contenu à partir d’une invite.

Ajouter des blocs de contenu

1. Ouvrez l’onglet Blocs dans le panneau de droite.
2. Faites glisser un bloc sur le canevas, ou cliquez sur un bloc pour l’ajouter à la fin du modèle.
3. Continuez à ajouter des blocs jusqu’à ce que la mise en page soit prête.

Chaque type de bloc a un objectif différent dans le message :

• Titre : titres et en-têtes courts
• Texte : corps du texte et descriptions plus longues
• Bouton : un appel à l’action cliquable
• Image : images de la Médiathèque, téléchargement ou URL
• Vidéo : une miniature vidéo cliquable qui ouvre une vidéo YouTube ou Vimeo
• Carte : une image avec un titre, du texte et un bouton dans une seule mise en page
• Séparateur : une ligne qui sépare les sections
• Colonnes : mises en page côte à côte (2, 3 ou 4 colonnes égales, ou des divisions 33/67 et 67/33)
• Minuteur : un compte à rebours pour les offres et les dates limites
• Menu : une rangée ou une colonne de liens de navigation ou de contact
• Social : icônes qui renvoient à vos profils sociaux
• HTML : HTML personnalisé, tel qu’un formulaire, un sondage ou une vidéo intégrée
• Produits : une grille de fiches produits de votre Catalogue de produits ou du panier abandonné d’un utilisateur

Consultez la Référence des blocs de l’éditeur in-app pour les paramètres de chaque bloc, et comment sauvegarder et réutiliser les blocs.

Afficher des blocs à des utilisateurs spécifiques

Tous les utilisateurs n’ont pas besoin de voir les mêmes blocs. Définissez une condition d’affichage sur un bloc pour qu’il s’affiche ou se masque en fonction des Tags de l’utilisateur. Vous envoyez toujours un seul modèle, mais chaque personne ne voit que les parties qui la concernent.

Sélectionnez le bloc sur le canevas, ouvrez Condition d’affichage dans le panneau de droite, et activez Afficher ce bloc conditionnellement. En savoir plus

Localiser le modèle

Un modèle multilingue stocke une copie localisée pour chaque langue dans un seul design in-app. Pour savoir comment fonctionne la messagerie multilingue sur tous les canaux, consultez Messagerie multilingue.

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.

Pour configurer le contenu multilingue :

1. Cliquez sur le sélecteur de langue dans la barre supérieure pour ouvrir la liste des langues.
2. Sélectionnez les langues que vous souhaitez ajouter, puis cliquez sur Appliquer.
3. Utilisez le sélecteur de langue pour passer d’une langue à l’autre et modifier le contenu de chaque bloc pour la langue sélectionnée.
4. Cliquez sur Traduction automatique pour remplir automatiquement les traductions manquantes — vérifiez le texte généré par l’IA avant de l’enregistrer.

Note

Tout bloc que vous ajoutez apparaît avec le même contenu pour chaque langue. N’oubliez pas de traduire le nouveau texte et les étiquettes des boutons pour chaque langue que vous utilisez dans votre modèle.

Configurer les paramètres du modèle

Utilisez deux endroits pour styliser et placer le message :

• Onglet Paramètres (panneau de droite) : taille du document, couleurs, typographie et styles par défaut pour les blocs.
• Paramètres in-app (barre supérieure) : position à l’écran, animations et bouton de fermeture.

En savoir plus

Vérifier votre contenu avant de sauvegarder

Cliquez sur Vérifier dans la barre supérieure pour ouvrir la Vérification intelligente et analyser le modèle à la recherche de problèmes courants.

La vérification intelligente recherche :

• Les boutons, les éléments de menu et les liens d’image sans URL, ou avec une URL qui n’est pas une adresse http(s), mailto:, tel:, ou un lien profond (par exemple myapp://promo)
• Les blocs d’espace réservé de l’IA non terminés
• Les emplacements d’image ou de vidéo vides et le texte alternatif manquant
• Les fiches produits avec un lien manquant ou invalide
• Le contraste du texte qui ne respecte pas la norme WCAG AA
• Le contenu non traduit
• Un compte à rebours dont la date de fin est déjà passée
• Une condition d’affichage avec une règle cassée ou vide, une branche qui a perdu le bloc auquel elle est enchaînée, ou une condition qui ne s’appliquera pas car le contenu dynamique est désactivé pour le compte

Cliquez sur un résultat pour accéder directement à l’élément concerné sur le canevas. Si tout est correct, le panneau affiche Toutes les vérifications ont réussi — le contenu semble prêt à être enregistré.

Enregistrer le modèle

Cliquez sur Enregistrer dans la barre supérieure pour enregistrer vos modifications. Utilisez Annuler/Rétablir dans la barre supérieure pour revenir en arrière et en avant dans vos modifications.

Note

L’enregistrement stocke votre modèle in-app dans Contenu → In-apps. De là, vous pouvez prévisualiser, modifier et gérer les modèles. En savoir plus