Working with the Zoho Desk ASAP SDK for React Native

Working with the ASAP SDK for React Native

The ASAP SDK for React Native makes help available within quick reach for the end-users of your mobile app. Using this SDK, you can add and customize an add-on that resides within your iOS/Android app and provides end-users with easy access to your:
  • Customer support team (to raise tickets or chat with support agents)
  • Knowledge base (to access help articles)
  • User community (to interact with other users of the app)
What this addition means for end-users is that they do not have to exit your app and visit your website or send an email to contact you for support. They can easily seek help right from within your app, thereby saving time and enjoying a superior customer experience.

Here's how you can add an ASAP add-on to your app, using the React Native SDK.  

Step 1: Create a mobile add-on in Zoho Desk.

To create the add-on, perform the following steps.
  1. Go to this path in Zoho Desk: Setup → Channels → ASAP.
  2. In the Setup pane on the left, under ASAP, click the + button next to Mobile. The Create Mobile Add-On page appears. 

  3. Under Add-On Details, configure the following settings:
    1. Name: Name for the ASAP add-on. This name is only for reference; it does not appear anywhere on the app UI.
    2. Available for: Departments for which this ASAP add-on must be enabled
    3. Bundle ID: In the iOS/Android field, enter the bundle ID of your iOS/Android app. 
    4. Note: Bundle ID is mandatory for enabling Live Chat and sending push notifications.
    5. Live Chat: Toggle switch for enabling/disabling Live Chat.
      Note: The Live Chat component reflects the settings configured for the chat channel in your help desk portal. Therefore, any change required must be done via the Setup page in Zoho Desk.
    6. Push Notifications: Toggle switch for enabling/disabling push notifications. (For more details, refer to Step 7 in this document.)  
      Note: JWT-based user authentication is mandatory for enabling notifications. Push notifications related to tickets are not sent to anonymous users.
    7. Authentication Method: User authentication setting for the add-on
      1. Anonymous - In this method, end-users are considered guest users. They can only submit tickets, view posts in the user community, and chat with a customer support agent. They cannot view the tickets they submitted or actively participate in the user community.
      2. JWT - In this method, end-users are considered authenticated users. In addition to the activities that guest users can perform, authenticated users can also view and track the status of the tickets they submitted, reply/comment to a ticket, and actively participate in the user community (with rights to perform actions, such as following a topic, adding a topic, and adding a comment to existing posts).
  4. Click Save.
A new section called Code Snippet appears. This section displays the Org ID, App ID, and Deployment type details of your app. These details are vital for initializing the ASAP SDK in your app.  

Step 2: Install the plugin.

To install the plugin in app with React Native version >= 0.60, run the following command.
From npm
npm install react-native-zohodesk-portal-sdk --save	
From yarn
yarn add react-native-zohodesk-portal-sdk
In app with React Native version <0.60, run the following command to link the library.
react-native link react-native-zohodesk-portal-sdk

Step 3: Include the SDK in your app.

For Android apps, this step involves the use of Maven.

The ASAP SDK for React Native is released at Therefore, you must mention the URL in your Android Project. To do this, open the Android folder of your React Native project in Android Studio and add the following Maven repository in the project level
build.gradle file.
maven { url ''} 
maven { url '' }				
For iOS apps, this step involves the use of CocoaPods. 

If the Podfile is already part of your React Native project, run the pod install command.

If the Podfile is not part of your project, run the following command from the iOS folder:
pod init
Now, include the RNZohodeskPortalSdk React Native SDK into your Podfile using the following code snippet:
target 'YourProjectName' do
pod 'RNZohodeskPortalSdk',:path => '../node_modules/react-native-zohodesk-portal-sdk/ios/RNZohodeskPortalSdk.podspec'

Then, run the pod install command from the iOS directory.

After successfully installing the pod, open the iOS project in Xcode and navigate to Build Settings  Build Options. Under Build Options, set ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES to Yes.

Next, include the following keys and their descriptions in the Info.plist file of your app. 
  1. Privacy - Camera Usage Description,
  2. Privacy - Microphone Usage Description, and 
  3. Privacy - Photo Library Usage Description

Step 4: Initialize the SDK.

To initialize the SDK, include the following snippet in your JavaScript code.
import {
}from 'react-native-zohodesk-portal-sdk';
ZohoDeskPortalSDK.initialise("orgId", "appId", "dc");

Step 5: Configure the UI and include/exclude help modules the way you want. 

To show the Zoho Desk Home Screen, use the following code snippet.
import {
} from 'react-native-zohodesk-portal-sdk';;

To show the Knowledge Base, use the following code snippet.
import {
} from 'react-native-zohodesk-portal-sdk';;

To show the Community module, use the following code snippet.
import {
} from 'react-native-zohodesk-portal-sdk';;

To show the Tickets List, use the following code snippet.
import {
} from 'react-native-zohodesk-portal-sdk';;

To show the Submit Ticket form, use the following code snippet.
import {
} from 'react-native-zohodesk-portal-sdk';;

To show the Live Chat module, use the following code snippet.
import {
} from 'react-native-zohodesk-portal-sdk';;

