Knowledge BaseDeveloper HubLog In

Callbacks

Suggest Edits

Callbacks are useful for understanding the lifecycle stages of WebEngage messages. All WebEngage callbacks are called on the main thread.

Push Notification Callbacks

🚧

Please Note

Before proceeding, please ensure that the react-native-webengage version is 1.2.2 or above.

To update the package to the latest version run the following command:

npm i react-native-webengage

Here's how you can register Push Notifications callbacks in your iOS app:

Step 1: Add the below code snippet in ios/YourApp/AppDelegate.h.

#import <WEGWebEngageBridge.h>
...
@interface AppDelegate : UIResponder <UIApplicationDelegate>
...
@property (nonatomic, strong) WEGWebEngageBridge *bridge;
@end

Step 2: Modify WebEngage SDK initialization by changing ios/YourApp/AppDelegate.m, as per the following code snippet.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.bridge = [WEGWebEngageBridge new];
    RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self.bridge launchOptions:launchOptions];
    RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@"YourApp" initialProperties:nil];
    ...
    [WebEngage sharedInstance].pushNotificationDelegate = self.bridge;
    [[WebEngage sharedInstance] application:application
            didFinishLaunchingWithOptions:launchOptions notificationDelegate:self.bridge];
    return YES;
}

Deep Link Callback

Please add the following listener in your App.js file to activate deep link callbacks. 

componentDidMount() {
    webengage.push.onClick(function(notificationData) {
        console.log("App: push-notiifcation clicked with deeplink: " + notificationData["deeplink"]);
    });
}

In-app Message Callbacks

🚧

No additional steps are required for using In-app callbacks in your Android app.

Here's how you can register In-app callbacks in your iOS app:

Step 1: Add the below code snippet in ios/YourApp/AppDelegate.h.

#import <WEGWebEngageBridge.h>
...
@interface AppDelegate : UIResponder <UIApplicationDelegate>
...
@property (nonatomic, strong) WEGWebEngageBridge *bridge;
@end

Step 2: Modify WebEngage SDK initialization by changing ios/YourApp/AppDelegate.m, as per the following code snippet.

...
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.bridge = [WEGWebEngageBridge new];
    RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self.bridge launchOptions:launchOptions];
    RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@"YourApp" initialProperties:nil];
    ...

    [[WebEngage sharedInstance] application:application
            didFinishLaunchingWithOptions:launchOptions notificationDelegate:self.bridge];

    return YES;
}

webengage.notification.onPrepare

This callback is invoked before the In-app message is shown to your users. It allows you to customize the UI, colors, CTAs (buttons), and content of the In-app message received from WebEngage, before displaying it to your users.

The callback handler receives one parameter:

  • notificationData: The data Object for the received in-app notification
componentDidMount() {
    ...
  webengage.notification.onPrepare(function(notificationData) {
    ...
    });
}

webengage.notification.onShown

webengage.notification.onShown allows you to register a callback function that is executed after an in-app notification is shown to the user.

The callback handler receives one parameter:

  • notificationData: The data Object for the shown in-app notification
componentDidMount() {
  webengage.notification.onShown(function(notificationData) {
    ...
  });
}

webengage.notification.onDismiss

webengage.notification.onDismiss allows you to register a callback function that is executed after an in-app notification is closed by the user.

The callback handler receives one parameter:

  • notificationData: The data Object for the shown in-app notification
componentDidMount() {
  webengage.notification.onDismiss(function(notificationData) {
    ...
  });
}

webengage.notification.onClick

webengage.notification.onClick allows you to register a callback function that is executed after an in-app notification is clicked by the user.

The callback handler receives two parameters:

  • notificationData: The data Object for the shown in-app notification
  • clickId: The String identifier for the action button
componentDidMount() {
  webengage.notification.onClick(function(notificationData, clickId) {
        console.log("App: in-app notification clicked: click-id: " + clickId + ", deep-link: " + notificationData["deepLink"]);
        ...
  });
}

Data received from in-app callbacks adheres to the below format.

{
  "description": null,
  "id": "173050749",
  "actions": [
    {
      "actionEId": "~3284c402",
      "actionText": "Hello",
      "actionLink": "http://www.google.com",
      "actionCategory": "CTA",
      "actionTarget": "_top",
      "isPrime": true,
      "type": "EXTERNAL_URL"
    }
  ],
  "layoutId": "~483819e",
  "showTitle": true,
  "canMinimize": true,
  "layoutAttributes": {
    "exitAnimation": "FADE_OUT",
    "fullscreen": true,
    "wvHeight": 100,
    "image_url": "https://s3-ap-southeast-1.amazonaws.com/wk-static-files/~2024c585/6035287f-62e3-4c6b-8d56-e893941da6bf.png",
    "posX": 0,
    "animDuration": 1000,
    "type": "BLOCKING",
    "posY": 0,
    "wvWidth": 100,
    "entryAnimation": "FADE_IN"
  },
  "title": null,
  "config": {
    "closeIconColor": "#FFFFFF",
    "hideLogo": false,
    "c2aTextColor": "#FFFFFF",
    "c2aTextFont": "Sans-Serif",
    "c2aBackgroundColor": "#4A90E2"
  },
  "canClose": true,
  "notificationEncId": "13cjj4m",
  "direction": "ltr",
  "isActive": true
}

Please feel free to drop in a few lines at [email protected] in case you have any further queries or feedback. We're always just an email away!

Updated about 2 months ago