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.

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 créer un modèle rich media natif. Cet article explique comment créer un modèle à partir de zéro dans l’éditeur intégré. Suivez les mêmes étapes pour personnaliser un modèle existant.

Allez dans Contenu → In-apps.
Cliquez sur Créer un in-app. L’éditeur intégré s’ouvre directement.

Page Contenu In-apps avec le bouton Créer un in-app en haut à droite de la liste des modèles

Cliquez sur la flèche à côté de Créer un in-app pour créer un modèle d’une autre manière :

Téléverser un ZIP : téléversez un fichier ZIP avec votre message in-app HTML.
In-app natif : créez un message rendu par le SDK à partir de mises en page prêtes à l’emploi. En savoir plus

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 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 (le téléphone propose 360, 390, 393 ou 430 px, correspondant aux largeurs d’appareils courantes), et un bouton pour basculer le canevas en mode 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

Aperçu vous permet d’essayer le message avant de l’enregistrer : appuyez sur les boutons, parcourez 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 deep links 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 à nouveau 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 deep link (par exemple myapp://promo)
Les blocs de placeholder 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

Panneau Smart check listant une erreur de lien de bouton manquant et un avertissement d'emplacement d'image vide

Cliquez sur un résultat pour accéder directement à l’élément concerné sur le canevas. Si tout est en ordre, 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 cette application.
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 changer. Utilisez la bascule téléphone/ordinateur dans la barre supérieure pour vérifier l’apparence de la mise en page à chaque largeur. La bascule 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 est rendu en mode clair ou sombre. Cela fonctionne même sans qu’une Variante en mode sombre soit configurée — les couleurs sombres sont déduites automatiquement jusqu’à ce que vous définissiez les vôtres. Il s’agit d’une vue d’édition en direct, et non du panneau 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 de droite

Basculez entre trois onglets :

Blocs : ajoutez du contenu au message. Voir la 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.

Onglet Blocs dans le panneau de droite avec Titre, Texte, Bouton, Image et autres blocs de contenu

Ajouter des blocs de contenu

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

Éditeur in-app vide avec Commencer avec un bloc sur le canevas et le panneau Blocs ouvert

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

Titre : titres et en-têtes courts
Texte : corps de 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
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 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 de droite, et activez Afficher ce bloc sous condition. En savoir plus

Localiser le modèle

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

Pour configurer le contenu multilingue :

Cliquez sur le sélecteur de langue dans la barre supérieure pour ouvrir la liste des langues.
Sélectionnez les langues que vous souhaitez ajouter, puis cliquez sur Appliquer.
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.
Cliquez sur Traduction automatique pour remplir automatiquement les traductions manquantes — vérifiez le texte généré par l’IA avant d’enregistrer.

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.

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.

Mettre à jour les traductions depuis vos propres systèmes

Votre équipe de développement peut mettre à jour les traductions d’un modèle enregistré via l’API Pushwoosh ou un client IA connecté au serveur ManyMoney AI MCP, sans renvoyer le HTML ou le design du modèle.

Cela ne fonctionne que sur un modèle qui a déjà été enregistré une fois (voir Enregistrer le modèle ci-dessus). Un modèle sans contenu enregistré n’a rien dans quoi fusionner les traductions.

La mise à jour ne fusionne que les langues et les clés de texte envoyées dans le champ localization. Toutes les autres langues, clés et le design visuel restent tels qu’enregistrés.

L’envoi d’une clé sans valeur supprime cette clé de sa langue.
L’envoi d’une langue sans valeur supprime toute la langue du modèle.
La langue par défaut peut basculer vers n’importe quelle langue restante dans le modèle après la mise à jour.
La mise à jour est rejetée si elle devait supprimer toutes les langues du modèle, ou si la langue par défaut demandée n’est pas l’une des langues restantes après la fusion.

Pour cela, vous aurez besoin de l’aide de votre équipe de développement.