In-App Messaging is custom views that you can send to a segment of users to show custom messages or give new offers or take to some specific pages. They can be created from your MoEngage account.

Installing Android Dependency

Add the following dependency in the android/app/build-extras.gradle file.

dependencies {
    ...
implementation("com.moengage:inapp:$sdkVersion")
}

replace $sdkVersion with the appropriate SDK version.

Requirements for displaying images and GIFs in InApp

Starting InApp version 7.0.0, SDK requires Glide to show images and GIFs in the in-apps. You need to add the below dependency in your build.gradle file.

dependencies {
 ...
 implementation("com.github.bumptech.glide:glide:4.9.0")
}

How to show In-App Messages?

Use showInApp() method to show inApp as shown below:

var moe = MoECordova.init(YOUR_APP_ID);
moe.showInApp();

InApp/Nudge Redirection default behavior

On clicking an Inapp or Nudge, MoEngage SDKs will handle only rich landing navigation redirection.

For the screen name and deep link redirection, your app code should redirect the user to the right screen or deep link. To handle the screen name and deep link redirection, you must implement inapp click callback methods. MoEngage SDK will just pass the inapp payload to this call back code. Implementation steps are mentioned in the InApp callback section of the Integration.

Context-Based InApps

We have introduced context-based InApps. While creating InApp campaigns you can set the contexts OR tags to the campaign. SDK will check with the current context set in the App and show the inApp only when a current set context matches the campaign context.

Set Current Context:

To set the current context for the InApp module use setCurrentContext() method as shown below:

moe.setCurrentContext(["Home","CategoriesScreen"]);

Reset Context:

To reset the current context for the InApp module call resetCurrentContext() method:

moe.resetCurrentContext();

Self Handled In-App Messaging

The SDK does not show self-handled In-Apps. While creating the campaign, a JSON payload has to be provided in the dashboard. The same payload will be provided to the app by the SDK on calling the getSelfHandledInApp() method, and info will be received by a callback post all the delivery controls are checked:

var moe = MoECordova.init(YOUR_APP_ID);
moe.getSelfHandledInApp();

//Callback for receiving self-handled inapp
moe.on('onInAppSelfHandle', function(selfHandledPayload) {
   console.log('Self hanlded InApp Info: ' + JSON.stringify(selfHandledPayload));
});

Post consuming the Self-handled inApp, to update impression, click and dismiss stats call the following methods with the payload received in self-handled In-App callback:

var moe = MoECordova.init(YOUR_APP_ID);

// Track impression 
moe.selfHandledShown(selfHandledPayload)
// Track Click
moe.selfHandledClicked(selfHandledPayload)
// Track Dismiss
moe.selfHandledDismissed(selfHandledPayload)

In-App Messaging Rules

We use the following rules while showing the In-App:

Preconditions for In-App to work:

• If InApp Backend Sync was successful in the current session or not.
• Check if the Device is NOT iPad/Tablet.
• Check if InApp is disabled on the current screen.
• Check Device Orientation is Portrait(Landscape is not supported).

The following are checked for each campaign in the list of active campaigns(sorted according to priority and Last Updated Time)

• Check Global Delay has lapsed, skip this if Ignore Global Delay set for the campaign.
• Check if the campaign has expired
• Display Rules
• Check Show Only on Screen
• Check with current contexts
• Delivery Controls
• Persistence Check(If the primary action of InApp is done but still want to show the inApp)
• Check if the campaign has been shown max times
• Check if the campaign level delay has crossed.

The first campaign satisfying all the rules is shown to the user.

Callback in JavaScript on In-App Events

To get a callback in javascript on in-app events you need to register for a click listener as shown below.

Minimum Plugin version required: 6.0.0

var moe = MoECordova.init(YOUR_APP_ID);
moe.on('onInAppShown', function(inAppInfo) {
  	console.log('InApp Shown with Info: ' + JSON.stringify(inAppInfo));
});

moe.on('onInAppClick', function(inAppInfo) {
    console.log('InApp Shown Clicked with Info: ' + JSON.stringify(inAppInfo));
});

moe.on('onInAppDismiss', function(inAppInfo) {
    console.log('InApp Dismissed with Info: ' + JSON.stringify(inAppInfo));
});

moe.on('onInAppCustomAction', function(inAppInfo) {
    console.log('InApp Custom Action with Info: ' + JSON.stringify(inAppInfo));
});

Payload Structure in Callbacks

InAppInfo received in the callbacks above have the following structure:

{
  "accountMeta": {
    "appId": ""
  },
  "data": {
    "platform": "iOS/android",
    "campaignName": "",
    "campaignId": "",
    "campaignContext": {},
    "actionType": "navigation",
    "navigation": { // Key will only be present for onInAppClick callback
      "navigationType": "screen/deep_linking",
      "value": "",
      "kvPair": {
        "k1": "v1"
      }
    },
    "customAction": {// Key will only be present for onInAppCustomAction callback
      "kvPair": {
        "k2": "v2"
      }
    },
    "selfHandled": { // Key will only be present for onInAppSelfHandle callback
      "payload": "", // payload entered in dashboard while creating selfHandled campaign
      "dismissInterval": 60 // auto dismiss interval
    }
  }
}

Handling Orientation Change

Starting SDK version 7.3.0 in-apps are supported in both portrait and landscape modes.
SDK has to be notified when the device orientation changes for SDK to handle in-app display.

There are two ways to do it:

1. Add the API call in the Android native part of your app
2. Call MoEngage plugin's onOrientationChanged()

Add the API call in the Android native part of your app

Notify the SDK when onConfiguartionChanged() API callback is received in your App's Activity class.

import android.os.Bundle;
import org.apache.cordova.*;
import com.moengage.cordova.MoECordovaHelper;

public class MainActivity extends CordovaActivity {
  ...
  @Override
  public void onConfigurationChanged(Configuration newConfig) {
    super.onConfigurationChanged(newConfig);
    MoECordovaHelper.getInstance().onConfigurationChanged();
    ...
  }
  ...
}

Call MoEngage plugin's orientation change API

Call the below API to notify SDK of the orientation change.

var moe = MoECordova.init(YOUR_APP_ID);
...

// Notify SDK on orientation change
moe.onOrientationChanged();