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 à partir d’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 des campagnes. Vous pouvez en créer un dans l’éditeur intégré, téléverser 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éverser un ZIP : téléversez 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, l’état de l’enregistrement, 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 (le téléphone propose 360, 390, 393 ou 430 px, correspondant aux largeurs d’appareils courantes), et un interrupteur pour le canevas clair/sombre (icône soleil/lune). Voir Configurer l’apparence de l’in-app sur l’appareil et Localiser le modèle.

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

Aperçu

L’Aperçu vous permet d’essayer le message avant de l’enregistrer : appuyez sur les boutons, naviguez à travers 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 placeholders.

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

Vérifier

Vérifier ouvre Smart check et analyse le modèle à la recherche de problèmes courants.

Smart check 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 de substitution IA inachevé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é.

Brand book

• Brand book : ouvrez le Brand book de votre compte.
• Appliquer les styles du Brand book : redéfinissez le style du modèle pour qu’il corresponde à votre Brand book (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 modifier. Utilisez l’interrupteur téléphone/ordinateur dans la barre supérieure pour vérifier l’apparence de la mise en page à chaque largeur. L’interrupteur ne modifie que l’aperçu, pas la mise en page elle-même.

Utilisez l’icône soleil/lune dans la barre supérieure pour continuer à modifier le canevas pendant qu’il s’affiche en mode clair ou sombre. Cela fonctionne même sans qu’une Variante de mode sombre soit configurée — les couleurs sombres sont dérivées automatiquement jusqu’à ce que vous définissiez les vôtres. Il s’agit d’une vue d’édition en direct, et non du panneau d’Aperçu en lecture seule.

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 droit

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 droit.
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éversées ou depuis une 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
• Réseaux sociaux : des 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 enregistrer et réutiliser des 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 droit, et activez Afficher ce bloc conditionnellement. En savoir plus

Localiser le modèle

Un modèle multilingue stocke le contenu localisé 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 des 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 d’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 libellés 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 droit) : 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

Enregistrer le modèle

Cliquez sur Enregistrer dans la barre supérieure pour sauvegarder vos modifications. Utilisez Annuler/Rétablir dans la barre supérieure pour naviguer entre 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