• 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)
  

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. 
   
Note: Bundle ID is mandatory for enabling Live Chat and sending push notifications.

4. 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.
   
5. 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.
   
6. 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.
   

Step 2: Install the plugin.

npm install react-native-zohodesk-portal-sdk --save	

yarn add react-native-zohodesk-portal-sdk

react-native link react-native-zohodesk-portal-sdk

Step 3: Include the SDK in your app.

allprojects{ 				
repositories{ 				
maven { url 'https://maven.zohodl.com/'} 
maven { url 'https://downloads.zohocdn.com/wmslibrary' }				
}
} 	

pod init

target 'YourProjectName' do
pod 'RNZohodeskPortalSdk',:path => '../node_modules/react-native-zohodesk-portal-sdk/ios/RNZohodeskPortalSdk.podspec'
end

Step 4: Initialize the SDK.

import {
ZohoDeskPortalSDK
}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. 

import {
ZDPortalHome
} from 'react-native-zohodesk-portal-sdk';
ZDPortalHome.show();

import {
ZDPortalKB
} from 'react-native-zohodesk-portal-sdk';
ZDPortalKB.show();

import {
ZDPortalCommunity
} from 'react-native-zohodesk-portal-sdk';
ZDPortalCommunity.show();

import {
ZDPortalTickets
} from 'react-native-zohodesk-portal-sdk';
ZDPortalTickets.show();

import {
ZDPortalSubmitTicket
} from 'react-native-zohodesk-portal-sdk';
ZDPortalSubmitTicket.show();

import {
ZDPortalChat
} from 'react-native-zohodesk-portal-sdk';
ZDPortalChat.show();

import {
ZDPortalLiveChat
} from 'react-native-zohodesk-portal-sdk';
ZDPortalLiveChat.show();

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

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");
}
})

import {
ZohoDeskPortalSDK
} from 'react-native-zohodesk-portal-sdk';
ZohoDeskPortalSDK.logout((msg)=>{
alert("Success "+msg);
},
(msg) =>{
alert("Failure "+msg);
});

Step 7: Configure push notification settings. 

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. 
   

RNZohodeskPortalSDK.setFirebaseId(FirebaseInstanceId.getInstance().getToken());

#import <UserNotifications/UserNotifications.h>
#import <RNZohodeskPortalSdk/RNZohoDeskPortalSDK.h>

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];

import {
 ZohoDeskPortalSDK
} from 'react-native-zohodesk-portal-sdk';
ZohoDeskPortalSDK.enablePush();

import {
 ZohoDeskPortalSDK
} from 'react-native-zohodesk-portal-sdk';
ZohoDeskPortalSDK.disablePush();

RNZohodeskPortalSDK.handleNotification(getApplicationContext(), remoteMessage.getData(), icon);

[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)

RNZohodeskPortalSDK.setThemeType(RNZohodeskPortalSDK.systemTheme);

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.

import {
ZohoDeskPortalSDK
} from 'react-native-zohodesk-portal-sdk';
ZohoDeskPortalSDK.enableLogs();

ZDPortalChat.setGuestUserDetails("user's emailAddress", "User's Name", "user's Phone");