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: 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 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:

Copied

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

For Ionic Projects:

Copied

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

For Ionic React Projects using Capacitor:

Copied

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 to the Info.plist file, you can use the config-file tag in the config.xml as shown below for the ios platform.

Copied

<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 > Brands > {Your brand name} > Installation > iOS. You can then enter your application ID under the Register App section.

Click on Generate. Copy the App key and Access key. You can also generate the keys by clicking on the Create New Access Key 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 > Brands > {Your brand name} > Installation > Android. Then, enter your application ID in the input field under the Resiter App section

Click on Generate. Copy the App key and Access key. You can also generate the keys by clicking on the Create New Access Key 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

Copied

    let appKey;
    let accessKey;
    if (device.platform === 'iOS') {
        appKey = "ios_app_key";
        accessKey = "ios_access_key";
    } else {
        appKey = "android_app_key";
        accessKey = "android_access_key";
    }
  
    ZohoSalesIQ.init(appKey, accessKey, (success) => {
        //Use the ZohoSalesIQ.Launcher.show API if you wish to show the launcher by default.
        ZohoSalesIQ.Launcher.show(VisibilityMode.ALWAYS);
    });

For Ionic Projects

Copied

declare var ZohoSalesIQ: any;

    let appKey;
    let accessKey;
    if (device.platform === 'iOS') {
        appKey = "ios_app_key";
        accessKey = "ios_access_key";
    } else {
        appKey = "android_app_key";
        accessKey = "android_access_key";
    }
  
    ZohoSalesIQ.init(appKey, accessKey, (success) => {
        //Use the ZohoSalesIQ.Launcher.show API if you wish to show the launcher by default.
        ZohoSalesIQ.Launcher.show(VisibilityMode.ALWAYS);
    });