Overview:

Zoho SalesIQ Mobilisten lets you add live chat and visitor tracking to your Cordova or Ionic application with ease. Mobilisten comes with a rich set of APIs that lets you tailor the SDK to fit your needs.

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

Installation of Zoho SalesIQ SDK:

Please follow the steps mentioned below to seamlessly install the SalesIQ Mobilisten plugin in your Cordova/Ionic application.

Requirements:

Android: Compatible from Android API level 14.
iOS: Compatible with iOS 10 and above. The minimum version of Xcode required is Xcode 11.

How to embed SalesIQ's SDK into your Cordova/Ionic project?

Step 1:

You can install Mobilisten to your project by using either npm or GitHub. In the root folder of your project, execute the following command in the terminal.

For Cordova Projects:

cordova plugin add https://github.com/zoho/SalesIQ-Mobilisten-Cordova.git

For Ionic Projects:

ionic cordova plugin add https://github.com/zoho/SalesIQ-Mobilisten-Cordova.git

For Ionic React Projects using Capacitor:

npm install https://github.com/zoho/SalesIQ-Mobilisten-Cordova.git
npx cap sync

Step 2:

For iOS, Update the Info.plist file with the below list of permissions.

Alternatively, to add these entries into the Info.plist file, you can use the config-file tag in the config.xml as shown below for the ios platform.​​

<config-file target="*-Info.plist" parent="NSPhotoLibraryAddUsageDescription">
    <string>We would like access to add Images/Videos to your photo library.</string>
</config-file>

<config-file target="*-Info.plist" parent="NSPhotoLibraryUsageDescription">
    <string>We would like access to the photo library to enable sharing images and videos via chat.</string>
</config-file>

<config-file target="*-Info.plist" parent="NSCameraUsageDescription">
    <string>We would like access to the camera to enable taking photos and videos for sharing via chat.</string>
</config-file>

<config-file target="*-Info.plist" parent="NSMicrophoneUsageDescription">
    <string>We would like access to the microphone to allow recording voice messages.</string>
</config-file>

<config-file target="*-Info.plist" parent="NSLocationWhenInUseUsageDescription">
    <string>We would like access to location services to update your location on the map.</string>
</config-file>

Run the cordova prepare ios command once the above xml is added for the iOS platform.

Step 3:

Open the android folder of your Ionic/Cordova project in Android Studio or any other platform for Android development and sync the project with the Gradle files as shown below:

Step 4:

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.

Initializing the Plugin

Now, initialize the SDK by adding the following code to your application, depending on the platform. The app and access keys generated for both iOS and Android must be provided separately, as shown below. 

For Cordova Projects


   if (device.platform === 'iOS'){
  ZohoSalesIQ.init("ios_app_key", "ios_access_key");
}else{
  ZohoSalesIQ.init("android_app_key", "android_access_key");
}

//Use the ZohoSalesIQ.showLauncher API if you wish to show the launcher by default.
ZohoSalesIQ.showLauncher(true);

For Ionic Projects


   declare var ZohoSalesIQ: any;

if (this.platform.is('ios')){
  ZohoSalesIQ.init("ios_app_key", "ios_access_key");
}else{
  ZohoSalesIQ.init("android_app_key", "android_access_key");
}

//Use the ZohoSalesIQ.showLauncher API if you wish to show the launcher by default.
ZohoSalesIQ.showLauncher(true);