The ASAP SDK allows you to customize the UI of the help widget as required.
Predefined themes for Android Apps
The SDK UI comes with two predefined themes: light and dark.
Customized themes
The following picture illustrates the color properties of a screen.
To set the home screen configuration
- import {ZohoDeskPortalHome} from '@zohocorp/zohodesk-portal-core';
//The default value for all this configuration is true
ZohoDeskPortalHome.setConfiguration(
{
enableCommunity: true,
enableHelpCenter: true,
enableMyTicket: true,
enableCreateTicket: true,
enableAddTopic: true,
showChat: true,
showGC: true,
showAnswerBot: true,
showBM: true
}
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)
import {ZohoDeskPortalConfiguration} from '@zohocorp/zohodesk-portal-configuration';
var themeValue = 1 // Default theme is 1 (Light theme)
ZDPortalConfiguration.setTheme(themeValue)
Allowed values are
1. RNZohodeskPortalSDK.systemTheme
2. RNZohodeskPortalSDK.lightTheme
3. RNZohodeskPortalSDK.darkTheme
II Customize colors in the particular theme
UpdateTheme
To update the SDK themes for dark and light modes, you can customize the theme for both iOS and Android:
iOS Theme Customization
In your iOS project, create a file named CustomTheme.h and add the following code:
- #import "RNZDPThemeProtocol.h"
@interface CustomTheme : NSObject <RNZDPThemeProtocol>
@end
After completing the header file, create a file named CustomTheme.m in your iOS project. Use this code to define the theme colours.
@implementation CustomTheme
- (UIColor *)themeColor {
return [UIColor blueColor]; // Replace with your desired color
}
- (UIColor *)primaryBackgroundColor {
return [UIColor whiteColor]; // Replace with your desired color
}
- (UIColor *)secondaryBackgroundColor {
return [UIColor lightGrayColor]; // Replace with your desired color
}
- (UIColor *)primaryTextColor {
return [UIColor blackColor]; // Replace with your desired color
}
- (UIColor *)secondaryTextColor {
return [UIColor darkGrayColor]; // Replace with your desired color
}
- (UIColor *)placeholderTextColor {
return [UIColor lightGrayColor]; // Replace with your desired color
}
- (UIColor *)iconColor {
return [UIColor grayColor]; // Replace with your desired color
}
- (UIColor *)borderColor {
return [UIColor blackColor]; // Replace with your desired color
}
- (UIColor *)separatorColor {
return [UIColor grayColor]; // Replace with your desired color
}
- (UIColor *)selectedColor {
return [UIColor blueColor]; // Replace with your desired color
}
- (UIColor *)navigationBarBackgroundColor {
return [UIColor whiteColor]; // Replace with your desired color
}
- (UIColor *)navigationBarTextColor {
return [UIColor blackColor]; // Replace with your desired color
}
- (UIColor *)navigationBarButtonColor {
return [UIColor blueColor]; // Replace with your desired color
}
- (UIColor *)failureColor {
return [UIColor redColor]; // Replace with your desired color
}
@end
Finally, set the theme for your application by adding the following code in AppDelegate.m within the didFinishLaunchingWithOptions method:
- #import "RNZohoDeskPortalConfiguration.h"
#import "CustomTheme.h"
//The custom theme is conformed with the RNZDPThemeprotocol
CustomTheme *myCustomLightTheme = [[CustomTheme alloc] init];
CustomTheme *myCustomDarkTheme = [[CustomTheme alloc] init];
[RNZohoDeskPortalConfiguration updateLightTheme:myCustomLightTheme]; // CustomTheme For LightTheme
[RNZohoDeskPortalConfiguration updateDarkTheme:myCustomTheme]; // CustomTheme For DarkTheme
Android Theme Customization
You can define the theme using a HashMap to pass custom colours. The boolean value indicates whether the theme is for dark mode (proper) or light mode (false).
To paste the below code in onPause methods in MainActivity.kt file of the android project:
- import com.zohodeskportalconfiguration.RNZohoDeskPortalConfigurationModule
val themeColors = hashMapOf(
"colorPrimary" to "#FF6200EE",
"colorPrimaryDark" to "#FF3700B3",
"colorAccent" to "#FF03DAC5",
"windowBackground" to "#FFFFFF",
"itemBackground" to "#F0F0F0",
"textColorPrimary" to "#000000",
"textColorSecondary" to "#757575",
"colorOnPrimary" to "#FFFFFF",
"iconTint" to "#FF03DAC5",
"divider" to "#BDBDBD",
"listSelector" to "#FF6200EE",
"hint" to "#757575",
"formFieldBorder" to "#DDDDDD",
"errorColor" to "#FF0000"
)
RNZohoDeskPortalConfigurationModule.setThemeBuilder(themeColors,true)
Predefined themes 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];
Enabling the console log allows you to track error messages, helping to identify and resolve errors that may arise during execution.
By default, logs are disabled for the SDK.
To enable the logs, include the following code snippet:
- import {
ZohoDeskPortalSDK
} from 'react-native-zohodesk-portal-sdk';
ZohoDeskPortalSDK.enableLogs();
Custom Fonts
Create a folder named "fonts" within the "assets" directory of your React Native project.
Place your custom font file inside this folder.(Lato-Bold.ttf, Lato-Medium.ttf, Lato-Regular.ttf, etc.)
If you don't already have a "react-native.config.js" file, create one at the root of your React Native project. Inside this file, export the configuration for React Native and specify the assets folder.
- module.exports = {
assets: ['./assets/fonts/'],
};
Run the command to link the assets to your iOS and Android projects:
After adding the custom fonts, follow the steps below to set them for the SDK on iOS and Android:
iOS
- #import "RNZohoDeskPortalConfiguration.h"
[RNZohoDeskPortalConfiguration customFontName:@"Lato-Bold"];
Android
In Android, you can set custom fonts for different text styles like medium, regular, etc.
Include the following code in your project:
To ensure the ASAP SDK is initialized before calling this method
- import com.zohodeskportalconfiguration.RNZohoDeskPortalConfigurationModule
import com.zohodeskportalconfiguration.RNZDPFont
import android.graphics.Typeface
Typeface medium = Typeface.createFromAsset(assets, "fonts/Lato-Medium.ttf")
Typeface regular = Typeface.createFromAsset(assets, "fonts/Lato-regular.ttf")
//Add other font type also
RNZohoDeskPortalConfigurationModule.setCustomFont(
new RNZDPFont.Builder().setMedium(medium).setRegular(regular).build()
)
Change the SDK Language
The ASAP SDK will display the Help Center's default language. Anyways, this can be overridden by using the following code snippet:
- import {ZohoDeskPortalConfiguration} from '@zohocorp/zohodesk-portal-configuration';
//To pass the lanugage code
ZohoDeskPortalConfiguration.setSDKLanguage("en")
Set Modal Presentation Styles
To set the screen presentation styles in the SDK for iOS, use the following method:
- #import "RNZohoDeskPortalConfiguration.h"
// There are various presentation styles available; choose the one that suits your needs.
[RNZohoDeskPortalConfiguration setModalPresentationStyle:UIModalPresentationPopover];
How to override the default configurations of the ASAP SDK?
We have a UI and a set of configurations by default. However, we provide the option to override such UI configurations.
To override the ASAP SDK configurations, please add the following code snippet:
- import {ZohoDeskPortalConfiguration} from '@zohocorp/zohodesk-portal-configuration';
//The default value is false for all this configuration
ZDPortalConfiguration.setConfiguration({
disableSidemenu: false,
disableLanguageChooser: false,
disablePoweredByZoho: false,
disableGlobalSearch: false,
disableKB: false,
disableCommunity: false,
disableSubmitTicket: false,
disableAddTopic: false,
disableMyTicket: false,
disableGuidedConversation: false,
disableAnswerBot: false,
disableBusinessMessanger: false,
disableSalesIQ: false,
enableModuleBasedSearch: false,
disableDownloadAttachment: false,
disableUploadAttachment: false,
disableScreenShot: false,
disableCopyPaste: false
})
Method Name
| Functions
| Default enabled/disabled status
|
disableSidemenu
| To hide the side menu
| Enabled
|
disbableLanguageChooser
| To hide the language chooser
| Enabled |
disablePoweredByZoho
| To disable the powered by Zoho label in the bottom bar
| Enabled |
disableGlobalSearch
| To hide the global search
| Enabled |
disableKB
| To hide the KB based on the portal configuration
| Based on the portal configuration
|
disableCommunity
| To hide the community
| Based on the portal configuration |
disableSubmitTicket
| To hide the submit ticket
| Based on the portal configuration |
disableAddTopic
| To hide the add topic
| Based on the portal configuration |
disableMyTicket
| To hide the myTicket
| Based on the portal configuration |
disableGuidedConversation
| To hide the Guided Conversations
| Based on the portal configuration |
disableAnswerBot
| To hide the answer bot
| Based on the portal configuration |
disableBusinessMessenger
| To hide the business messenger
| Based on the portal configuration |
disableSalesIQ
| To hide the salesIQ
| Based on the portal configuration |
enableModuleBasedSearch
| To enable the module based search
| Disabled |
disableDownloadAttachment
| To disable the download attachment option
| Enabled |
disableUploadAttachment
| To disable the upload attachment option
| Enabled |
disableScreenshot
| To disable the screen shot
| Enabled |
disableCopyPaste
| To disable the copy-paste in the SDK
| Enabled |