# 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.

<Aside type="note">
Avant de commencer, intégrez le SDK Pushwoosh pour que les messages in-app puissent apparaître dans votre application. [En savoir plus](/fr/product/messaging-channels/in-apps/)
</Aside>

## 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.

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

<img src="/rich-media-create-rich-media-in-the-built-in-editor-1.webp" alt="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](/fr/developer/guides/content/rich-media-templates-syntax) 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](/fr/product/content/in-apps/create-native-in-app-messages/)

## Explorer la mise en page de l'éditeur

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

<span id="top-bar" />

### 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](/fr/product/content/in-apps/no-code-in-app-editor/configure-in-app-template-settings/#configure-how-the-in-app-looks-on-device) et [Localiser le modèle](#localize-the-template).

<img src="/rich-media-create-rich-media-in-the-built-in-editor-3.webp" alt="Barre supérieure de l'éditeur in-app avec le nom du modèle, Annuler, Rétablir, Paramètres in-app, sélecteur de langue, Traduction automatique, aperçu téléphone et ordinateur, bascule clair/sombre, et Enregistré"/>

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

<img src="/rich-media-create-rich-media-in-the-built-in-editor-54.webp" alt="Menu ⋮ développé dans la barre supérieure de l'éditeur in-app avec Aperçu, Vérifier, Brand book, Télécharger .zip, Appliquer les styles du brand book, et Réinitialiser les styles personnalisés" width="220"/>

<span id="preview" />

#### 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.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-44.webp" alt="Panneau d'aperçu avec bascule téléphone et ordinateur, bascule clair et sombre, Redémarrer, et un message in-app montrant une image, un texte d'offre, un minuteur et un bouton Réclamer" width="480"/>

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.

<span id="check" />

#### 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](#show-blocks-to-specific-users) 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

<img src="/rich-media-create-rich-media-in-the-built-in-editor-53.webp" alt="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](/fr/product/content/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.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-5.webp" alt="Panneau Calques listant Carte, Image, Titre, Texte, Minuteur, Boutons et Pied de page dans une arborescence"/>

### 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](/fr/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/).
* **Paramètres :** appliquez un style à l'ensemble du modèle en une seule fois. Voir [Configurer les paramètres du modèle in-app](/fr/product/content/in-apps/no-code-in-app-editor/configure-in-app-template-settings/).
* **IA :** discutez avec l'assistant IA pour générer ou modifier du contenu à partir d'une invite.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-6.webp" alt="Onglet Blocs dans le panneau de droite avec Titre, Texte, Bouton, Image et autres blocs de contenu" width="320"/>

<span id="add-content-blocks" />

## 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.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-7.webp" alt="É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](/fr/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#heading-and-text) :** titres et en-têtes courts
* **[Texte](/fr/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#heading-and-text) :** corps de texte et descriptions plus longues
* **[Bouton](/fr/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#button) :** un appel à l'action cliquable
* **[Image](/fr/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#image) :** images de la [Médiathèque](/fr/product/content/media-store/), téléversées ou depuis une URL
* **[Vidéo](/fr/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#video) :** une miniature vidéo cliquable qui ouvre une vidéo YouTube ou Vimeo
* **[Carte](/fr/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#card) :** une image avec un titre, du texte et un bouton dans une seule mise en page
* **[Séparateur](/fr/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#divider) :** une ligne qui sépare les sections
* **[Colonnes](/fr/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#columns) :** mises en page côte à côte (2, 3 ou 4 colonnes égales, ou des divisions 33/67 et 67/33)
* **[Minuteur](/fr/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#countdown-timer) :** un compte à rebours pour les offres et les dates limites
* **[Menu](/fr/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#menu) :** une rangée ou une colonne de liens de navigation ou de contact
* **[Social](/fr/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#social) :** icônes qui renvoient à vos profils sociaux
* **[HTML](/fr/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#html) :** HTML personnalisé, tel qu'un formulaire, un sondage ou une vidéo intégrée
* **[Produits](/fr/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#products) :** une grille de fiches produits de votre [Catalogue de produits](/fr/product/content/product-catalog/) ou du panier abandonné d'un utilisateur

Consultez la [Référence des blocs de l'éditeur in-app](/fr/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/) pour les paramètres de chaque bloc, et [comment enregistrer et réutiliser des blocs](/fr/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#save-and-reuse-blocks).

<span id="show-blocks-to-specific-users" />

### 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](/fr/product/audience-data-and-segmentation/user-data-tags/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](/fr/product/content/in-apps/no-code-in-app-editor/show-in-app-content-to-specific-users/)

<span id="localize-the-template" />

## 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](/fr/product/personalization/multi-language/).

<Aside type="note">
Le sélecteur de langue ici ne compte que les appareils sur les plateformes qui rendent 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.
</Aside>

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.

<Aside type="note">
Tout bloc que vous ajoutez apparaît avec le même contenu pour chaque langue. N'oubliez pas de traduire les nouveaux textes et les libellés des boutons pour chaque langue que vous utilisez dans votre modèle.
</Aside>

## 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](/fr/product/content/in-apps/no-code-in-app-editor/configure-in-app-template-settings/)

<span id="save-the-template" />

## 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.

<Aside type="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](/fr/product/content/in-apps/#view-and-manage-your-in-app-content)
</Aside>

## 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](/fr/developer/api-reference/) ou un client IA connecté au [serveur ManyMoney AI MCP](/fr/product/pushwoosh-ai/manymoney-mcp-server/), 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](#save-the-template) 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.