# Créer des messages in-app dans l'éditeur intégré
Construisez 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 qu'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é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 **Ajouter un modèle**.
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](/fr/developer/guides/content/rich-media-templates-syntax) avec votre message in-app HTML.
* **Créer un rich media natif :** construisez un in-app natif rendu par le SDK. [En savoir plus](/fr/product/content/in-apps/create-native-in-app-messages/)
5. Sélectionnez **Créer un nouveau modèle**.
6. Cliquez sur **Ajouter un modèle**.
## 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), et la largeur de l'aperçu sur téléphone ou ordinateur. 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).
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 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 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.
#### Brand book
* **Brand book :** ouvrez le [Brand book](/fr/product/content/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.
### 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 change 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](/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 instruction.
## 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 but 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échargées ou depuis une URL
* **[Vidéo](/fr/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#video) :** une vignette 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é, comme 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).
### 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 conditionnellement**. [En savoir plus](/fr/product/content/in-apps/no-code-in-app-editor/show-in-app-content-to-specific-users/)
## Localiser le modèle
Un modèle multilingue stocke le contenu localisé pour chaque langue dans un seul design in-app. Utilisez le sélecteur de langue dans la barre supérieure pour ajouter des langues et modifier le contenu par langue. Cliquez sur **Traduction automatique** pour générer des traductions. Pour savoir comment la messagerie multilingue fonctionne sur tous les canaux, consultez [Messagerie multilingue](/fr/product/personalization/multi-language/).
## 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/)
## 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 avancer et reculer dans vos modifications.
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](/fr/developer/guides/content/rich-media-templates-syntax) avec votre message in-app HTML.
* **Créer un rich media natif :** construisez un in-app natif rendu par le SDK. [En savoir plus](/fr/product/content/in-apps/create-native-in-app-messages/)
5. Sélectionnez **Créer un nouveau modèle**.
6. Cliquez sur **Ajouter un modèle**.
## 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), et la largeur de l'aperçu sur téléphone ou ordinateur. 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).
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 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 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.
#### Brand book
* **Brand book :** ouvrez le [Brand book](/fr/product/content/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.
### 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 change 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](/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 instruction.
## 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 but 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échargées ou depuis une URL
* **[Vidéo](/fr/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#video) :** une vignette 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é, comme 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).
### 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 conditionnellement**. [En savoir plus](/fr/product/content/in-apps/no-code-in-app-editor/show-in-app-content-to-specific-users/)
## Localiser le modèle
Un modèle multilingue stocke le contenu localisé pour chaque langue dans un seul design in-app. Utilisez le sélecteur de langue dans la barre supérieure pour ajouter des langues et modifier le contenu par langue. Cliquez sur **Traduction automatique** pour générer des traductions. Pour savoir comment la messagerie multilingue fonctionne sur tous les canaux, consultez [Messagerie multilingue](/fr/product/personalization/multi-language/).
## 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/)
## 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 avancer et reculer dans vos modifications.