Overview

React Native is a framework that allows you to build native mobile apps using JavaScript. Normally, you need to program your mobile app using Java/Kotlin for Android and Swift/Obj-C for iOS. React Native helps you remove that requirement, leading to fully functional apps on both platforms in much less time and using just one coding language.

Zoho SalesIQ Mobile SDK will let you embed the tracking and live chat widget code in your existing react-native project. Using this, you can track and converse with the visitors hitting your website right away from your mobile application.

Note:
Zoho SalesIQ is GDPR Compliant! The configurations for the website and Mobile SDK remain the same; if you have already configured on your site, it will be automatically reflected in Mobile SDK. If not, then learn how to configure now.

Installation of React Native Zoho SalesIQ SDK

On this page, you will learn how to install SalesIQ's SDK into your React-Native project.

Requirements

Android: The SDK supports Android 5.0 (API level 21) and above.

iOS: The iOS SDK is compatible with iOS version 11 and above; Xcode 13.0 and above is required as the development environment.

How to embed SalesIQ's SDK into your React-Native project?

Step 1:  To add ZohoSalesIQ SDK to your project, install the packages using the commands given.

Open your react-native project in the terminal. All you have to do is to run the commands below to install the packages.

Copied 
npm install react-native-zohosalesiq-mobilisten --save
                                                                                                                                                                

For React-Native versions older than 0.69:

Copied 
react-native link react-native-zohosalesiq-mobilisten
                                                                                                                                                                

This package is to install our SDK (command 1) and then link them to your React - Native project (command 2).

Step 2 Navigate to the ios folder under the project directory and open the Podfile.

Add the "/ios" to the path for the RNZohoSalesIQ pod, as shown below.

Copied 
pod 'RNZohoSalesIQ', :path => '../node_modules/react-native-zohosalesiq-mobilisten/ios'

Run the following command after saving the changes made to the Podfile.

Copied 
pod install

After a successful pod installation, open the iOS project in Xcode and navigate to the Build Settings > Build Options and set ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES to Yes.

Update your Info.plist

If you haven't, then you should update the Info.plist with the keys and descriptions for your application given below.

In case of any assets pointed to by an HTTP link, you should use that option in order to display the images in the app.

Note: This is just optional, and it doesn't need to be done for the SDK to work.

 

Step 3: Open the android folder of your react-native project in Android Studio or any other platform for Android development.

To embed the Android SDK,  add the following maven repository as given below in your project-level build.gradle

Copied 
allprojects {
                    repositories {
                      .....
                          maven { url 'https://maven.zohodl.com' }
                      }
                    }

Then, press Sync Now in the bar that appears in the IDE.

Step 4Generate the app key and access key for iOS to initialize SalesIQ. This will allow your iOS app to connect with SalesIQ.

In the Zoho SalesIQ console, navigate to Settings > Brands > Installation, and choose iOS. Enter your application's bundle ID.

Click on Generate Token. Copy the App key and Access key. You can also generate the new keys by clicking on the Generate button again.

Step 5: Similarly, generate the App key and Access key for Android to initialize SalesIQ. This will allow your Android app to connect with SalesIQ.

In the Zoho SalesIQ console, go to Settings > Brands > Installation, and choose Android. Then, enter your application's bundle ID.

Click on Generate. Copy the App key and Access key. You can also generate the new keys by clicking on the Generate button again.

Now, initialize the SDK by adding the following line in your App.js file. You will have to insert the app key and access key as mentioned below:

Copied 
import { Platform } from 'react-native';
import { ZohoSalesIQ } from 'react-native-zohosalesiq-mobilisten';

var appKey;
var accessKey;

if (Platform.OS === 'ios') {
    appKey = "ios_appKey";
    accessKey = "ios_accessKey";
} else {
    appKey = "android_appKey";
    accessKey = "android_accessKey";
}

ZohoSalesIQ.initWithCallback(appKey, accessKey, (success) => {
    if (success) {
        ZohoSalesIQ.Launcher.show(ZohoSalesIQ.Launcher.VisibilityMode.ALWAYS);
        // To show the default live chat launcher, you can use the setLauncherVisibility API. 
        // Alternatively, you may use the 'Avail floating chat button for your app' option under Settings → Brands → Installation → Android/iOS.
    } else {
        // your code to handle initialization failure
    }
});

Step 6: Setup the Lifecycle Callback 

Add the android:name property to the <application> tag in your AndroidManifest.xml:

Copied 
android:label="@string/app_name"
        android:icon="@drawable/ic_launcher"
        android:name="com.zoho.livechat.android.MobilistenApplication">        

Note: 

  • If you already have a custom Application class, ensure to "import com.zoho.livechat.android.MobilistenActivityLifecycleCallbacks;" and call "MobilistenActivityLifecycleCallbacks.register(this);" before invoking "super.onCreate()".