To show the Guided Conversation module, use the following code snippet.
import {
} from 'react-native-zohodesk-portal-sdk';;

Step 6: Configure user authentication in the add-on.

To authenticate users in the add-on, use the following code snippet based on the jwttoken:

jwttoken is passed from your app. kindly refer for how to generate jwttoken

ZohoDeskPortalSDK.isUserSignedIn((isSignedIn) => {
if(!isSignedIn) {
ZohoDeskPortalSDK.setJWTToken("JWT token",
(msg) => {
alert('Success Alert '+msg);
} , msg => {
alert('Failure Alert '+msg);
else {
alert("User is already signed in");

To log users out from the add-on, use the following code snippet. 
import {
} from 'react-native-zohodesk-portal-sdk';
alert("Success "+msg);
(msg) =>{
alert("Failure "+msg);

Step 7: Configure push notification settings. 

Make sure that push notifications are implemented in the add-on. 

For Android Apps
This step involves two actions: 
  1. Enabling push notifications for the mobile add-on you created in Step 1. You can access this setting on the ASAP setup page in Zoho Desk.
  2. Retrieving the FCM key of your app and passing it to the add-on. You can retrieve the token by accessing the following path in Firebase Console: Project Settings Cloud Messaging Server Key
As part of the second action, you must pass the FCM token in the Android project of your add-on. To do this, include the following code snippet in the oncreate() method in the class.

For iOS Apps
First, create and upload a valid Apple Push Notification service (APNs) certificate. Then, upload the p12 file of the APNs certificate along with its password. 

To enable push notifications, conform the AppDelegate class to use the UNUserNotificationCenterDelegate protocol. Then, import the following headers into the AppDelegate.h file.
#import <UserNotifications/UserNotifications.h>
#import <RNZohodeskPortalSdk/RNZohoDeskPortalSDK.h>
Next, fetch the DeviceID value using the application:didRegisterForRemoteNotificationsWithDeviceToken method in the AppDelegate.m file and pass it on to RNZohodeskPortalSdk using the following code snippet. 
const unsigned *tokenBytes = [deviceToken bytes];
   NSString *hexToken = [NSString stringWithFormat:@"%08x%08x%08x%08x%08x%08x%08x%08x",
                        ntohl(tokenBytes[0]), ntohl(tokenBytes[1]), ntohl(tokenBytes[2]),
                        ntohl(tokenBytes[3]), ntohl(tokenBytes[4]), ntohl(tokenBytes[5]),
                        ntohl(tokenBytes[6]), ntohl(tokenBytes[7])];
  [RNZohoDeskPortalSDK setDeviceIDForZDPortal:hexToken];

Enabling Push Notifications
To enable push notifications, include the following snippet in the JavaScript code. 
import {
} from 'react-native-zohodesk-portal-sdk';

Disabling Push Notifications
To disable push notifications, include the following snippet in the JavaScript code. 
import {
} from 'react-native-zohodesk-portal-sdk';

Handling Push Notifications
For Android Apps
To handle the UI and navigation for push notifications, include the following code snippet in the onMessageReceived() method of the FirebaseMessagingService class. 
RNZohodeskPortalSDK.handleNotification(getApplicationContext(), remoteMessage.getData(), icon);
For iOS Apps
To handle the UI and navigation for push notifications, include the following code snippet in the application:didReceiveRemoteNotification method in the AppDelegate.m file.
[RNZohoDeskPortalSDK processRemoteNotification:userInfo];

Step 8: Customize the theme of the add-on.

For Android Apps

The UI comes with two predefined themes: light and dark.

(i) Customize theme type:

By default, it will follow the system's theme (device theme). However, it can be overridden by the following method. The method must be added to the onCreate() function of the Application class in the Android module. (PROJECT/android/src)
Allowed values are

1. RNZohodeskPortalSDK.systemTheme
2. RNZohodeskPortalSDK.lightTheme
3. RNZohodeskPortalSDK.darkTheme

(ii) Customize colors in the particular theme:

The following method allows users to customise the colours in the theme. This method must be added to the onCreate() function of the Application class in the Android module. (PROJECT/android/src)
HashMap<String, String> themeColorsMap = new HashMap<>();
themeColorsMap.put(RNZohodeskPortalSDK.colorPrimary, "#964B00");
themeColorsMap.put(RNZohodeskPortalSDK.colorPrimaryDark, "#63351D");
themeColorsMap.put(RNZohodeskPortalSDK.colorAccent, "#63351D");
themeColorsMap.put(RNZohodeskPortalSDK.textColorPrimary, "#C0C0C0");
RNZohodeskPortalSDK.setThemeBuilder(themeColorsMap, false);

Allowed values are

1. HashMap<String, String> of keys and values.
Values - They are the desired colour string keys, which are RNZohodeskPortalSDK.colorPrimary, RNZohodeskPortalSDK.colorPrimaryDark and so on.
The above image demonstrates the list of available properties to override

2. Boolean - This will indicate that the passed colour map is either Dark or light themes. If true, the passed colour map will be used for the dark theme. Otherwise, the colour map will be used for a light theme.

For iOS Apps
The SDK UI comes with two predefined themes: Light and Dark. To apply either of the themes, use the following code snippet.
#import <RNZohodeskPortalSdk/RNZohoDeskPortalSDK.h>
[RNZohoDeskPortalSDK setTheme:RNZDThemeLight]; 

Step 9: Configure error logging for the add-on.

Enabling the console log allows you to track error messages, helping in the identification and resolution of errors that may arise during execution.
By default, logs are disabled for the SDK. 

To enable the logs, include the following code snippet:
import {
} from 'react-native-zohodesk-portal-sdk';

Release Notes

Version 1.2.4

  1. Provided options to set the display of non-authenticated user details in the Live Chat.
          Non-authenticated users are individuals who have not logged in or created an account, and therefore, their personal information might not be available. However, to make the chat more personalized, you can set the basic details to be displayed in the Live Chat using the following method:
ZDPortalChat.setGuestUserDetails("user's emailAddress", "User's Name", "user's Phone");
  1. Integrated the latest version (beta version 14) of the Android SDK for React Native.

Version 1.2.2

Implemented login support with JWT token for user authentication. For more information, refer "JWTToken under "Configure user authentication in the add-on."

Version 1.0.7

Included Guided Conversation and Zia.

    Zoho CRM Training Programs

    Learn how to use the best tools for sales force automation and better customer engagement from Zoho's implementation specialists.

    Zoho CRM Training
      Redefine the way you work
      with Zoho Workplace

        Zoho DataPrep Personalized Demo

        If you'd like a personalized walk-through of our data preparation tool, please request a demo and we'll be happy to show you how to get the best out of Zoho DataPrep.

        Zoho CRM Training

          Create, share, and deliver

          beautiful slides from anywhere.

          Get Started Now

            Zoho Sign now offers specialized one-on-one training for both administrators and developers.

            BOOK A SESSION

                                    You are currently viewing the help pages of Qntrl’s earlier version. Click here to view our latest version—Qntrl 3.0's help articles.

                                        Manage your brands on social media

                                          Zoho Desk Resources

                                          • Desk Community Learning Series

                                          • Digest

                                          • Functions

                                          • Meetups

                                          • Kbase

                                          • Resources

                                          • Glossary

                                          • Desk Marketplace

                                          • MVP Corner

                                          • Word of the Day

                                            Zoho Marketing Automation

                                              Zoho Sheet Resources


                                                  Zoho Forms Resources

                                                    Secure your business
                                                    communication with Zoho Mail

                                                    Mail on the move with
                                                    Zoho Mail mobile application

                                                      Stay on top of your schedule
                                                      at all times

                                                      Carry your calendar with you
                                                      Anytime, anywhere

                                                            Zoho Sign Resources

                                                              Sign, Paperless!

                                                              Sign and send business documents on the go!

                                                              Get Started Now

                                                                      Zoho TeamInbox Resources

                                                                              Zoho DataPrep Resources

                                                                                Zoho DataPrep Demo

                                                                                Get a personalized demo or POC

                                                                                REGISTER NOW

                                                                                  Design. Discuss. Deliver.

                                                                                  Create visually engaging stories with Zoho Show.

                                                                                  Get Started Now

                                                                                                      • Related Articles

                                                                                                      • Introducing ASAP React Native SDK

                                                                                                        Equipping the Help Center services as widgets to deliver instant assistance to your customers The ASAP SDK for Android/iOS provides easy access to help your mobile app's end users. Using this SDK, you can create and customize a help widget within ...
                                                                                                      • Working with the ASAP SDK for React Native

                                                                                                        The ASAP SDK for mobile provides easy access to help end-users of your React Native app. Using this SDK, you can create and customize a help widget that resides within your app and provides end-users with easy access to the Help Center services: • ...
                                                                                                      • How to enable push notifications for the ASAP SDK via the React Native?

                                                                                                        You can configure the ASAP help widget to send notifications to end-users when an agent responds via chat. Ensure that Push Notifications settings are configured in the ASAP help widget setup page in Zoho Desk. Ensure that push notifications are ...
                                                                                                      • Introducing ASAP Flutter Apps SDK

                                                                                                        Equipping the Help Center services as widgets to deliver instant assistance to your customers The ASAP SDK for Android/iOS provides easy access to help your mobile app's end users. Using this SDK, you can create and customize a help widget within ...
                                                                                                      • How to Integrate the ASAP SDK with React Native

                                                                                                        After successfully setting up the ASAP SDK on your mobile application, the next step is to integrate it. Please follow either of the following method to perform these steps. For Android applications, this step involves the use of Maven. The ASAP SDK ...
                                                                                                        Wherever you are is as good as
                                                                                                        your workplace



                                                                                                          Watch comprehensive videos on features and other important topics that will help you master Zoho CRM.


                                                                                                          Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho CRM.


                                                                                                          Sign up for our webinars and learn the Zoho CRM basics, from customization to sales force automation and more.

                                                                                                          CRM Tips

                                                                                                          Make the most of Zoho CRM with these useful tips.

                                                                                                            Zoho Show Resources