Documentation
Help CenterCommunityDevelopersAcademyStatus

Carousel plugin

Suggest Edits

The Carousel plugin allows a push notification to add a carousel of photos and videos to the notification interface.

The push notification appears as a standard notification. The first image appears with its label when the user expands the notification. The label is the name of the image action. At the bottom of the notification, the Next and Previous buttons are located. When the user clicks the button, the image changes to the next/previous image and label. The image slides into view from the right, and the next image is downloaded in the background. Clicking on the image or the text removes the notification and performs the image action.

Install the Carousel action plugin

  1. Open the Xcode project and select File > New > Target.
  2. Select Notification Content Extension and click Next.
  3. Select Carousel as the product name,ObjC as the language, and click Finish.
  4. Replace the contents of NotificationViewController.h, NotificationViewController.m, inInterface.storyboard, and info.plist with the files in the Image Carousel Plugin folder.
  5. Select Carousel Target and setup code signing by selecting a Team in the General tab.
  6. Add CarouselAction.h and CarouselAction.m to Application Target.
  7. Register the carousel plugin in the application delegate AppDelegate.m file.
  8. Add carouselAction.h to the list of import statements as shown in the following example: 
    

     // Action Plugins
#import "ActionMenuPlugin.h"
#import "AddToCalendarPlugin.h"
#import "AddToPassbookPlugin.h"
#import "SnoozeActionPlugin.h"
#import "DisplayWebViewPlugin.h"
#import "TextInputActionPlugin.h"
#import "ExamplePlugin.h"
#import "CarouselAction.h" // add this line


// MCE Inbox Plugins
#import "MCEInboxActionPlugin.h"
#import "MCEInboxPostTemplate.h"
#import "MCEInboxDefaultTemplate.h"


// MCE InApp Plugins
#import "MCEInAppVideoTemplate.h"
#import "MCEInAppImageTemplate.h"
#import "MCEInAppBannerTemplate.h"

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 carousel plugin. The registerPlugins method should be called in the AppDelegate didFinishLaunchingWithOptions method.

🚧

Note:

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

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

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

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

Send an API push with carousel action support

To send a push notification with a carousel 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": {
            "mutable-content": 1,
            "category": "carousel",
            "alert": {
                "title": "Testing Title",
                "subtitle": "Testing Subtitle",
                "body": "Testing Body"
            },
            "sound": "default"
        },
        "notification-action": {
            "type": "carousel",
            "value": 0
        },
        "category-name": "carousel",
        "category-actions": [
            {
                "type": "next",
                "name": "Next"
            },
            {
                "type": "prev",
                "name": "Previous"
            },
            {
                "type": "carousel",
                "name": "Open",
                "destructive": false,
                "authentication": true,
                "foreground": true
            }
        ],
        "carousel": {
            "items": [
                {
                    "url": "https://upload.wikimedia.org/wikipedia
/commons/thumb/2/24/LEGO_logo.svg/100px-LEGO_logo.svg.png",
                    "text": "Speed"
                },
                {
                    "url": "https://upload.wikimedia.org/wikipedia
/commons/thumb/2/24/LEGO_logo.svg/100px-LEGO_logo.svg.png",
                    "text": "Agriculture"
                },
                {
                    "url": "https://upload.wikimedia.org/wikipedia
/commons/thumb/2/24/LEGO_logo.svg/100px-LEGO_logo.svg.png",
                    "text": "Containers"
                },
                {
                    "url": "https://upload.wikimedia.org/wikipedia
/commons/thumb/2/24/LEGO_logo.svg/100px-LEGO_logo.svg.png",
                    "text": "Connected"
                },
                {
                    "url": "https://upload.wikimedia.org/wikipedia
/commons/thumb/2/24/LEGO_logo.svg/100px-LEGO_logo.svg.png",
                    "text": "Cloud"
                }
            ]
        }      
      }  
    }
  },
  "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 Carousel plug-in using Maven Central. Open the app-level build.gradle file and add the Carousel plug-in to the Dependencies section.

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

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 Carousel plug-in.

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

To install the Carousel plugin, run the following command

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

📘

Note:

The plugin is available for both Android and iOS platforms.

To register the plugin:

  • Import the Acoustic mobile push image carousel event handler: 
import { NativeEventEmitter, NativeModules } from 'react-native';
const {
  // Other Event handler...
  RNAcousticMobilePushImageCarousel,
} = NativeModules;
export const RNAcousticMobilePushImageCarouselEmitter = new 
NativeEventEmitter(RNAcousticMobilePushImageCarousel);
  • Add plugin event listener RNAcousticMobilePushImageCarouselEmitter using the CarouselClickEvent value after the component is mounted.
componentDidMount() {
  this.setState({
      subscriptions: [
        // Other event listeners...
        RNAcousticMobilePushImageCarouselEmitter.addListener
("CarouselClickEvent", (e) => {
          // Handle dialog box action or replace it with your custom 
action:
            Alert.alert(
              e.dialogTitle,
              e.dialogMsg,
              [
                { text: "Okay", onPress: () => {} }
              ]
            );
          ///////////
        })
      ]
    });
}
  • Remove subscriptions when the component is no longer mounted.
