Passer au contenu principal

​
Vue d’ensemble

L’éditeur glisser-déposer de OneSignal vous permet de créer des messages in-app en utilisant des éléments de blocs modulaires — aucun codage requis. Si vous préférez le balisage, consultez Concevoir des messages in-app avec HTML.

Éditeur glisser-déposer IAM

​
Prérequis

  • SDK OneSignal installé et initialisé dans votre application.
  • SDK recommandés pour les dernières fonctionnalités : iOS 5.1.5+, Android 5.1.9+. Voir les minimums spécifiques aux fonctionnalités ci-dessous.
  • Images hébergées sur un CDN performant (recommandé si auto-hébergé) et dimensionnées de manière appropriée.

​
Types de messages (Mise en page)

Comment le message apparaît à l’écran :
Type de messageDescription
TopGlisse depuis le haut. Idéal pour les annonces minces et les confirmations.
CenterS’étend depuis le centre et remplit partiellement l’écran. Équilibré pour la plupart des cas d’utilisation.
BottomGlisse depuis le bas. Idéal pour les snackbars et les invites de consentement.
FullS’étend pour remplir l’écran. À utiliser avec ou sans marges. Ajoutez un carrousel pour des flux multi-écrans.

Image montrant les types d'in-apps que vous pouvez créer.

​
Carrousels

Les carrousels vous permettent de créer des flux multi-écrans—intégration, visites de fonctionnalités ou offres en plusieurs étapes. Sélectionnez le type de message Full et cliquez sur le bouton Create Carousel. Vous pouvez ajouter jusqu’à 10 cartes (écrans). Chaque carte peut avoir n’importe quelle combinaison de blocs personnalisables.

Exemple de carrousel

​
Support d’orientation

Les messages in-app prennent en charge les modes portrait et paysage.

Image montrant les orientations portrait et paysage.

​
Blocs et paramètres de mise en page

Tout se trouve à l’intérieur d’un bloc Background (la toile). Utilisez Padding sur le Background pour l’espacement extérieur ; utilisez Margin sur les blocs individuels pour l’espacement entre les éléments. 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 (par ex., titre → bouton).
  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 le positionnement absolu.
  5. Prévisualisez toujours sur différents appareils avant de publier.

Bloc Background (toile)

​
Texte

À utiliser pour les titres, descriptions ou textes personnalisés.
  • 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

Bloc de texte

​
Image

Ajoutez des images pour illustrer des fonctionnalités ou des offres. Formats : .jpg, .png, .gif (max 5 Mo). Préférez les URL hébergées pour les performances.
  • Ratios d’aspect : 16:9, 4:3, 3:2 recommandés.
  • Action de clic : Optionnelle (lien, lien profond, balise, résultat, invite).
Avancé :
  • Fermer lors du clic
  • Marges : Espace autour du bloc.
Conseils
  • Référencez différentes images sur votre serveur en fonction des balises. Voir URL dynamiques.
    • Exemple d’URL d’image : https://example.com/images/{{ tag_key }}.png

Bloc d'image

​
Bouton

Pilotez des actions comme la navigation, les commentaires ou les invites de permission.
  • Texte et police : Personnalisez le texte CTA et le style.
  • Couleur et taille : Personnalisez les visuels du bouton.
  • Image : Icône/image optionnelle.
  • Rayon de coin : Définissez l’arrondi.
  • Action de clic : Prend en charge l’étiquetage, les résultats, les invites et les liens profonds.
Avancé
  • Fermer lors du clic
  • Marges : Espace autour du bloc.
  • Bordures et ombres : Entièrement personnalisables.
Conseils
  • Personnalisez le texte du bouton ou les liens avec des balises de données.
  • Créez un bouton image uniquement en définissant l’arrière-plan opacity = 0.
  • Utilisez des ombres subtiles (faible opacité, flou élevé) pour élever les CTA primaires.

Bloc de bouton

​
Bouton de fermeture

Contrôlez la visibilité et le style de l’icône de fermeture (X).
  • Bascule : Activer/désactiver.
  • Icône personnalisée : .jpg, .png, .svg, .gif. Taille recommandée : 10x10px.
  • Action de clic : Optionnelle.
Avancé
  • Marges : Espace autour du bloc.
Conseils
  • Si vous désactivez le bouton de fermeture, assurez-vous de définir une action de fermeture ou un délai de fermeture pour permettre aux utilisateurs de sortir.
  • Utile pour les carrousels lorsque vous souhaitez que les utilisateurs progressent à travers toutes les cartes.

Bouton de fermeture

​
Arrière-plan

Définissez la base de votre mise en page et de votre image de marque.
  • Support d’image : .jpg, .png, .gif
  • Couleur : Prend en charge RGBA
  • Action de clic : Optionnelle
Avancé
  • Padding : Espace entre le contenu et les bords du message (par défaut 24px)
  • Fermer lors du clic

Éditeur d'arrière-plan

​
Personnalisation et localisation

Utilisez des balises de données pour personnaliser l’in-app par utilisateur. Pour la localisation, consultez Messages multilingues pour plus de détails.

​
FAQ

​
Comment puis-je créer un in-app plein écran ? Quelle version du SDK ai-je besoin ?

Pour créer un message in-app sans marges :
  • SDK iOS 3.9.0+
  • SDK Android 4.6.3+
Les utilisateurs sur des SDK plus anciens verront toujours le message, mais avec des marges par défaut.

​
Puis-je supprimer l’arrière-plan gris ou l’ombre portée des in-apps de style bannière ?

Pour supprimer les superpositions pour les bannières en haut/bas, mettez à jour vos SDK et configurez ce qui suit : iOS 5.1.5+ 
<key>OneSignal_in_app_message_hide_drop_shadow</key>
<true/>
<key>OneSignal_in_app_message_hide_gray_overlay</key>
<true/>
Android 5.1.9+ 
<meta-data android:name="com.onesignal.inAppMessageHideGrayOverlay" android:value="true"/>
<meta-data android:name="com.onesignal.inAppMessageHideDropShadow" android:value="true"/>