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:
- Minimum Android Version: Android 5.0 (Lollipop) (API Level 21)
- Compile SDK Version: 34 (Android 14)
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 below 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.
- Run the following command in the project.
Copied
pod install
For the RNZohoSalesIQ version below 10.0.0:
- Open your 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 pod install after saving the changes made to the Podfile.
Note: If you're updating from the SDK versions below 10.0.0 to above, remove the above path in your Podfile and run the pod install in the iOS folder.
- 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.
- Add the following maven repository in the project root settings.gradle(project/android/settings.gradle) or build.gradle file(project/android/build.gradle).
For Gradle version 6.7 and below
// Add the following to your project's root build.gradle file.
allprojects {
repositories {
google()
mavenCentral()
// ...
maven { url 'https://maven.zohodl.com' }
}
}
For Gradle version 6.8 and above (Kotlin)
// Add the following to your settings.gradle file.
dependencyResolutionManagement {
repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
repositories {
google()
mavenCentral()
// Add the Zoho Maven URL here
maven { url = uri("https://maven.zohodl.com") }
}
}
For Gradle version 6.8 and above (Groovy)
// Add the following to your settings.gradle file.
dependencyResolutionManagement {
repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
repositories {
google()
mavenCentral()
// Add the Zoho Maven URL here
maven { url 'https://maven.zohodl.com' }
}
}
- Then, press Sync Now in the bar that appears in the IDE.
Step 4:
- Generate 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
<application
android:label="@string/app_name"
android:icon="@drawable/ic_launcher"
android:name="<package_name>.MyFlutterApplication">
Copied
import com.zohosalesiq.reactlibrary.RNZohoSalesIQ;
public class MainApplication extends Application implements ReactApplication {
//...
@Override
public void onCreate() {
RNZohoSalesIQ.registerCallbacks(this);
super.onCreate();
}
}
- This is essential as it enables Mobilisten to track activity's lifecycles and other listener callbacks on the app's startup to show the launcher and other important user behaviors.
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()".
Step 7: Permissions:
- android.permission.INTERNET: Required for network-related operations (mandatory)
- android.permission.SCHEDULE_EXACT_ALARM: If you want your chatbot to be proactively triggered for your mobile app users after a specified duration (more than a second), add SCHEDULE_EXACT_ALARM permission in your AndroidManifest.xml. This ensures scheduling the bot trigger after the designated time. Even if your app is inactive, SalesIQ will post the trigger message as a notification for your app users.
Note: To use the bot triggers in Android 12 & above, the SCHEDULE_EXACT_ALARM permission is mandatory.
Step 8: Proguard Configuration (Minifying App)
In some versions of the Android Gradle plugin, the R8 compiler exhibits aggressive behavior that removes some essential classes necessary for the SDK to function as expected. To handle this, we have added specific pro-guard rules within our Mobilisten SDK to preserve these crucial classes during the build process. If you have enabled ProGuard(minifyEnabled) R8, then please add the following rules in your proguard-rules.pro file in your project/android folder.
Copied
-dontwarn kotlinx.parcelize.Parcelize
If you encounter any instances where these pro-guard rules do not suffice, kindly reach us at (support@zohosalesiq.com).
Step 9: Backup Codes
If your app has enabled backup and you have your own backup rules or some of your other dependencies have them, then all these steps below are mandatory for App data backup to Google. Since Android doesn’t support manifest merging, all backup rules must be combined into a single file, which you’ll need to reference in your app’s AndroidManifest.xml.
To complete this setup,
- Create XML files called merged_backup_rules.xml and merged_data_extraction_rules.xml in the res/xml/ directory. Example: android/app/src/main/res/xml.
- Add your rules with our Mobilisten rules to your app and verify that everything is functioning as expected.
Copied
<?xml version="1.0" encoding="utf-8"?>
<full-backup-content>
<!-- Your own/other library's rules -->
<exclude domain="sharedpref" path="sample-data"/>
<exclude domain="database" path="sample.db"/>
<!-- Mobilisten rules -->
<exclude
domain="sharedpref"
path="siq_encrypted_shared_preference_entries.xml" />
<exclude
domain="sharedpref"
path="siq_session.xml" />
<exclude
domain="sharedpref"
path="siq_permission.xml" />
<exclude
domain="database"
path="siq_mobilisten.db" />
<exclude
domain="database"
path="mobilisten_zoho_salesiq.db" />
</full-backup-content>
merged_data_extraction_rules.xml
Copied
<?xml version="1.0" encoding="utf-8"?>
<data-extraction-rules>
<cloud-backup>
<!-- Your own/other library's rules -->
<exclude domain="sharedpref" path="sample-data"/>
<exclude domain="database" path="sample.db"/>
<!-- Mobilisten rules -->
<exclude
domain="sharedpref"
path="siq_encrypted_shared_preference_entries.xml" />
<exclude
domain="sharedpref"
path="siq_session.xml" />
<exclude
domain="sharedpref"
path="siq_permission.xml" />
<exclude
domain="database"
path="siq_mobilisten.db" />
<exclude
domain="database"
path="mobilisten_zoho_salesiq.db" />
</cloud-backup>
<device-transfer>
<!-- Your own/other library's rules -->
<exclude domain="sharedpref" path="sample-data"/>
<exclude domain="database" path="sample.db"/>
</device-transfer>
</data-extraction-rules>
Also, ensure to map it in your AndroidManifest.xml.
Copied
android:dataExtractionRules="@xml/merged_data_extraction_rules"
android:fullBackupContent="@xml/merged_backup_rules"'
tools:replace="android:fullBackupContent,android:dataExtractionRules,android:allowBackup"