To install the Wallet plugin, run the following command

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

📘

Note:

The plugin is available only for iOS platform.

To register the plugin:

• Import the Acoustic mobile wallet module to your React component:

import { NativeModules, Platform } from 'react-native';
const {
  // Other Native Modules...
  RNAcousticMobilePushWallet,
} = NativeModules;

• Add plugin registration using WalletAction value after the component is mounted.

componentDidMount() {
  if (Platform.OS == 'ios') {
    // Enable other plugins registration...
    RNAcousticMobilePushWallet.registerPlugin("WalletAction");
  }
}

Send an API push with wallet action support

To send a push notification with a wallet push notification action, send the following to your payload.

{
  "campaignName": "iOS Simple Push",
  "pushes": [
    {
      "userId": "{{userId}}",
      "simpleMessages": [
        {
          "appKey": "{{appKey}}",
          "channelId": "{{channelId}}",
          "content": {
            "aps": {
              "alert": {
                "title": "Wallet/Passbook",
                "subtitle": "Test push notification",
                "body": "Push payload body"
              },
              "sound": "default"
            },
            "notification-action": {
                "name": "Wallet",
                "type": "passbook",
                "value": {
                    "url": "https://acoustic-demo.s3.us-east-2.
amazonaws.com/Acoustic.pkpass"
                }
            }
          }
        }
      ]
    }
  ]
}

Where you must update the {{userId}},{{appKey}}, and {{channelId}} values to match the values in your environment.

To install the Wallet plugin, run the following command

cordova plugin add <path to downloaded directory>/plugins/co.acoustic.
mobile.push.plugin.passbook
cordova prepare

📘

Note:

The plugin is available only for iOS platform.

To register the plugin:

@implementation AppDelegate
  - (BOOL)application:(UIApplication *)application 
didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    [self registerPlugins];
    // ...
  }
  -(void)registerPlugins {
    [AddToWalletPlugin registerPlugin];
    // ...
  }
@end

Send an API push with wallet action support

To send a push notification with a wallet push notification action, send the following to your payload.

{
  "campaignName": "iOS Simple Push",
  "pushes": [
    {
      "userId": "{{userId}}",
      "simpleMessages": [
        {
          "appKey": "{{appKey}}",
          "channelId": "{{channelId}}",
          "content": {
            "aps": {
              "alert": {
                "title": "Wallet/Passbook",
                "subtitle": "Test push notification",
                "body": "Push payload body"
              },
              "sound": "default"
            },
            "notification-action": {
                "name": "Wallet",
                "type": "passbook",
                "value": {
                    "url": "https://acoustic-demo.s3.us-east-2.
amazonaws.com/Acoustic.pkpass"
                }
            }
          }
        }
      ]
    }
  ]
}

Where you must update the {{userId}},{{appKey}}, and {{channelId}} values to match the values in your environment.

To install the Action menu plugin, run the following command

npm install --save <sdk folder>/plugins/react-native-acoustic-mobile-push-action-menu

📘

Note:

The plugin is available only for iOS platform.

To register the plugin:

• Import the Acoustic mobile push action menu module to your React component:

import { NativeModules, Platform } from 'react-native';
const {
  // Other Native Modules...
  RNAcousticMobilePushActionMenu,
} = NativeModules;

• Add plugin registration using ActionMenuAction value after the component is mounted.

componentDidMount() {
  if (Platform.OS == 'ios') {
    // Enable other plugins registration...
    RNAcousticMobilePushActionMenu.registerPlugin("ActionMenuAction");
  }
}

Send an API push with action menu action support.

To send a push notification with an action menu push notification with the following three actions: open app, dial, and display web; send the following to your payload.

{
  "campaignName": "iOS Simple Push",
  "pushes": [
    {
      "userId": "{{userId}}",
      "simpleMessages": [
        {
          "appKey": "{{appKey}}",
          "channelId": "{{channelId}}",
          "content": {
            "aps": {
              "alert": {
                "title": "Action Menu",
                "subtitle": "Test push notification",
                "body": "Push payload body"
              },
              "sound": "default"
            },
            "notification-action": {
                "name": "Action Menu",
                "type": "showactions"
            },
            "category-actions":[
                {
                    "name": "Open App",
                    "type": "openApp"
                },
                {
                    "name": "Dial",
                    "type": "dial",
                    "value":"1234567899"
                },
                {
                    "name": "Display Web",
                    "type": "displayWebView",
                    "value": {
                        "url": "https://www.google.com"
                    }
                }
            ]
          }
        }
      ]
    }
  ]
}

