Customer Engagement
Installing Smartech Push React Native
Install Netcore CE React Native plugin using the npm package manager. And then link your native dependencies :
npm install smartech-push-react-native
For Android SDK
If you are building your Android app, follow the Android Customer Engagement steps for integration steps for push notifications & in-app messages.
Caution
Also you need to add the below code inside the onCreate method of your MainActivity class only if you are using older version before 3.5.0.
SmartechPushReactNativeModule.init(getIntent());
SmartechPushReactNativeModule.init(intent);
Step 1 : Define Latest SDK version
Add the version line to your gradle.properties
.
// Version of smartech push SDK to use with React Native
SMARTECH_PUSH_SDK_VERSION=<<push_sdk_android_version>>
Step 2: Integrate the latest Netcore CE SDK
Make the following changes in the app-level build.gradle
api "com.netcore.android:smartech-push:${SMARTECH_PUSH_SDK_VERSION}"
Step 3: Initialization of SmartechBasePlugin
For React Plugin version 3.5.2 and above, add the following code in the onCreate function of your Application class to initialize SmartechBasePlugin.
- Import the SmartechBasePlugin
import com.smartechbasereactnative.SmartechBasePlugin;
import com.smartechbasereactnative.SmartechBasePlugin
- Initialize the SmartechBasePlugin in the
onCreate
method
@Override
public void onCreate() {
super.onCreate();
SmartechBasePlugin smartechBasePlugin = SmartechBasePlugin.getInstance();
smartechBasePlugin.init(this);
}
override fun onCreate() {
super.onCreate()
val smartechBasePlugin = SmartechBasePlugin.getInstance()
smartechBasePlugin.init(this)
}
Step 4: Integrate Firebase Cloud Messaging in your app if customer wants to use native FCM
Follow Google documentation to set up native FCM integration in your app, if it is not already done.
Provide token via setDevicePushToken()
and notification payload via handlePushNotification()
methods to CE SDK. handlePushNotification()
method will only display a notification if the Notification payload originated from Netcore and will safely ignore it if not. The code of the class should look similar to the following:
public class <YourFirebaseMessagingServiceClass> extends FirebaseMessagingService {
@Override
public void onNewToken(@NonNull String token) {
super.onNewToken(token);
SmartPush.getInstance(new WeakReference<Context>(this)).setDevicePushToken(token);
//<Your code>
}
@Override
public void onMessageReceived(@NonNull RemoteMessage remoteMessage) {
super.onMessageReceived(remoteMessage);
boolean isPnHanledBySmartech = SmartPush.getInstance(new WeakReference<Context>(context)).handleRemotePushNotification(remoteMessage);
if(!isPnHanledBySmartech){
// Notification from other sources, handle yourself
}
}
}
class AppsFirebaseMessagingService : FirebaseMessagingService() {
override fun onNewToken(token: String) {
super.onNewToken(token)
SmartPush.getInstance(WeakReference(this)).setDevicePushToken(token)
}
override fun onMessageReceived(remoteMessage: RemoteMessage) {
super.onMessageReceived(remoteMessage)
val isPnHanledBySmartech:Boolean = SmartPush.getInstance(WeakReference(context)).handleRemotePushNotification( remoteMessage))
if (!isPnHanledBySmartech){
// Notification from other sources, handle yourself
}
}
}
Step 5: Integrate @react-native-firebase/messaging in your app if customer wants to use @react-native-firebase plugin
To enable @react-native-firebase plugin for your app, follow the setup guide for Firebase Messaging Setup if it is not already integrated.
Provide the token via setDevicePushToken()
and the notification payload via handlePushNotification()
to Smartech Push Plugin. The handlePushNotification()
method will display notifications only if they originate from Netcore, ignoring others. The class code should resemble the following:
- Set Device Push Token
const getFCMToken = async () => {
try {
const token = await messaging().getToken();
SmartechPushReact.setDevicePushToken(token);
} catch (e) {
console.log(error);
}
};
- Send push notification data from FCM to Smartech plugin
// For foreground state
messaging().onMessage(async remoteMessage => {
SmartechPushReact.handlePushNotification(remoteMessage.data,(result) => {
console.log('isNotificationHandled by smartech :: ', result);
// if result is false then notification is from other sources
})
});
// For background/terminated state
messaging().setBackgroundMessageHandler(async remoteMessage => {
SmartechPushReact.handlePushNotification(remoteMessage.data, (result) => {
console.log('isNotificationHandled by smartech :: ', result);
// if result is false then notification is from other sources
})
});
messaging() is instance of @react-native-firebase/messaging
Control Auto-Ask Notification Permission on Android 13
On Android 13 (API level 33) and above, the POST_NOTIFICATIONS
permission is required to publish notifications. The Smartech SDK requests notification permissions automatically upon initializing SmartPush SDK. However, best practices suggest asking for this permission after the user has engaged with the app for a while. Therefore, you can control whether the SDK asks for notification permissions automatically.
To disable the automatic notification permission request by the SmartPush SDK, add the following code to your AndroidManifest.xml:
<meta-data
android:name="SMT_IS_AUTO_ASK_NOTIFICATION_PERMISSION"
android:value="0" />
0
- Smart Push SDK will not ask for notification permission automatically. You must implement the notification permission request as described in step 9.1
- The Smart Push SDK will automatically ask for notification permissions. You do not need to handle this on the app side.
Notifications Permissions for Android 13 (API Level 33)
Android 13 and higher supports runtime permissions for sending notifications from an app using POST_NOTIFICATIONS. This change helps users focus on the notifications that are most important to them. Refer to the official documentation for more details.
Smartech Push SDK version 3.2.16 and above supports the following APIs. When the application is running on Android 13, you need to request the user's notification permission to show notifications.
Steps for Applications Integrating Smartech Push SDK
- Notify SDK of Permission Request's Response: Once the application requests notification permission from the user, notify the SDK of the user’s response using the following API:
const SmartechPushReact = require('smartech-push-react-native');
const SMTPNPermissionConstants = { SMT_PN_PERMISSION_GRANTED: 1, SMT_PN_PERMISSION_DENIED: 0};
SmartechPushReact.updateNotificationPermission(SMTPNPermissionConstants.SMT_PN_PERMISSION_GRANTED);
- Request Permission Prompt from Smartech SDK: Use the API below to show the user the permission request dialog. When using this API, the SDK automatically tracks the response, so you don't need to update the permission result manually. Add the following code in any screen where you want to show this permission prompt:
const SmartechPushReact = require('smartech-push-react-native');
SmartechPushReact.requestNotificationPermission(function (_response) {
console.log('requestNotificationPermission status ', _response);
});
Note
The above functions are available in Smartech Push SDK version 3.5.0 and above.
For iOS SDK
If you are building your iOS app, follow the iOS Customer Engagement steps for integration steps for push notifications & in-app messages.
1. Import smartech sdk
#import <Smartech/Smartech.h>
#import <SmartPush/SmartPush.h>
#import <UserNotifications/UserNotifications.h>
#import <UserNotificationsUI/UserNotificationsUI.h>
#import "SmartechBaseReactNative.h"
#import "SmartechRCTEventEmitter.h"
To implement the deeplink in the iOS React Native app, please implement the following steps:
2. Add Smartech Deeplink Delegate methods
#pragma mark Smartech Deeplink Delegate
- (void)handleDeeplinkActionWithURLString:(NSString *)deeplinkURLString andNotificationPayload:(NSDictionary *)notificationPayload {
NSMutableDictionary *smtData = [[NSMutableDictionary alloc] initWithDictionary:notificationPayload];
smtData[kDeeplinkIdentifier] = smtData[kSMTDeeplinkIdentifier];
smtData[kCustomPayloadIdentifier] = smtData[kSMTCustomPayloadIdentifier];
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, 1.5 * NSEC_PER_SEC), dispatch_get_main_queue(), ^{
NSLog(@"SMTLOGGER DEEPLINK: %@",deeplinkURLString);
[[NSNotificationCenter defaultCenter] postNotificationName:kSMTDeeplinkNotificationIdentifier object:nil userInfo:smtData];
});
}
func handleDeeplinkAction(with deeplinkURLString: String, andNotificationPayload notificationPayload: [AnyHashable: Any]) {
var smtData = notificationPayload
smtData[kDeeplinkIdentifier] = smtData[kSMTDeeplinkIdentifier]
smtData[kCustomPayloadIdentifier] = smtData[kSMTCustomPayloadIdentifier]
DispatchQueue.main.asyncAfter(deadline: .now() + 1.5) {
print("SMTLOGGER DEEPLINK: \(deeplinkURLString)")
NotificationCenter.default.post(name: NSNotification.Name(kSMTDeeplinkNotificationIdentifier), object: nil, userInfo: smtData)
}
}
Retrieving Deeplink Data
The below method will provide the deep link value and the custom payload when a push notification is clicked.
Use the below code when your smartech-base-react-native version is 3.5.0 or above, & smartech-push-react-native version is 3.5.0 or above.
import SmartechReact from 'smartech-base-react-native';
import SmartechPushReact from 'smartech-push-react-native';
// Deeplink callback for Push Notification, InappMessage and AppInbox
SmartechReact.addListener(SmartechReact.SmartechDeeplink, handleDeeplinkWithPayload);
const handleDeeplinkWithPayload = (smartechData) => {
console.log('Smartech Data :: ', smartechData);
console.log('Smartech Deeplink :: ', smartechData.smtDeeplink);
console.log('Smartech CustomPayload:: ', smartechData.smtCustomPayload);
};
//Remove this listener on cleanup
SmartechReact.removeListener(SmartechReact.SmartechDeeplink);
Use the below code when your smartech-base-react-native version 3.2.6 and above, smartech-push-react-native version 3.2.7 and above
import SmartechReact from 'smartech-base-react-native';
import SmartechPushReact from 'smartech-push-react-native';
// Deeplink callback for Push Notification, InappMessage and AppInbox
SmartechReact.addListener(SmartechReact.SmartechDeeplink, handleDeeplinkWithPayload);
// Android callback to handle deeplink in terminated/background state.
SmartechPushReact.getDeepLinkUrl(function (smartechData) {
console.log('Smartech Data ::', smartechData);
// Handling the SDK Deeplink Callback.
console.log('Smartech Deeplink :: ', smartechData.smtDeeplink);
console.log('Smartech CustomPayload:: ', smartechData.smtCustomPayload);
});
const handleDeeplinkWithPayload = (smartechData) => {
console.log('Smartech Data :: ', smartechData);
console.log('Smartech Deeplink :: ', smartechData.smtDeeplink);
console.log('Smartech CustomPayload:: ', smartechData.smtCustomPayload);
};
//Remove this listener on cleanup
SmartechReact.removeListener(SmartechReact.SmartechDeeplink);
Use the below code when your smartech-push-react-native version 3.2.6 and below
let eventEmitterSubscription;
SmartechPushReact.addDeepLinkListener(SmartechPushReact.SmartechDeeplinkNotification, handleDeeplinkWithPayload, (eventSubscriptionObject) => {
eventEmitterSubscription = eventSubscriptionObject;
});
// Android callback to handle deeplink in terminated/background state.
SmartechPushReact.getDeepLinkUrl(function (_response) {
console.log('getDeepLinkUrl Initial Deeplink Response ', _response);
});
eventEmitterSubscription.remove() // For remove listner
const handleDeeplinkWithPayload = (deeplinkdata) => {
};
Add listener for notification received
The below method will provide the push notification payload which is received from Netcore
Use the below code when your smartech-push-react-native version 3.2.7 and above
import SmartechPushReact from 'smartech-push-react-native';
// Adding the Smartech Deeplink Notification received Listener
SmartechPushReact.addListener(SmartechPushReact.SmartechNotificationReceived, handleOnNotificationReceived);
const handleOnNotificationReceived = (notificationData) => {
};
//Remove this listener on cleanup
SmartechPushReact.removeListener(SmartechPushReact.SmartechNotificationReceived);
Use the below code when your smartech-push-react-native version 3.2.6 and below
let notificationReceivedEventEmitterSubscription
// Adding the Smartech Deeplink Notification received Listener
SmartechPushReact.addCommonListener(SmartechPushReact.SmartechNotificationReceived, handleOnNotificationReceived, (eventSubscriptionObject) => {
notificationReceivedEventEmitterSubscription = eventSubscriptionObject;
});
//Remove this listener on cleanup
notificationReceivedEventEmitterSubscription.remove() // For remove listner
const handleOnNotificationReceived = (notificationData) => {
};
Add listener for Custom HTML In-app deep link and custom payload (Only For Android)
The below method will provide the deep link and custom payload on custom HTML in-app message is clicked
Use this code when your smartech-base-react-native version is 3.2.3
let inAppClickedEventEmitterSubscription
// Adding the Smartech Deeplink Notification received Listener
Smartech.addCommonListener(Smartech.SmartechInAppOnClick,handleOnInAppCustomHtmlClick, (eventSubscriptionObject) => {
inAppClickedEventEmitterSubscription = eventSubscriptionObject;
});
//Remove this listener on cleanup
inAppClickedEventEmitterSubscription.remove() // For remove listner
const handleOnInAppCustomHtmlClick = (inappPayload) => {
};
## Installing Smartech Push React Native
Install Netcore CE React Native plugin using the npm package manager. And then link your native dependencies :
```text shell
npm install smartech-push-react-native
```
## For Android SDK
If you are building your Android app, follow the [Android Customer Engagement](https://developer.netcorecloud.com/docs/android-new-customer-engagement) steps for integration steps for push notifications & in-app messages.
> 🚧 Caution
>
> Also you need to add the below code inside the onCreate method of your MainActivity class only if you are using older version before 3.5.0.
```java Java
SmartechPushReactNativeModule.init(getIntent());
```
```kotlin Kotlin
SmartechPushReactNativeModule.init(intent);
```
**Step 1 : Define Latest SDK version**
Add the version line to your `gradle.properties`.
```java Java
// Version of smartech push SDK to use with React Native
SMARTECH_PUSH_SDK_VERSION=<<push_sdk_android_version>>
```
**Step 2: Integrate the latest Netcore CE SDK**
Make the following changes in the app-level build.gradle
```java Java
api "com.netcore.android:smartech-push:${SMARTECH_PUSH_SDK_VERSION}"
```
## For iOS SDK
If you are building your iOS app, follow the [iOS Customer Engagement](https://developer.netcorecloud.com/docs/ios-new-customer-engagement) steps for integration steps for push notifications & in-app messages.
### 1\. Import smartech sdk
```objectivec
#import <Smartech/Smartech.h>
#import <SmartPush/SmartPush.h>
#import <UserNotifications/UserNotifications.h>
#import <UserNotificationsUI/UserNotificationsUI.h>
#import "SmartechBaseReactNative.h"
#import "SmartechRCTEventEmitter.h"
```
To implement the deeplink in the iOS React Native app, please implement the following steps:
### 2\. Add Smartech Deeplink Delegate methods
```objectivec
#pragma mark Smartech Deeplink Delegate
- (void)handleDeeplinkActionWithURLString:(NSString *)deeplinkURLString andNotificationPayload:(NSDictionary *)notificationPayload {
NSMutableDictionary *smtData = [[NSMutableDictionary alloc] initWithDictionary:notificationPayload];
smtData[kDeeplinkIdentifier] = smtData[kSMTDeeplinkIdentifier];
smtData[kCustomPayloadIdentifier] = smtData[kSMTCustomPayloadIdentifier];
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, 1.5 * NSEC_PER_SEC), dispatch_get_main_queue(), ^{
NSLog(@"SMTLOGGER DEEPLINK: %@",deeplinkURLString);
[[NSNotificationCenter defaultCenter] postNotificationName:kSMTDeeplinkNotificationIdentifier object:nil userInfo:smtData];
});
}
```
```swift
func handleDeeplinkAction(with deeplinkURLString: String, andNotificationPayload notificationPayload: [AnyHashable: Any]) {
var smtData = notificationPayload
smtData[kDeeplinkIdentifier] = smtData[kSMTDeeplinkIdentifier]
smtData[kCustomPayloadIdentifier] = smtData[kSMTCustomPayloadIdentifier]
DispatchQueue.main.asyncAfter(deadline: .now() + 1.5) {
print("SMTLOGGER DEEPLINK: \(deeplinkURLString)")
NotificationCenter.default.post(name: NSNotification.Name(kSMTDeeplinkNotificationIdentifier), object: nil, userInfo: smtData)
}
}
```
## Retrieving Deeplink Data
The below method will provide the deep link value and the custom payload when a push notification is clicked.
Use the below code when your smartech-base-react-native version is _3.5.0_ or above, & smartech-push-react-native version is _3.5.0_ or above.
```javascript JavaScript
import SmartechReact from 'smartech-base-react-native';
import SmartechPushReact from 'smartech-push-react-native';
// Deeplink callback for Push Notification, InappMessage and AppInbox
SmartechReact.addListener(SmartechReact.SmartechDeeplink, handleDeeplinkWithPayload);
const handleDeeplinkWithPayload = (smartechData) => {
console.log('Smartech Data :: ', smartechData);
console.log('Smartech Deeplink :: ', smartechData.smtDeeplink);
console.log('Smartech CustomPayload:: ', smartechData.smtCustomPayload);
};
//Remove this listener on cleanup
SmartechReact.removeListener(SmartechReact.SmartechDeeplink);
```
Use the below code when your smartech-base-react-native version _3.2.6_ and above, smartech-push-react-native version _3.2.7_ and above
```javascript JavaScript
import SmartechReact from 'smartech-base-react-native';
import SmartechPushReact from 'smartech-push-react-native';
// Deeplink callback for Push Notification, InappMessage and AppInbox
SmartechReact.addListener(SmartechReact.SmartechDeeplink, handleDeeplinkWithPayload);
// Android callback to handle deeplink in terminated/background state.
SmartechPushReact.getDeepLinkUrl(function (smartechData) {
console.log('Smartech Data ::', smartechData);
// Handling the SDK Deeplink Callback.
console.log('Smartech Deeplink :: ', smartechData.smtDeeplink);
console.log('Smartech CustomPayload:: ', smartechData.smtCustomPayload);
});
const handleDeeplinkWithPayload = (smartechData) => {
console.log('Smartech Data :: ', smartechData);
console.log('Smartech Deeplink :: ', smartechData.smtDeeplink);
console.log('Smartech CustomPayload:: ', smartechData.smtCustomPayload);
};
//Remove this listener on cleanup
SmartechReact.removeListener(SmartechReact.SmartechDeeplink);
```
Use the below code when your smartech-push-react-native version _3.2.6_ and below
```javascript JavaScript
let eventEmitterSubscription;
SmartechPushReact.addDeepLinkListener(SmartechPushReact.SmartechDeeplinkNotification, handleDeeplinkWithPayload, (eventSubscriptionObject) => {
eventEmitterSubscription = eventSubscriptionObject;
});
// Android callback to handle deeplink in terminated/background state.
SmartechPushReact.getDeepLinkUrl(function (_response) {
console.log('getDeepLinkUrl Initial Deeplink Response ', _response);
});
eventEmitterSubscription.remove() // For remove listner
const handleDeeplinkWithPayload = (deeplinkdata) => {
};
```
## Add listener for notification received
The below method will provide the push notification payload which is received from Netcore
Use the below code when your smartech-push-react-native version _3.2.7_ and above
```javascript
import SmartechPushReact from 'smartech-push-react-native';
// Adding the Smartech Deeplink Notification received Listener
SmartechPushReact.addListener(SmartechPushReact.SmartechNotificationReceived, handleOnNotificationReceived);
const handleOnNotificationReceived = (notificationData) => {
};
//Remove this listener on cleanup
SmartechPushReact.removeListener(SmartechPushReact.SmartechNotificationReceived);
```
Use the below code when your smartech-push-react-native version _3.2.6_ and below
```javascript Javascript
let notificationReceivedEventEmitterSubscription
// Adding the Smartech Deeplink Notification received Listener
SmartechPushReact.addCommonListener(SmartechPushReact.SmartechNotificationReceived, handleOnNotificationReceived, (eventSubscriptionObject) => {
notificationReceivedEventEmitterSubscription = eventSubscriptionObject;
});
//Remove this listener on cleanup
notificationReceivedEventEmitterSubscription.remove() // For remove listner
const handleOnNotificationReceived = (notificationData) => {
};
```
## Add listener for Custom HTML In-app deep link and custom payload (Only For Android)
The below method will provide the deep link and custom payload on custom HTML in-app message is clicked
Use this code when your smartech-base-react-native version is _3.2.3_
```javascript Javascript
let inAppClickedEventEmitterSubscription
// Adding the Smartech Deeplink Notification received Listener
Smartech.addCommonListener(Smartech.SmartechInAppOnClick,handleOnInAppCustomHtmlClick, (eventSubscriptionObject) => {
inAppClickedEventEmitterSubscription = eventSubscriptionObject;
});
//Remove this listener on cleanup
inAppClickedEventEmitterSubscription.remove() // For remove listner
const handleOnInAppCustomHtmlClick = (inappPayload) => {
};
```
Use this code when your smartech-base-react-native version is 3.2.3
let inAppClickedEventEmitterSubscription
// Adding the Smartech Deeplink Notification received Listener
Smartech.addCommonListener(Smartech.SmartechInAppOnClick,handleOnInAppCustomHtmlClick, (eventSubscriptionObject) => {
inAppClickedEventEmitterSubscription = eventSubscriptionObject;
});
//Remove this listener on cleanup
inAppClickedEventEmitterSubscription.remove() // For remove listner
const handleOnInAppCustomHtmlClick = (inappPayload) => {
};
Updated 23 days ago