Display web action plugin
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.
- In Acoustic Campaign, go to Mobile > Developer Resources > Actions.
- From the Actions page, scroll to the iOS actions text area and click New Action.
- From the dropdown, select Display web action, and the template code is automatically added to the iOS actions text area.
- 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:
- Create a
registerPluginsmethod in theAppDelegateclass if one does not already exist. - In the
registerPluginsmethod, add the following code to register the display web action plugin. TheregisterPluginsmethod should be called in theAppDelegatedidFinishLaunchingWithOptionsmethod.
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 thechannelQualifiersin the payload. Replace it with your specificappKey.-
'wwwwww|yyyyyy'– is the destination value in the payload. Replace it with your specific values foruserIdandchannelId.
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.
- Go to our plugins directory on Github.
- Add acoustic-mobile-push-android-sdk-plugin-displayweb.aar to your project's
/libdirectory 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
DisplayWebActionvalue 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.
- 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
- 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.dartfile into your applications lib folder. - 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 14 days ago