Documentation
Help CenterCommunityDevelopersAcademyStatus

Display web action plugin

Suggest Edits

The display web view allows a push notification to open a web address in your application instead of opening the browser application on the device like the URL action.

Install the display web action plugin

To add the display web action, do the following.

  1. In Acoustic Campaign, go to Mobile > Developer Resources > Actions.
  2. From the Actions page, scroll to the iOS actions text area and click New Action.
  3. From the dropdown, select Display web action, and the template code is automatically added to the iOS actions text area.
  4. Click Save in the top right of the screen before leaving the page.

Enable the web action template

The following example shows how to register the plugins in your AppDelegate method for iOS:

  1. Create a registerPlugins method in the AppDelegate class if one does not already exist.
  2. In the registerPlugins method, add the following code to register the display web action plugin. The registerPlugins method should be called in the AppDelegate didFinishLaunchingWithOptions method.

🚧

Note:

You must have initialized the SDK before registering the web action plugin in AppDelegate.

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

  -(void)registerPlugins {
     [DisplayWebViewPlugin registerPlugin];
     // ...
 }
@end

class AppDelegate: UIResponder, UIApplicationDelegate {
  
  func registerPlugins(){
    DisplayWebViewPlugin.register()
    // ...
  }
  
  func application(_ application: UIApplication,
didFinishLaunchingWithOptions launchOptions: [UIApplication.
LaunchOptionsKey : Any]? = nil) -> Bool {
      registerPlugins()
      // ...
  }
}

Send an API push with display web action support

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

📘

Note:

The following payload is for the push/sends API (/channels/push/sends).

{
  "channelQualifiers": [
    "gcxxxxxxxxx",
    "apxxxxxxxxx"
    ],
  "content": {
    "simple": {
      "apns": {
        "aps": {
          "alert": {
            "title": "Display web view",
            "subtitle": "web subtitle here",
            "body": "web subtitle here"
              }
          },
        "notification-action": {
            "name": "Display Web",
            "type": "displayWebView",
            "value": {
              "url": "https://www.acoustic.com"
             }
            } 
           },
           "gcm": {
             "alert": {
               "subject": "Display web view",
               "message": "web message here",
               "notification-action": {
                 "name": "Display Web",
                 "type": "displayWebView",
                 "value": {
                   "url": "https://www.acoustic.com"
                   }
                }
              }
            }
          }
        },
        "contacts": [
          {
            "channel": {
              "qualifier": "apxxxxxxxxx",
              "destination": "wwwwww|yyyyyy"
            }
          },
          {
            "channel": {
              "qualifier": "gcxxxxxxxxx",
              "destination": "wwwwww|yyyyyy"
                }
            }
          ],
          "campaignName": "Test Push Notifications"
  }

Where:

  • 'xxxxxxxxx' – is the value for the channelQualifiers in the payload. Replace it with your specific appKey.
  • 'wwwwww|yyyyyy' – is the destination value in the payload. Replace it with your specific values for userId and channelId.

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 Display web action plug-in using Maven Central. Open the app-level build.gradle file and add the Display web action plug-in to the Dependencies section.

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

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 Display web action plug-in.

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

To install the Display Web plugin, run the following command

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

📘

Note:

The plugin is available for both Android and iOS platforms.

To register the plugin:

  • Import the Acoustic mobile push display web module to your React component:
import { NativeModules, Platform } from 'react-native';
const {
  // Other Native Modules...
  RNAcousticMobilePushDisplayWeb,
} = NativeModules;
  • Add plugin registration using the DisplayWebAction value after the component is mounted.
componentDidMount() {
  if (Platform.OS == 'ios') {
    // Enable other plugins registration...
    RNAcousticMobilePushDisplayWeb.registerPlugin("DisplayWebAction");
  }
}

Send an API push with display web action support.

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

{
  "campaignName": "Android Simple Push",
  "pushes": [
    {
      "userId": "{{userId}}",
      "simpleMessages": [
        {
          "appKey": "{{appKey}}",
          "channelId": "{{channelId}}",
          "content": {
              "alert": {
              "subject": "Testing Display Web",
              "message": "Push payload body",
              "notification-action": {
                "name": "Display Web",
                "type": "displayWeb",
                "value": "{{webURL}}"
              }
            }
          }
        }
      ]
    }
  ]
}

{
  "campaignName": "iOS Simple Push",
  "pushes": [
    {
      "userId": "{{userId}}",
      "simpleMessages": [
        {
          "appKey": "{{appKey}}",
          "channelId": "{{channelId}}",
          "content": {
            "aps": {
              "alert": {
                "title": "Testing Display Web",
                "subtitle": "Test push notification",
                "body": "Push payload body"
              },
              "sound": "default"
            },
            "notification-action": {
                "name": "Display Web",
                "type": "displayWebView",
                "value": {
                    "url": "{{webURL}}"
                }
            }
          }
        }
      ]
    }
  ]
}

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

To install the Display Web plugin, run the following command

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

📘

Note:

The plugin is available for both Android and iOS platforms.

To register the plugin:

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

Send an API push with display web action support

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

{
  "campaignName": "Android Simple Push",
  "pushes": [
    {
      "userId": "{{userId}}",
      "simpleMessages": [
        {
          "appKey": "{{appKey}}",
          "channelId": "{{channelId}}",
          "content": {
              "alert": {
              "subject": "Testing Display Web",
              "message": "Push payload body",
              "notification-action": {
                "name": "Display Web",
                "type": "displayWeb",
                "value": "{{webURL}}"
              }
            }
          }
        }
      ]
    }
  ]
}

{
  "campaignName": "iOS Simple Push",
  "pushes": [
    {
      "userId": "{{userId}}",
      "simpleMessages": [
        {
          "appKey": "{{appKey}}",
          "channelId": "{{channelId}}",
          "content": {
            "aps": {
              "alert": {
                "title": "Testing Display Web",
                "subtitle": "Test push notification",
                "body": "Push payload body"
              },
              "sound": "default"
            },
            "notification-action": {
                "name": "Display Web",
                "type": "displayWebView",
                "value": {
                    "url": "{{webURL}}"
                }
            }
          }
        }
      ]
    }
  ]
}

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

The web data is implemented when the page is initialized.

  1. Add the web action (displayweb) plug-in to the pubspec.yaml file under dependencies.
flutter_acoustic_mobile_push_displayweb:
   path: ../../plugins/flutter_acoustic_mobile_push_displayweb
  1. Go to the SDK zip file and open the plugins folder. Then go to the web action plugin folder and open the libs folder. From the libs folder, copy the flutter_acoustic_mobile_push_displayweb.dart file into your applications lib folder.
  2. Import the web action plug-in into the dart file.
import 'package:flutter_acoustic_mobile_push_displayweb/flutter_acoustic_mobile_push_displayweb.dart';

You can now reference the methods within the displayweb.dart file.

Updated 8 months ago