In-app content

• MiniTemplate shows a banner either on the top or bottom of the screen. It will automatically close after a default of five seconds. It includes a centered text message and a selectable left icon (note, notification, store, offer, comment). Unlike iOS, the Android inapp plugin does not currently support the background image option.
• BaseInAppTemplate is the base class for the MiniTemplate, ImageTemplate and VideoTemplate templates. If you want to use any of these templates, you must include all of the files from Plugin/InApp/* in the SDK zip; however, you do not have to register this template with the template registry, as it cannot be used independently.
• ImageTemplate shows an image full screen along with an expandable text region below overlaid on top of your app content through a vibrant effect. Clicking the image opens the supplied action, clicking the text expands or collapses it, and swiping down or pressing X closes it. The template automatically closes if there is no user interaction within a default of 5 seconds.
• VideoTemplate shows a video full screen along with an expandable text region below overlaid on top of your app content through a vibrant effect. Clicking the video opens the supplied action, clicking the text expands or collapses it, and swiping down or pressing X button closes it. The template automatically closes if there is no user interaction after the video is complete.

To get started, you need Android 5.0 (API level 21) or later. Two implementation options are available.

Option A: Automatic (recommended)

If you are using Campaign SDK for Android 3.9.18 or later, you can implement the In-app plug-in using Maven Central. Open the app-level build.gradle file and add the In-app plug-in to the Dependencies section.

implementation "io.github.go-acoustic:acoustic-mobile-push-android-inapp:+"

Still using an older version? See Migrate Campaign SDK for Android to version 3.9.18.

Option B: Manual

A manual option is available for all versions of the In-app plug-in.

1. Go to our plugins directory on Github.
2. Copy acoustic-mobile-push-android-sdk-plugin-inapp.aar to your project's /lib directory and to the build.gradle file.

Post-installation steps for Android apps

1. After adding the plug-in to your project, pull pending in-app messages to the device using the following command.

MessageSync.syncMessages(getApplicationContext(),

new        OperationCallback<MessageSync.SyncReport>() {
     @Override
      public void onSuccess(MessageSync.SyncReport syncReport, OperationResult result) {
             // sync successful code here
      }

      @Override
      public void onFailure(final MessageSync.SyncReport syncReport, final OperationResult result) {
         // sync failure code here
     }
 

2. To show the in-app call, use the following code.

 InAppManager.show(this, getSupportFragmentManager(), R.id.container_layout);

📘

Note:

Only RelativeLayout is supported as a container for in-app notifications.

3. Send an in-app message by adding the following code to the notification payload.

"inApp": {
  "actions": [{
      "name": "<action name>",
      "value": "<action value>"
    },
    ...
  ],
  "rules": ["<rule 1 name>", "rule 2 name", ...],
  "maxViews": < maximum number of time the message will be displayed > ,
  "template": "<template name",
  "content": < content json element - see content below >
}

1. Install the plugin
   Python

   
   npm install <sdk folder>/plugins/react-native-acoustic-mobile-push-inapp
   

2. Link the plugin
   Python

   
   react-native link react-native-acoustic-mobile-push-inapp
   

3. Copy files in <sdk folder>/plugins/react-native-acoustic-mobile-push-inapp/javascript into your project.
4. Import the templates in your App.js
   Python

   
   import {InAppBanner} from './in-app/in-app-banner';
   import {inAppMedia} from './in-app/in-app-media';
   

5. Place executeInApp calls on appropriate pages of your application or in response to user actions.

1. Copy files in the directories in the in-app folder to your project.
2. Add the default in-app template stylesheet to the page. This includes support for additional plug-ins, such as videos and images.
   JavaScript

   
   <link rel="stylesheet" type="text/css" href="css/inapp_media.css" />
   <link rel="stylesheet" type="text/css" href="css/inapp_banner.css" />
   <link rel="stylesheet" type="text/css" href="css/inapp_image.css" />
   <link rel="stylesheet" type="text/css" href="css/inapp_video.css" />
   

   📘

   Note:

   You must have, at a minimum, version 4.2.0 of Apache Cordova to include videos in your in-app messages.

3. Run in-app rules in the appropriate points in your application.
   JavaScript

   
   MCEInAppPlugin.executeInAppRule(['test']);
   

Flutter SDK retrieves the in-app data sent from Campaign and the simulation for canned in-app and sends them to the same list. The in-app data is then presented in the order they were sent and received.

1. Install the flutter_acoustic_mobile_push_inapp plug-in through your project's pubspec.yaml file.

flutter_acoustic_mobile_push_inapp:
    path: ../../plugins/flutter_acoustic_mobile_push_inapp

📘

Note:

Depending on the dev tools you use in your environment, you may need to explicitly run pub get to pull the plug-in into the project. If you use VScode, the pub get command automatically runs when you save the pubspec.yaml file.

2. Add the necessary imports:

import 'package:flutter/material.dart';
import 'dart:async';
import 'package:flutter_acoustic_mobile_push_inapp/flutter_acoustic_mobile_push_inapp.dart';
import 'package:flutter_acoustic_mobile_push_inapp/flutter_in_app_pay_load.dart'

3. Create the following variables.

var inApp = InAppMessageValue();

The following variable stores the data pulled from the SDK:

var _templatesInAppData;

3. Run the data pull and data updates upon page entry. The inApp.getInAppList() function provides the sync necessary to pull the data.

@override
 void initState() {
   super.initState();
   inApp.getInAppList();
   getUpdatedInAppMesssageList();
 }

Display an in-app message using rules

You can display a banner app based on a specific rule assigned to that in-app message when it was created.

In the following example, we'll use offer, pizza ready, and all rules.
We'll also assume that both the offer and pizza-ready in-app messages will have the all rule. Therefore, you'll have in-app messages with the rule all, pizzaready and all, offer.

To display the oldest in-app message, call messages with the rule all
When you specify all, the oldest in-app message is displayed.

Future<void> getInAppMessages(List<String> rules) async {
    for (String ruleName in rules) {
      inApp.getInAppMessage([ruleName]);
    }
  }

   getInAppMessages(["all"]);

If there are ten in-app messages on the device that can be displayed when you use the rule all, the API call returns only the oldest in-app message with the rule all present.

For example, if a message was sent yesterday and a message is sent today with the rule all are on the device, the API call returns the oldest message - the message sent yesterday.

To display an offer in-app message, call the message with the offer rule:

inApp.getInAppMessages(["offer"]);

To display pizza ready in-app message, call the message with the pizzaready rule

inApp.getInAppMessages(["pizzaready"]);

For more information, see

• InApp.dart
• flutter_in_app_pay_load.dart
• flutter_acoustic_mobile_push_inapp.dart