Getting Started

Requirements


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


Note: Starting from React Native 0.60, CocoaPods is now the default integration approach for React Native iOS projects.
  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
Note: If you prefer linking manually, check React Native - Linking Libraries to link your libraries that contain native code.

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:

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';
Note: You must always import suitable objects from the react-native-synerise-sdk module into the files that contain code relating to the Synerise SDK.

Basic Initialization

Initialize the Synerise SDK and provide the Client API Key.

You may initialize it wherever you want and when 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.

WARNING: Do not use Debug Mode in a release version of your application.

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.
Note: For more information about handling actions from the Synerise SDK, see the Campaigns section.

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.
Note:
😕

We are sorry to hear that

Thank you for helping improve out documentation. If you need help or have any questions, please consider contacting support.

😉

Awesome!

Thank you for helping improve out documentation. If you need help or have any questions, please consider contacting support.