Where you must update the {{userId}},{{appKey}}, and {{channelId}} values to match the values in your environment.

To install the Action menu plugin, run the following command

cordova plugin add <path to downloaded directory>/plugins/co.acoustic.
mobile.push.plugin.action-menu
cordova prepare

📘

Note:

The plugin is available only for iOS platform.

To register the plugin:

@implementation AppDelegate
  - (BOOL)application:(UIApplication *)application 
didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    [self registerPlugins];
    // ...
  }
  -(void)registerPlugins {
    [ActionMenuPlugin registerPlugin];
    // ...
  }
@end

Send an API push with action menu action support

To send a push notification with an action menu push notification action, send the following to your payload.

{
  "campaignName": "iOS Simple Push",
  "pushes": [
    {
      "userId": "{{userId}}",
      "simpleMessages": [
        {
          "appKey": "{{appKey}}",
          "channelId": "{{channelId}}",
          "content": {
            "aps": {
              "alert": {
                "title": "Action Menu",
                "subtitle": "Test push notification",
                "body": "Push payload body"
              },
              "sound": "default"
            },
            "notification-action": {
                "name": "Action Menu",
                "type": "showactions"
            },
            "category-actions":[
                {
                    "name": "Open App",
                    "type": "openApp"
                },
                {
                    "name": "Dial",
                    "type": "dial",
                    "value":"1234567899"
                },
                {
                    "name": "Display Web",
                    "type": "displayWebView",
                    "value": {
                        "url": "https://www.google.com"
                    }
                }
            ]
          }
        }
      ]
    }
  ]
}

Where you must update the {{userId}},{{appKey}}, and {{channelId}} values to match the values in your environment.

To install the Text input plugin, run the following command

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

📘

Note:

The plugin is available only for Android platform.

👍

Registration

The plugin registration is already completed in the Acoustic plugin code.

Send an API push with text input action support.

To send a push notification with a text input action, send the following to your payload.

{
  "campaignName": "Android Simple Push",
  "pushes": [
    {
      "userId": "{{userId}}",
      "simpleMessages": [
        {
          "appKey": "{{appKey}}",
          "channelId": "{{channelId}}",
          "content": {
              "alert": {
              "subject": "Testing Text Input",
              "message": "Push payload body",
              "type": "textinput",
              "notification-action": {
                "name": "Text Input",
                "type": "textinput"
              }
            }
          }
        }
      ]
    }
  ]
}

Where you must update the {{userId}},{{appKey}}, and {{channelId}} values to match the values in your environment.

You can create your own custom action notification implementation for new action types. Custom action notifications override the pre-defined action types in the SDK, such as dial, url, and openApp.

1. To create a custom action notification, you must implement co.acoustic.mobile.push.sdk.api.notification.MceNotificationAction.
   Java

   
   import co.acoustic.mobile.push.sdk.api.notification.MceNotificationAction
   
   public class MyCustomAction implements MceNotificationAction {
   
   /**
    * This method is called when a notification action is clicked.
    * @param context The application context
    * @param type The notification action type
    * @param name The notification action name (can be null)
    * @param attribution The notification attribution (can be null)
    * @param payload The notification payload. The map contains the key value pairs from the notification action payload.
    * @param fromNotification true if this action is called from a notification and false otherwise
    */
   public void handleAction(Context context, String type, String name, String attribution, Map payload, boolean fromNotification) {
   // your implementation here
   }
   
   /**
    * Initiates the action with the given options
    * @param context The application's context
    * @param initOptions The initialization options
    */
   public void init(Context context, JSONObject initOptions){
   
   // your implementation here
   
   }
   
   /**
    * Updates the action with the given options - not is use yet
    * @param context The application's context
    * @param updateOptions The update options
    */
   public void update(Context context, JSONObject updateOptions) {
   
   // your implementation here
   
   }
   /**
    * This method is called when a notification with this action as its main action. If it returns false, the notification will not be shown.
    * This can be used in case there are preparations needed before the notification can be shown.
    * @param context The application's context
    * @param notificationDetails The received notification
    * @param sourceBundle The bundle that contained the notification
    * @return true to show the notification and false to not show it
    */
   public boolean shouldDisplayNotification(Context context, NotificationDetails notificationDetails, Bundle sourceBundle) {
   
   // your implementation here
   
   }
   }
   

