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.

  1. Import the SmartechBasePlugin
import com.smartechbasereactnative.SmartechBasePlugin;
import com.smartechbasereactnative.SmartechBasePlugin
  1. 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:

  1. Set Device Push Token
const getFCMToken = async () => {
   try {
     const token = await messaging().getToken();
     SmartechPushReact.setDevicePushToken(token);
   } catch (e) {
     console.log(error);
   }
 };

  1. 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

  1. 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);
  1. 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) => {
 };