Customer Engagement

Installing Smartech Push React Native

Install CEE 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 CEE 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)
}

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