2. To register your custom action for a specific type, add the following code.
   Java

   
   import co.acoustic.mobile.push.sdk.api.notification.MceNotificationActionRegistry
   MceNotificationActionRegistry.registerNotificationAction("snooze", new MyCustomAction());
   

Action plugins can be used to extend the behavior executed when a message is interacted with. Push messages, InApp messages and Inbox messages all use actions to define what happens when a user interacts with them. You can register your own action handlers written in javascript using the registerAction function. (See the send-email-action.js in the sample application for an example).

Custom actions can also be written in javascript:

import {NativeEventEmitter} from 'react-native';
    import {RNAcousticMobilePushActionHandler} from 'NativeModules';

    const emitter =
    new NativeEventEmitter(RNAcousticMobilePushActionHandler);

    export
    default
    function demonstrationAction(details) {
    // details.action contains the specific action payload ie {"type": "demonstration", "value": "acoustic"}
    // details.payload contains the entire push payload ie { "aps": { "alert": "test" }, "notification-action": {"type": "demonstration", "value": "acoustic"} }
    // You can place code here to use the values in those payloads to perform work on behalf of the user
    }

    // The registerAction call tells the SDK that you intend to handle actions of this type. In addition the function passed will be called for any missed actions received while your code was not running.
    RNAcousticMobilePushActionHandler.registerAction('demonstration', demonstrationAction);

    // The listener call allows this function to be called when actions arrive
    emitter.addListener('demonstration', demonstrationAction);

To include custom actions in your application, you must put them in a space-separated list in the custom actions key in the config.xml file. After that, you can register for callbacks to those actions through the MCEPlugin.setRegisteredActionCallback function. The callback includes both the action payload and the entire push payload for processing that action.

Register custom action callback

You have to register a callback with one or two arguments, the action, and the payload, for a specific custom action using the following:

MCEPlugin.setRegisteredActionCallback(callback, customActionName);

The following is an example of how to register the callback for the custom action:

MCEPlugin.setRegisteredActionCallback(function (action, payload) {
const elem = document.getElementById('title');
const newText = action['value'];
elem.innerText = newText;
},
'customUrl');

To create a custom action, you must pass user input through a register() function and send it to the SDK. The Flutter SDK then registers it as a custom action.

1. Import the following packages.

import 'package:flutter/material.dart';
import 'package:flutter_acoustic_mobile_push/flutter_acoustic_sdk_push.dart';

2. Create local variable:

var value = CustomActionValue();

3. Add the registerCustomAction function to send the data to the SDK.

Future<void> registerCustomAction(String actionType) async {
   value.registerCustomAction(actionType);
 
   value.registeredEvent.subscribe((args) {
     var data = args!.changedValue;
     print('registering');
     print(data);
 
     setState(() {
       statusValue = data;
     });
   });
 }

4. The register function then passes the user input data to the registerCustomAction function.

register() {
   _yourFormKeyHere.currentState?.save();
   if (_customActionType == null) {
     return Text(statusValue, style: TextStyle(color: labelColor));
   } else {
     registerCustomAction("CoolAction");
   }
 }

In the example above, we are creating and registering a custom action called "CoolAction".

5. To unregister a custom action, add the unregister function. The unregister function then passes the user input data to the unregisterCustomAction function.

Future<void> unregisterCustomAction(String actionType) async {
   value.unregisterCustomAction(actionType);
   value.unregisiteredEvent.subscribe((args) {
     var data = args!.changedValue;
     setState(() {
       statusValue = data;
     });
   });
 }

📘

Note:

The register function must be tied to a register button or inkwell widget that is used to save the user input when the clicked or the tap action is performed.

For more information about registerCustomAction functionality, see
flutter_acoustic_sdk_push.dart

Override Actions

You can override actions and replace an old action with a new one. If you assigned a key to the actionType and did not use the default key to map the action to the SDK, you must first unregister the key and then assign a new one.

1. Add the unregisterCustomAction function from the SDK.

Future<void> unregisterCustomAction(String actionType) async {
   value.unregisterCustomAction(actionType);
   value.unregisteredEvent.subscribe((args) {
     var data = args!.changedValue;
     setState(() {
       statusValue = data;
     });
   });
 }

2. Add the unregister function.

unregister() {
   _yourFormKeyHere.currentState?.save();
   unregisterCustomAction(_customActionType);
 }

3. After unregistering the action type, you should now be able to register a new action type and override/update the key for the map (value) of the previous action.
   For more information, see

• CustomActions.dart
• flutter_acoustic_sdk_push.dart