Getting Started

Requirements

• Access to a workspace
• Created Client API Key
  When creating the API key, you can use allowlisting or denylisting to only allow the events you intend to use.

iOS

• Recommended Environment:
  • Xcode 12
  • iOS SDK 14
• Target Deployment: iOS 9.0+

Android

Minimum Android SDK version - 21.

Installation

Installing the React Native module

1. Install the module with npm:

   npm install react-native-synerise-sdk --save
   

2. If you are using React Native >= 0.60, install the native dependencies by using CocoaPods from your ios directory:

   pod install
   

3. In your android build.gradle top-level build file, add:

   maven {
      url "https://pkgs.dev.azure.com/Synerise/AndroidSDK/_packaging/prod/maven/v1"
   }
   

4. If you are using React Native < 0.60, perform the following actions:
   1. Link the native dependency:

      react-native link react-native-synerise-sdk
      

   2. Install from your ios directory:

      pod install --repo-update
      

Setting up iOS

1. In your ios/Podfile, add the following dependency: pod 'react-native-synerise-sdk', :path => '../node_modules/react-native-synerise-sdk'
2. Your Podfile should now look like below:

   target 'YourTarget' do
   
   # Pods for your target
   pod 'React', :path => '../node_modules/react-native/'
   pod 'React-Core', :path => '../node_modules/react-native/React'
   # ... other React dependencies
   
   # Add react-native-synerise-sdk
   pod 'react-native-synerise-sdk', :path => '../node_modules/react-native-synerise-sdk'
   
   use_native_modules!
   
   end
   

3. From your ios directory, run pod install

Setting up Android

1. In your app’s build.gradle file, add the following dependency: implementation 'com.synerise.sdk.react:react-native-synerise-sdk:0.9.0'
2. In the app’s main class, add RNSyneriseSdkPackage to your list of packages:

@Override
protected List<ReactPackage> getPackages() {
	@SuppressWarnings("UnnecessaryLocalVariable")
	List<ReactPackage> packages = new PackageList(this).getPackages();
	packages.add(new RNSyneriseSdkPackage(getApplication()));

	return packages;
}

Initialization

When you use the react-native-synerise-sdk module, you use native Synerise SDK frameworks underneath. Check the documentation for them too, to set up the project properly:

• Android documentation
• iOS documentation

Importing Synerise SDK

You will need to import the Synerise object from the react-native-synerise-sdk module.

import { Synerise } from 'react-native-synerise-sdk';

Basic Initialization

Initialize the Synerise SDK and provide the Client API Key.

You may initialize it wherever you need.

Synerise.Initializer()
  .withClientApiKey('YOUR_CLIENT_API_KEY') // 1
  .withDebugModeEnabled(true) // 2
  .withCrashHandlingEnabled(true) // 3
  .init();

1. .withClientApiKey('YOUR_CLIENT_API_KEY') - sets Client API Key for Synerise SDK initialization.
2. .withDebugModeEnabled(true) - enables debug mode. See Debug Mode section for more information.
3. .withCrashHandlingEnabled(true) - enables crash handling. Synerise SDK sends a crash event automatically when an uncaught exception occurs.

Initialization with custom API environment

You can change the base URL of the API for on-premise installations.

Use the following initialization method:

Synerise.Initializer()
  .withClientApiKey('YOUR_CLIENT_API_KEY')
  .withBaseUrl("YOUR_API_BASE_URL")
  .init();

Advanced Initialization

This is an example of advanced initialization with:

• custom API base URL for on-premise installations
• debug mode enabled
• crash handling enabled
• most settings options available
• initialization callbacks set

Synerise.Initializer()
  .withBaseUrl("YOUR_API_BASE_URL")
  .withClientApiKey('YOUR_CLIENT_API_KEY')
  .withDebugModeEnabled(true)
  .withCrashHandlingEnabled(true)
  .withSettings({
    sdk: {
      enabled: true,
      minTokenRefreshInterval: 5000,
      shouldDestroySessionOnApiKeyChange: true
    },
    notifications: {
      enabled: true,
      encryption: false,
    },
    injector: {
      automatic: true,
    },
    tracker: {
      isBackendTimeSyncRequired: true,
      minBatchSize: 20,
      maxBatchSize: 30,
      autoFlushTimeout: 60
    }
  })
  .init();

Synerise.onReady(function() {
  // This function is called when Synerise is fully initialized and ready
});

Synerise.onError(function(error) {
  // This function is called when an error occurs while Synerise initialization
});

Debug Mode

You can enable debug logs for Synerise SDK by using the .withDebugModeEnabled(true) method in Synerise.Initializer when you initialize the SDK.

You can receive some logs about:

• Core: push notifications
• Tracker: autotracking events, declarative events, sending process
• Client: customer state, authorization
• Injector: campaigns, UI
• Promotions: promotions, vouchers
• Content: content widget, documents, recommendations

Main Synerise callbacks and listeners

You can handle Synerise SDK initialization result by two callbacks:

• Synerise.onReady() - This method is called when Synerise is initialized.
• Synerise.onError(error: Error) - This method is called when an error occurs during Synerise initialization.

You can specify your custom action when a customer clicks on simple push, banner or walkthrough. Synerise SDK implements two main actions that a customer may invoke - open URL and Deeplink:

• IInjectorListener.onOpenUrl(url: string) - This method is called when Synerise handles URL action from campaign activities.
• IInjectorListener.onDeepLink(deepLink: string) - This method is called when Synerise handles deeplink action from campaign activities.

When you want to deal with Push Notifications:

• INotificationsListener.onRegistrationToken?(token: string) - This method is called when a native part of the application passes a registration token.
• INotificationsListener.onRegistrationRequired?() - This method is called when Synerise needs registration for Push Notifications.
• INotificationsListener.onNotification(payload: object) - This method is called when a native part of the application passes a notification payload.