Customize your Firebase In-App Messaging messages on iOS

Firebase In-App Messaging lets you customize message displays to change the way your app renders messages' layout, font styles, button shapes, and other details. There are two ways to modify message displays: modify the default Firebase In-App Messaging displays or create your own message display library from scratch.

Modify default displays

The most straightforward way customize your messages is to build off of Firebase In-App Messaging's default message display code.

Clone the firebase-ios-sdk repo

To get started, clone the firebase-ios-sdk repo, and open the InAppMessagingDisplay directory.

Select message types to modify

With the repo cloned, you can modify any or all of the Firebase In-App Messaging message types: Modal, Banner, and ImageOnly. Each type corresponds to a message layout in the Firebase In-App Messaging campaign creation flow.

Accordingly, each type has access to a different set of data, determined by campaign customization options in the Firebase console:

Type titleText bodyText textColor backgroundColor imageData actionButton
Modal check check check check check check
Banner check check check check check
ImageOnly check

Modify the message display rendering code

With the message type limitations in mind, you're free to modify them however you'd like. You can create a banner that displays at the bottom of your app, move around the action button on a modal, or any other modification that would make the messages' look and feel fit your app.

There are two main things to pay attention to when modifying message displays:

Modify files in your preferred message types' directories and the corresponding sections of the .storyboard to create your custom message displays.

Update your podfile to use your modified InAppMessagingDisplay

To get Firebase In-App Messaging to use your modified message displays instead of the default displays, update your podfile to use your customized InAppMessagingDisplay:

# 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 InAppMessagingDisplay pod:
# pod 'Firebase/InAppMessagingDisplay'

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

end

With that done, you can update your pods, rebuild your app, and see your new, customized message displays.

Create your own message display library

You're not limited to working from the InAppMessagingDisplay library to create a UI for displaying messages. You can also write your own code from scratch.

Build a class that implements the FIRInAppMessagingRendering interface

Firebase In-App Messaging uses the FIRInAppMessaging class to handle communications between Firebase servers and your app. That class, in turn, uses the FIRInAppMessagingRendering protocol to display the messages it receives. To build your own display library, write a class that implements the protocol.

The protocol definition and documentation on how to conform to it are in the FIRInAppMessagingRendering.h file of the InAppMessaging library. If you've already set up Firebase In-App Messaging, you can find the file under your Xcode project directory:

FirebaseInAppMessaging > Frameworks > FirebaseInAppMessaging.framework > Headers > FIRInAppMessagingRendering.h.

Set messageDisplayComponent to use your message display library

FIRInAppMessaging uses its messageDisplayComponent property to determine which object to use when displaying messages. Set that property to an object of your custom message display class, so Firebase In-App Messaging knows to use your library to render messages:

[FIRInAppMessaging inAppMessaging].messageDisplayComponent = yourFIRInAppMessagingRenderingInstance;

Modify your podfile to use the headless version of Firebase In-App Messaging

The default Firebase In-App Messaging pod, Firebase/InAppMessagingDisplay, automatically assigns itself as your app's messageDisplayComponent. To get around that, use the headless Firebase/InAppMessaging pod instead:

# 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 InAppMessagingDisplay pod:
# pod 'Firebase/InAppMessagingDisplay'

# Include the headless pod instead:
pod `Firebase/InAppMessaging'

end

With that done, you can update your pods, rebuild your app, and see your new, customized message displays.

Send feedback about...

Need help? Visit our support page.