Configurer les paramètres du modèle in-app

Ces paramètres s’appliquent à l’ensemble du modèle in-app en une seule fois, plutôt qu’à un seul bloc. Ouvrez ou créez d’abord un modèle dans l’éditeur intégré (Contenu → In-apps), puis utilisez les Paramètres et les Paramètres in-app comme décrit ci-dessous.

Configurer le style à l’échelle du modèle

Les paramètres du modèle contrôlent le style de l’ensemble du modèle in-app : la taille et l’arrière-plan du document, l’apparence de la fenêtre contextuelle et les styles par défaut pour les blocs.

Ouvrez l’onglet Paramètres dans le panneau de droite.

Sections des paramètres réduites, de Document aux valeurs par défaut du Séparateur, dans le panneau de droite

Commencez par l’apparence partagée, puis la taille, et enfin les valeurs par défaut pour les nouveaux blocs :

Définissez le Jeu de couleurs et la Typographie pour que les couleurs et les polices restent cohérentes dans tout le modèle.
Définissez le Document et la Fenêtre contextuelle pour la taille, les marges, l’arrière-plan et la façon dont le message s’affiche sur le fond estompé.
Utilisez les sections des valeurs par défaut uniquement lorsque vous souhaitez que les nouveaux blocs correspondent automatiquement au modèle.

Sur le canevas, modifiez un seul bloc lorsque cet élément doit avoir une apparence différente. Les valeurs par défaut s’appliquent partout où un bloc individuel ne les remplace pas. Pour effacer les remplacements de style sur le modèle et revenir aux valeurs par défaut, utilisez Réinitialiser les styles personnalisés dans le menu ⋮ de la barre supérieure. Voir Créer des messages in-app dans l’éditeur intégré.

Taille du document et de la fenêtre contextuelle

Utilisez Document pour contrôler la taille du message et l’espacement du canevas. Utilisez Fenêtre contextuelle pour contrôler la façon dont le message s’affiche sur le fond estompé. Il n’y a pas de paramètre de hauteur. La fenêtre contextuelle s’agrandit avec son contenu.

Document

Dans Document, définissez le remplissage, une image d’arrière-plan, l’espace entre les blocs et un rayon d’angle par défaut pour les images.

Pour modifier la largeur de la fenêtre contextuelle sur le téléphone, utilisez ces deux champs dans Document.

Largeur maximale (px) est la largeur maximale autorisée pour la fenêtre contextuelle, en pixels. Sur un grand écran, la fenêtre contextuelle ne dépassera pas cette valeur.

Gouttières latérales (px) se trouve juste en dessous de Remplissage. Il définit un espace vide à gauche et à droite de la fenêtre contextuelle. Une seule valeur s’applique aux deux côtés. Modifiez ce champ lorsque vous souhaitez que la fenêtre contextuelle paraisse plus large ou plus étroite :

Augmentez la valeur pour laisser plus d’espace vide et rendre la fenêtre contextuelle plus étroite.
Diminuez la valeur pour rendre la fenêtre contextuelle plus large.
Saisissez un nombre négatif et l’éditeur le traitera comme 0.

Document ouvert avec Largeur maximale, Remplissage, Gouttières latérales à 0 px, et l'indice de largeur effective

Les nouveaux modèles commencent avec des gouttières de 0 px, de sorte que la fenêtre contextuelle remplit la largeur de l’écran.

Vérifiez l’indice sous Largeur maximale pour voir la largeur de la fenêtre contextuelle avec vos valeurs actuelles.

Fenêtre contextuelle

Dans Fenêtre contextuelle, définissez le rayon d’angle et la couleur de superposition pour la façon dont le message s’affiche sur le fond estompé.

Jeu de couleurs et typographie

Dans Jeu de couleurs, définissez des rôles de couleur nommés (titre, accentuation, liens, arrière-plan, bordures, etc.). Ces rôles mettent à jour les couleurs dans tout le modèle en une seule fois. Les blocs existants conservent les couleurs que vous avez déjà définies sur ces blocs.

Dans Typographie, définissez la famille de polices et la taille par défaut pour le texte du modèle.

Variante du mode sombre

La Variante du mode sombre vous permet de définir un deuxième jeu de couleurs pour lorsque le modèle s’affiche en mode sombre.

Dans Jeu de couleurs, activez la Variante du mode sombre.
Définissez les couleurs distinctes pour le mode sombre.
Utilisez l’icône soleil/lune dans la barre supérieure pour vérifier le mode clair par rapport au mode sombre pendant que vous modifiez.

