In app notifications

• Intro
• Full-featured In-App notifications
  • Enabling Full-featured In-Apps
  • Android
  • iOS
• Basic In-App notifications
  • Usage
    • Send message
  • Modal
    • Customize button text color
      • Android
      • iOS
  • Banner
• Handling actions

Intro

In-app messages are a type of communication tool with mobile users that includes banners, pop-ups and other formats that appear on screen of mobile applications while users are interacting with it.

Full-featured In-App notifications

Feature is available since 10.0.0 version.

Enabling Full-featured In-Apps

Full-featured In-App notifications are disabled by default. Without enabling Full-featured In-app notifications MMNotificationMessageReceived event is triggered, but In-App not processed and not displayed within WebView.

Notice

Enabling this feature also enables JavaScript execution on the webView for the feature proper work.

To setup Full-featured In-App for Mobile Messaging SDK plugin, put fullFeaturedInAppsEnabled: true in configuration:

mobileMessaging.init({
        ...
            fullFeaturedInAppsEnabled: true,
        ...
});

Android

For more information about Full-featured In-App notifications on Android platform, please refer to Android SDK Full-Featured In-Apps documentation

iOS

For more information about Full-featured In-App notifications on iOS platform, please refer to iOS SDK Full-Featured In-Apps documentation

Basic In-App notifications

Usage

Send message

After you integrated Mobile Messaging SDK into your app, you just need to send a message using Push HTTP or OMNI API providing the desired inAppStyle notification option - either MODAL or BANNER. The Mobile Messaging SDK will automatically display the message with appropriate style.

Tapping the action should trigger actionTapped event where you can act upon the received action identifier.

Modal

When inAppStyle notification option is set to MODAL for API call or in Portal campaign settings, the in-app notification will be shown up in the following cases:

• notification is received and application is opened by tapping on the apps icon;
• notification is received when application is in foreground state;
• for interactive notifications, user opens the app by tapping on the notification (but not performing a notification action).

Modal In-app notification is supported for silent push notifications as well as for cases when the end user opted out from push notifications at OS level, so that mobile users can be targeted with in-app message waiting them in the application and not get disturbed with notification on lock screen.

Modal In-app notification displays only the most recently received message with in-app enabled. In case of non-interactive messages, modal in-app alert will have default actions: "Cancel" and "Open".

Android	iOS

If the sent notification didn’t have any category, in-app alert will be shown with default actions (localized texts):

Action	Android action ID	iOS action ID	Foreground
Cancel	mm_cancel	com.apple.UNNotificationDismissActionIdentifier	false
Open	mm_open	com.apple.UNNotificationDefaultActionIdentifier	true

For interactive notifications, actions defined for category will be displayed.

Android	iOS

Customize button text color

Android

Button text color on in-app dialog is managed by global style attribute colorAccent, such as:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorAccent">@color/colorAccent</item>
</style>

iOS

For iOS In-app notification button text color is taken from app global tint color. You can customize it with MMInteractiveMessageAlertSettings.tintColor parameter in AppDelegate, such as:

//Swift
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
    MMInteractiveMessageAlertSettings.tintColor = UIColor.blue
    return true
}

Banner

Temporary banners will simply appear at the top of your screen and then disappear after few seconds. When inAppStyle notification option is set to BANNER for API call or in Portal campaign settings, the in-app notification will be shown up in the following cases:

• notification is received when application is in foreground state.

Android	iOS

iOS specific: It is worth to mention that unlike modal notifications, banner notifications will be also added to Notification Center if not any actions were performed by user.

Handling actions

Following on-tap actions are supported for the Banner and for the action buttons of other In-App notification types:

• Open URL in browser
• Open URL within the webView
• Open page in mobile app

More information can be found on the How to define specific action on notification or in-app primary button tap(open url, deeplink)?

Additionally, MobileMessaging plugin will trigger:

• notificationTapped event if user tapped the banner In-App notification
• actionTapped event if user tapped action button of the Pop-up or Fullscreen notification

Example of handling actionTapped event:

import { mobileMessaging } from 'infobip-mobile-messaging-react-native-plugin';

mobileMessaging.subscribe(
    'actionTapped',
    eventData => {
        console.log('Event received', eventData);
    }
);