Personnalisez vos messages de messagerie Firebase In-App

Flutter iOS+ Android

La messagerie Firebase In-App fournit un ensemble utile de comportements et de types de messages préconfigurés avec une apparence par défaut, mais dans certains cas, vous souhaiterez peut-être étendre les comportements et le contenu des messages. La messagerie intégrée à l'application vous permet d'ajouter des actions aux messages et de personnaliser l'apparence des messages.

Ajoutez une action à votre message

Grâce aux actions, vous pouvez utiliser vos messages dans l'application pour diriger les utilisateurs vers un site Web ou un écran spécifique de votre application.

Implémenter un gestionnaire de liens profonds

Firebase In-App Messaging utilise des gestionnaires de liens pour traiter les actions. Le SDK est capable d'utiliser un certain nombre de gestionnaires, donc si votre application en possède déjà un, Firebase In-App Messaging peut l'utiliser sans aucune configuration supplémentaire. Si vous n'avez pas encore de gestionnaire, vous pouvez utiliser Firebase Dynamic Links. Pour en savoir plus, lisez Créer des liens dynamiques sur iOS .

Ajoutez l'action à votre message à l'aide de la console Firebase

Une fois que votre application dispose d'un gestionnaire de liens, vous êtes prêt à composer une campagne avec une action. Ouvrez la console Firebase sur Messaging et démarrez une nouvelle campagne ou modifiez une campagne existante. Dans cette campagne, fournissez une carte , un texte de bouton et une action de bouton , une action d'image ou une action de bannière , où l'action est un lien profond pertinent.

Le format de l'action dépend de la présentation du message que vous choisissez. Les modaux obtiennent des boutons d'action avec un contenu de texte, une couleur de texte et une couleur d'arrière-plan personnalisables. Les images et les bannières supérieures, en revanche, deviennent interactives et invoquent l'action spécifiée lorsqu'elles sont enfoncées.

Modifier l'apparence du message

La messagerie Firebase In-App vous permet de personnaliser l'affichage des messages pour modifier la façon dont votre application affiche la disposition des messages, les styles de police, la forme des boutons et d'autres détails. Il existe deux manières de modifier l'affichage des messages : modifier les affichages de messagerie Firebase In-App par défaut ou créer votre propre bibliothèque d'affichage de messages à partir de zéro.

Modifier les affichages par défaut

Le moyen le plus simple de personnaliser vos messages consiste à utiliser le code d'affichage des messages par défaut de Firebase In-App Messaging.

Cloner le dépôt firebase-ios-sdk

Pour commencer, clonez la dernière version du dépôt firebase-ios-sdk et ouvrez le répertoire InAppMessaging .

Sélectionnez les types de messages à modifier

Une fois le dépôt cloné, vous pouvez modifier tout ou partie des types de messages de messagerie Firebase In-App : Card , Modal , Banner et ImageOnly . Chaque type correspond à une présentation de message dans le flux de création de campagne Firebase In-App Messaging.

En conséquence, chaque type a accès à un ensemble de données différent, déterminé par les options de personnalisation de campagne dans la console Firebase :

Modifier le code de rendu de l'affichage des messages

En gardant à l'esprit les limitations des types de messages, vous êtes libre de les modifier comme vous le souhaitez. Vous pouvez créer une bannière qui s'affiche au bas de votre application, déplacer le bouton d'action sur un modal, intégrer le message dans l'application dans le flux d'un utilisateur ou toute autre modification qui permettrait d'adapter l'apparence des messages à votre application. .

Il y a deux choses principales auxquelles il faut prêter attention lors de la modification des affichages de messages :

• Répertoires de types de messages : chaque type de message possède un répertoire distinct contenant des fichiers qui déterminent la logique de ce type :
  • Card
  • Modal
  • Banner
  • ImageOnly
• Storyboard : la bibliothèque InAppMessaging dispose également d'un fichier .storyboard qui permet de définir l'interface utilisateur pour les trois types de messages :
  • FIRInAppMessageDisplayStoryboard.storyboard

Modifiez les fichiers dans les répertoires de vos types de messages préférés et les sections correspondantes du .storyboard pour créer vos affichages de messages personnalisés.

Mettez à jour votre fichier pod pour utiliser votre code InAppMessaging modifié

Pour que Firebase In-App Messaging utilise vos affichages de messages modifiés au lieu des affichages par défaut, mettez à jour votre fichier pod pour utiliser votre bibliothèque InAppMessaging personnalisée :

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'YourProject' do
# Comment the next line if you're not using Swift and don't want to use dynamic frameworks
use_frameworks!

# Pods for YourProject
pod 'Firebase'

# Remove the default InAppMessaging pod:
# pod 'Firebase/InAppMessaging'

# Overwrite it with a version that points to your local copy:
pod `FirebaseInAppMessaging', :path => '~/Path/To/The/Cloned/Repo/'

end

Créez votre propre bibliothèque d'affichage de messages

Vous n'êtes pas limité à travailler à partir de la bibliothèque InAppMessaging pour créer une interface utilisateur permettant d'afficher des messages. Vous pouvez également écrire votre propre code à partir de zéro.

Créez une classe qui implémente le protocole InAppMessagingDisplay

Firebase In-App Messaging utilise la classe InAppMessaging pour gérer les communications entre les serveurs Firebase et votre application. Cette classe, à son tour, utilise le protocole InAppMessagingDisplay pour afficher les messages qu'elle reçoit. Pour créer votre propre bibliothèque d'affichage, écrivez une classe qui implémente le protocole.

La définition du protocole et la documentation sur la façon de s'y conformer se trouvent dans le fichier FIRInAppMessagingDisplay.h de la bibliothèque InAppMessaging .

Définissez messageDisplayComponent pour utiliser votre bibliothèque d'affichage de messages

InAppMessaging utilise sa propriété messageDisplayComponent pour déterminer quel objet utiliser lors de l'affichage des messages. Définissez cette propriété sur un objet de votre classe d'affichage de messages personnalisée afin que Firebase In-App Messaging sache utiliser votre bibliothèque pour afficher les messages :

InAppMessaging.inAppMessaging().messageDisplayComponent = yourInAppMessagingRenderingInstance