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 which, 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 website and Mobile SDK remains the same if you have already configured on your site it will be automatically reflected in Mobile SDK as well. If not, then learn how to configure now.

Installation of React - Native Zoho SalesIQ SDK

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

Requirements

Android: The SDK supports Android API level 14.

iOS : The SDK for iOS is compatible for iOS 9 and above. The minimum version of Xcode required is Xcode 11.

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.

npm install react-native-zohosalesiq-mobilisten --save
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.

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

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

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.

Incase of any assets pointed to by an http link, you should use that option inorder to display the images in the app.

Note:This is just optional and it doesnt 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

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 > Websites > Live Chat for Mobile Apps, and choose iOS from the menu. You can then enter your application ID.

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

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 > Websites > Live Chat for Mobile Apps, and choose Android from the menu. Then, enter your application ID.

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

Now, initialise 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:

    import { ZohoSalesIQ } from 'react-native-zohosalesiq-mobilisten';
    if (Platform.OS === 'ios'){
      ZohoSalesIQ.init("ios_app_key","ios_access_key");
      ZohoSalesIQ.setLauncherVisibility(true);
      //By default, if you wish to display the chat button/bubble on the application, then use .setLauncherVisibility() API.
      }
    else{
       ZohoSalesIQ.init("android_app_key","android_access_key");
       ZohoSalesIQ.setLauncherVisibility(true);
       //By default, if you wish to display the chat button/bubble on the application, then use .setLauncherVisibility() API.
}