Ce bouton de basculement sur le canevas n’est pas le même que le panneau Aperçu en lecture seule. Tant que vous n’avez pas défini vos propres couleurs sombres, le bouton peut les déduire automatiquement. Voir Créer des messages in-app dans l’éditeur intégré.

Section Jeu de couleurs avec la Variante du mode sombre activée et les rôles de couleur sombre dans les Paramètres

Valeurs par défaut des blocs et de la mise en page

Utilisez ces sections pour que le nouveau contenu corresponde au modèle jusqu’à ce que vous stylisiez un bloc sur le canevas :

Valeurs par défaut des blocs : styles de départ partagés pour les blocs que vous ajouterez plus tard.
Valeurs par défaut des colonnes : espacement pour chaque mise en page en Colonnes (remplissage extérieur, remplissage à l’intérieur de chaque colonne et espace entre les colonnes).
Valeurs par défaut de la carte : apparence de départ pour les conteneurs Carte qui regroupent le contenu dans la mise en page.
Valeurs par défaut du groupe de boutons : espacement et alignement lorsque plusieurs boutons sont regroupés.
Valeurs par défaut du bouton : apparence de départ pour les nouveaux blocs Bouton afin que les CTA restent cohérents dans tout le modèle.
Valeurs par défaut du séparateur : style de ligne, couleur, épaisseur et largeur de départ pour les nouveaux blocs Séparateur.

Lorsque vous avez terminé dans les Paramètres, cliquez sur Enregistrer dans la barre supérieure pour conserver les modifications du modèle.

Configurer l’apparence de l’in-app sur l’appareil

Les Paramètres in-app contrôlent la manière dont le message apparaît et se comporte sur l’appareil : position, animations, gestes de balayage et bouton de fermeture. La position, les animations et le balayage s’appliquent sur iOS et Android natif. Le style du bouton de fermeture est différent. Il est stocké avec ce modèle et s’affiche sur toutes les plateformes qui affichent le message.

Cliquez sur Paramètres in-app dans la barre supérieure.

Bouton des paramètres in-app dans la barre supérieure de l'éditeur entre Annuler, Rétablir et Enregistrer

Position sur l’écran

Choisissez Plein écran, Haut, Centre ou Bas.

Pour un message en plein écran, définissez également la Largeur maximale dans Document comme décrit sous Document.

Paramètres in-app Options de Position sur l'écran : Plein écran, Haut, Centre, Bas

Animations

Animation d’ouverture / Animation de fermeture : Aucune, Fondu, Gauche, Droite, Haut ou Bas. Choisissez Par défaut pour utiliser le même mouvement d’ouverture/fermeture que votre application utilise déjà pour les in-apps.
Durée de l’animation (ms) : 100 à 3000 millisecondes. Laissez vide pour conserver la synchronisation habituelle de votre application.

Paramètres in-app Champs Animation d'ouverture, Animation de fermeture et Durée de l'animation

Balayer pour fermer

Activez n’importe quelle combinaison de Gauche, Droite, Haut et Bas.

Bouton de fermeture

Activez ou désactivez Afficher le bouton de fermeture.

Lorsqu’il est activé, définissez :

Position : En haut à droite, En haut à gauche, En bas à droite ou En bas à gauche.
Arrière-plan : une couleur ou Transparent.
Rayon d’angle : arrondit les coins de l’arrière-plan du bouton de fermeture. Disponible uniquement lorsque l’Arrière-plan est une couleur (et non Transparent). Définissez 0–16 px. 16 px crée un cercle (par défaut). 0 px crée un carré.
Couleur de l’icône : couleur de l’icône de fermeture.
Marge : espace autour du bouton de fermeture de chaque côté (Haut, Droite, Bas, Gauche).

Paramètres in-app Afficher le bouton de fermeture avec Position, Arrière-plan, Rayon d'angle, Couleur de l'icône et Marge

Contrairement à la position, aux animations et au balayage, le style du bouton de fermeture est stocké avec ce modèle et s’affiche sur toutes les plateformes qui affichent le message, pas seulement sur iOS et Android natif.

Cliquez sur Appliquer pour enregistrer vos choix de Paramètres in-app, ou sur Annuler pour les ignorer.
Ouvrez l’Aperçu depuis le menu ⋮ de la barre supérieure pour vérifier la position, les animations et le bouton de fermeture avant d’enregistrer.
Cliquez sur Enregistrer dans la barre supérieure pour stocker le modèle.