Callbacks
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 dataObject
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 dataObject
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 dataObject
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 dataObject
for the shown in-app notificationclickId
: TheString
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