Concevoir des messages in-app avec glisser-déposer

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.

Création d'un message in-app avec l'éditeur glisser-déposer

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)

Mises en page Top, Center, Bottom et Full des messages in-app

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.

Sélectionnez le type de message Full.
Cliquez sur Create Carousel.
Ajoutez jusqu’à 10 cartes (écrans).
Personnalisez chaque carte avec n’importe quelle combinaison de blocs.

Exemple de carrousel avec plusieurs cartes de message in-app

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.

Message in-app affiché en orientations portrait et paysage

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

Utilisez Padding pour contrôler la distance depuis les bords du message.
Utilisez Margin pour séparer les blocs verticalement.
Évitez d’empiler un grand padding et des marges du même côté.
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.
Utilisez toujours Aperçu sur plusieurs tailles d’appareils avant de publier.

Contrôles de padding d'arrière-plan et de marge de bloc dans l'éditeur in-app

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.
Personnalisez avec des balises de données.

Options de configuration du bloc de texte dans l'éditeur

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

Options de configuration du bloc d'image dans l'éditeur

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.

Options de configuration du bloc de bouton dans l'éditeur

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.

Options de configuration du bouton de fermeture dans l'éditeur

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

Contrôles du bloc d'arrière-plan pour la couleur, l'image, le padding et les actions

Personnalisation et localisation

Vous pouvez personnaliser les messages in-app en utilisant des balises de données, y compris dans le texte, les libellés de boutons et les URL. Pour la localisation, consultez Messages multilingues.

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+

iOS Info.plist

<key>OneSignal_in_app_message_hide_drop_shadow</key>
<true/>
<key>OneSignal_in_app_message_hide_gray_overlay</key>
<true/>

Android 5.1.9+

Android Manifest.xml

<meta-data android:name="com.onesignal.inAppMessageHideGrayOverlay" android:value="true"/>
<meta-data android:name="com.onesignal.inAppMessageHideDropShadow" android:value="true"/>

Prochaines étapes

Découvrez les Actions de clic in-app 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 pour contrôler quand les messages apparaissent.
Besoin de plus de personnalisation ? Essayez Concevoir des messages in-app avec HTML.

Premiers pas et paramètres

Canaux de messagerie

Journeys

Audience et événements personnalisés

Analyses et intégrations

Confidentialité et sécurité

Concevoir des messages in-app avec glisser-déposer

Prérequis

Commencer depuis un modèle prédéfini

Choisir une mise en page de message