componentWillUnmount() {
    const { subscriptions } = this.state;
    subscriptions.forEach((subscription) => subscription.remove());
  }

Send an API push with carousel action support.

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

{
  "campaignName": "Android Simple Push",
  "pushes": [
    {
      "userId": "{{userId}}",
      "simpleMessages": [
        {
          "appKey": "{{appKey}}",
          "channelId": "{{channelId}}",
          "content": {
            "alert": {
              "subject": "Carousel Action",
              "message": "message here",
              "soundResourceId": 2131623,
              "vibrationEnabled": true,
              "vibrationPattern": 0,
              "lightsEnabled": true,
              "type": "carousel",
              "lights": [0, 1], 
              "number": 2,
              "payload": {
                "category-name": "carousel",
                "carousel": [
                    {
                      "image": "https://upload.wikimedia.org/wikipedia
/commons/thumb/2/24/LEGO_logo.svg/100px-LEGO_logo.svg.png",
                      "text": "Speed",
                      "action": 
                        {
                          "type": "carouselIteration",
                          "name": "Lego"
                        }
                    },
                    {
                      "image": "https://agriculture.ny.gov/sites/g/files
/oee1031/files/styles/quick_links_square/public/media/2019/07
/Agricultural%20districts%20hero.jpg?h=d668167d&itok=1fa52g6P",
                      "text": "Agriculture",
                      "action": 
                        {
                          "type": "carouselIteration",
                          "name": "Agriculture"
                        }
                    },
                    {
                      "image": "https://cdn.shopify.com/s/files/1/0196
/1722/products/LargeShippingContainers-11_100x.jpg?v=1447169372",
                      "text": "Containers",
                      "action": {
                        "type": "carouselIteration",
                        "name": "Containers"
                      }
                    },
                    {
                      "image": "https://www.connectedvehicles.com/wp-
content/uploads/2019/08/Connect-Fleet-with-OnCommand-100x100.png",
                      "text": "Connected",
                      "action": {
                        "type": "carouselIteration",
                        "name": "Connected"
                      }
                    },
                    {
                      "image": "https://res.infoq.com/articles/cloud-to-
cloudlets-data-processing/en/smallimage/cloud-to-cloudlets-data-
processing-s-1601399656392.jpeg",
                      "text": "Cloud",
                      "action": {
                        "type": "carouselIteration",
                        "name": "Cloud"
                      }
                    }
                  ]
              },
              "mutable-content": 1,
              "category": "carousel",
              "title": "Testing Title",
              "subtitle": "Testing Subtitle",
              "body": "Testing Body",
              "sound": "default",
              "notification-action": {
                "type": "carousel",
                "value": 0
              }
            }
          }
        }
      ]
    }
  ]
}

{
    "campaignName": "iOS Simple Push",
    "pushes": [
        {
            "userId": "{{userId}}",
            "simpleMessages": [
                {
                    "appKey": "{{appKey}}",
                    "channelId": "{{channelId}}",
                    "content": {
                        "aps": {
                            "mutable-content": 1,
                            "category": "carousel",
                            "alert": {
                                "title": "Testing Title",
                                "subtitle": "Testing Subtitle",
                                "body": "Testing Body"
                            },
                            "sound": "default"
                        },
                        "notification-action": {
                            "type": "carousel",
                            "value": 0
                        },
                        "category-name": "carousel",
                        "category-actions": [
                            {
                                "type": "next",
                                "name": "Next"
                            },
                            {
                                "type": "prev",
                                "name": "Previous"
                            },
                            {
                                "type": "carousel",
                                "name": "Open",
                                "destructive": false,
                                "authentication": true,
                                "foreground": true
                            }
                        ],
                        "carousel": {
                            "items": [
                                {
                                    "url": "https://upload.wikimedia.org
/wikipedia/commons/thumb/2/24/LEGO_logo.svg/100px-LEGO_logo.svg.png",
                                    "text": "Speed"
                                },
                                {
                                    "url": "https://upload.wikimedia.org
/wikipedia/commons/thumb/2/24/LEGO_logo.svg/100px-LEGO_logo.svg.png",
                                    "text": "Agriculture"
                                },
                                {
                                    "url": "https://upload.wikimedia.org
/wikipedia/commons/thumb/2/24/LEGO_logo.svg/100px-LEGO_logo.svg.png",
                                    "text": "Containers"
                                },
                                {
                                    "url": "https://upload.wikimedia.org
/wikipedia/commons/thumb/2/24/LEGO_logo.svg/100px-LEGO_logo.svg.png",
                                    "text": "Connected"  
                                                                  },
                                {
                                    "url": "https://upload.wikimedia.org
/wikipedia/commons/thumb/2/24/LEGO_logo.svg/100px-LEGO_logo.svg.png",
                                    "text": "Cloud"
                                }
                            ]
                        }
                    }
                }
            ]
        }
    ]
}

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

Updated 8 months ago