> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.onesignal.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Concevoir des messages in-app avec glisser-déposer
> Utilisez le compositeur visuel de OneSignal pour créer des messages in-app à fort taux de conversion avec des blocs, des mises en page, des carrousels et de la personnalisation.
L'éditeur glisser-déposer de OneSignal vous permet de créer des messages in-app en utilisant des blocs modulaires — aucun codage requis. Si vous préférez le balisage, consultez [Concevoir des messages in-app avec HTML](./design-your-in-app-message-with-html).
## Prérequis
* Vous avez installé et initialisé le SDK OneSignal dans votre application.
* Vous utilisez les SDK recommandés pour les dernières fonctionnalités de l'éditeur :
* iOS 5.1.5+
* Android 5.1.9+
* Si vous n'importez pas vos images dans OneSignal, vos images doivent être hébergées sur une URL rapide et accessible publiquement (CDN recommandé) et dimensionnées de manière appropriée pour les écrans mobiles.
Assurez-vous d'utiliser la dernière version du SDK OneSignal dans votre application.
Les versions plus anciennes peuvent toujours afficher le message, mais avec un style de repli (par exemple, des marges par défaut ou des superpositions par défaut). Utilisez **Aperçu** et le **test sur appareil** pour confirmer le comportement sur vos versions SDK minimales prises en charge.
***
## Commencer depuis un modèle prédéfini
Les modèles prédéfinis vous aident à lancer rapidement avec des mises en page conçues pour la conversion (y compris les invites de permission). Choisissez un modèle, puis mettez à jour le texte, les couleurs et les actions pour correspondre à votre marque.
**Test sur appareil :** Les designs prédéfinis ont été testés sur Pixel 6+, iPhone (iOS 14+), Huawei Nova 9, Huawei P50 Foldable et iPad (10e gén.+). Ces modèles sont optimisés pour l'orientation portrait et peuvent ne pas s'afficher comme prévu en mode paysage.
***
## Choisir une mise en page de message
La mise en page du message contrôle la façon dont le message in-app apparaît à l'écran.
| Type | Meilleur pour | Comportement |
| ---------- | --------------------------------------------------- | --------------------------------------------------------- |
| **Top** | Annonces fines et confirmations | Glisse depuis le haut |
| **Center** | La plupart des invites marketing et produit | S'étend depuis le centre et remplit partiellement l'écran |
| **Bottom** | Snackbars, invites de consentement | Glisse depuis le bas |
| **Full** | Flux d'intégration, offres multi-étapes, carrousels | S'étend pour remplir l'écran (avec marges optionnelles) |
### Construire des flux multi-écrans avec des carrousels
Les carrousels vous permettent de créer des expériences in-app multi-écrans comme l'intégration, les visites de fonctionnalités ou les offres en plusieurs étapes.
1. Sélectionnez le type de message **Full**.
2. Cliquez sur **Create Carousel**.
3. Ajoutez jusqu'à 10 cartes (écrans).
4. Personnalisez chaque carte avec n'importe quelle combinaison de blocs.
### Support d'orientation
Les messages in-app prennent en charge les modes portrait et paysage, mais les mises en page (en particulier les modèles) peuvent nécessiter des ajustements pour bien fonctionner dans les deux orientations.
Si vous prévoyez une utilisation fréquente en paysage (tablettes, jeux, applications vidéo), testez votre message en mode paysage avant de publier. Les mises en page larges nécessitent souvent des tailles de texte plus petites, un espacement plus serré ou moins de blocs empilés.
***
## Utiliser les blocs et l'espacement pour des mises en page propres
Tout est placé sur le bloc Arrière-plan (votre toile). Utilisez :
* **Padding** sur l'**Arrière-plan** pour l'espace entre votre contenu et les bords du message.
* **Margin** sur les blocs individuels pour l'espace entre les éléments (titre → image → bouton).
**Règles rapides pour des mises en page cohérentes**
1. Utilisez **Padding** pour contrôler la distance depuis les bords du message.
2. Utilisez **Margin** pour séparer les blocs verticalement.
3. Évitez d'empiler un grand padding et des marges du même côté.
4. Préférez les mises en page centrées et basées sur le flux plutôt que les designs serrés/alignés sur les bords.
5. Utilisez toujours **Aperçu** sur plusieurs tailles d'appareils avant de publier.
***
## Référence des blocs
Utilisez ces blocs pour construire votre message. Chaque bloc prend en charge le style et (dans la plupart des cas) une action de clic optionnelle.
### Bloc de texte
À utiliser pour les titres, descriptions, mentions légales ou textes personnalisés.
**Ce que vous pouvez personnaliser**
* **Dimensionnement responsive** : Largeur/hauteur en pourcentages.
* **Polices** : Google Fonts.
* **Mise en forme** : Gras, italique, souligné.
* **Couleur** : Hex ou RGBA (prend en charge la transparence).
* **Alignement** : Gauche, centre, droite.
* **Taille** : Taille de police ajustable.
**Avancé**
* **Marges** : Espace autour du bloc.
**Conseils**
* Localisez avec des segments basés sur la langue ou [en utilisant la syntaxe Liquid](./using-liquid-syntax).
* Personnalisez avec des [balises de données](./message-personalization).
### Bloc d'image
Utilisez des images pour renforcer l'offre, présenter une fonctionnalité ou ajouter de l'image de marque.
**Formats et limites pris en charge**
* `.jpg`, `.png`, `.gif`
* Taille maximale du fichier : 5 Mo
**Conseils et recommandations**
* Utilisez des ratios d'aspect courants comme `16:9`, `4:3` ou `3:2`.
* Vous pouvez changer dynamiquement les liens et les URL d'images en utilisant des chemins hébergés sur serveur. Voir [URL dynamiques](./links#dynamic-urls).
* Exemple : `https://example.com/images/{{ tag_key }}.png`
**Ce que vous pouvez personnaliser**
* **URL de l'image** : L'hébergement est recommandé pour les performances.
* **Action de clic** : Optionnelle (lien, lien profond, balise, résultat, invite).
**Avancé**
* **Fermer lors du clic**
* **Marges** : Espace autour du bloc.
Si une URL d'image est lente, bloquée ou renvoie une erreur, votre message peut s'afficher avec un média cassé ou vide. Hébergez vos images sur un CDN fiable et vérifiez qu'elles se chargent rapidement sur les réseaux mobiles.
### Bloc de bouton
Utilisez les boutons pour les actions principales comme la navigation, la collecte de commentaires ou les invites de permission.
**Ce que vous pouvez personnaliser**
* Texte du bouton et style de police
* Couleur d'arrière-plan, taille et rayon de coin
* Icône/image optionnelle
* Action de clic (étiquetage, résultats, invites, liens profonds)
**Avancé**
* Fermer lors du clic
* Marges
* Bordures et ombres
**Conseils**
* Personnalisez le texte du bouton ou les destinations avec des balises.
* Vous pouvez créer un bouton image uniquement en définissant l'opacité de l'arrière-plan à 0.
* Utilisez des ombres subtiles (faible opacité, flou élevé) pour élever le CTA principal.
### Bloc du bouton de fermeture
Le bouton de fermeture contrôle si les utilisateurs peuvent fermer le message en utilisant une icône « X ».
**Ce que vous pouvez personnaliser**
* Activer/désactiver la visibilité
* Icône personnalisée (`.jpg`, `.png`, `.svg`, `.gif`)
* Taille recommandée : `10x10px`
* Action de clic optionnelle
**Avancé**
* Marges
Si vous désactivez le bouton de fermeture, assurez-vous que les utilisateurs ont toujours un moyen clair de sortir (par exemple, une **action de fermeture** sur un bouton ou l'arrière-plan, ou un minuteur de fermeture si votre expérience en utilise un). Sinon, vous risquez de piéger les utilisateurs dans le message.
### Bloc d'arrière-plan
L'arrière-plan est la toile qui contient votre mise en page.
**Ce que vous pouvez personnaliser**
* Couleur d'arrière-plan (RGBA pris en charge)
* Image d'arrière-plan (`.jpg`, `.png`, `.gif`)
* Action de clic optionnelle
**Avancé**
* Padding (par défaut `24px`)
* Fermer lors du clic
***
## Personnalisation et localisation
Vous pouvez personnaliser les messages in-app en utilisant des [balises de données](./add-user-data-tags), y compris dans le texte, les libellés de boutons et les URL.
Pour la localisation, consultez [Messages multilingues](./multi-language-messaging#send-messages-in-different-languages).
Un bon test de personnalisation consiste à envoyer le message à un petit segment interne avec des valeurs de balises connues et à confirmer :
* Le texte et les images s'affichent avec les substitutions attendues
* Les liens se résolvent correctement
* Les boutons déclenchent les résultats/balises de clic attendus
***
## FAQ
### Puis-je supprimer la superposition grise ou l'ombre portée des in-apps bannière en haut/bas ?
Oui — mettez à jour vos SDK et ajoutez la configuration ci-dessous.
**iOS 5.1.5+**
```xml iOS Info.plist theme={null}
OneSignal_in_app_message_hide_drop_shadow
OneSignal_in_app_message_hide_gray_overlay
```
**Android 5.1.9+**
```xml Android Manifest.xml theme={null}
```
***
## Prochaines étapes
* Découvrez les [Actions de clic in-app](./iam-click-actions) pour personnaliser ce qui se passe lorsque les utilisateurs cliquent sur des éléments de votre message.
* Essayez différents [Déclencheurs de messages in-app](./iam-triggers) pour contrôler quand les messages apparaissent.
* Besoin de plus de personnalisation ? Essayez [Concevoir des messages in-app avec HTML](./design-your-in-app-message-with-html).
***