How to customize the ASAP SDK React Native Help Widget UI?
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.
To add the following code in AppDelegate.m within the didFinishLaunchingWithOptions method in iOS project:
- #import <RNZohodeskPortalSdk/RNZohoDeskPortalSDK.h>
[RNZohoDeskPortalSDK setTheme:RNZDThemeLight];
How to configure error logging for the ASAP Help Widget?
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.
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:
- npx react-native-asset
After adding the custom fonts, follow the steps below to set them for the SDK on iOS and Android:
iOS
To add the following code in AppDelegate.m within the didFinishLaunchingWithOptions method in the iOS project:
- #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:
Include the following code in your project:
To ensure the ASAP SDK is initialized before calling this method
To paste the below code in onPause methods in the MainActivity.kt file of the android project:
- 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:
To add the following code in AppDelegate.m within the didFinishLaunchingWithOptions method in the iOS project:
- #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:
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 |
Access your files securely from anywhere
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 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 Workerly Home
- Forums
- Connect With Us:
- Zoho Recruit Home
- Forums
- Connect With Us:
New to Zoho Writer?
Create. Review. Publish.
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Zoho Marketing Plus?
Everything you need to run your marketing
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.
New to Zoho Survey?
Zoho Sheet Resources
Zoho Forms Resources
New to Zoho Sign?
Zoho Sign Resources
Sign, Paperless!
New to Zoho TeamInbox?
Zoho TeamInbox Resources
New to Zoho ZeptoMail?
Design. Discuss. Deliver.
New to Zoho Workerly?
New to Zoho Recruit?
New to Zoho CRM?
New to Zoho Projects?
New to Zoho Sprints?
New to Zoho Assist?
New to Bigin?
Related Articles
Introducing ASAP React Native SDK
Please note that if you are using an older version of ASAP, the help widgets will be read-only. To enable the new ASAP widgets on your app, use the latest ASAP React-Native SDK 3.0.0. You can use the ASAP React-Native SDK ...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 customize the ASAP SDK Android Help Widget UI?
The ASAP SDK allows you to customize the UI of the help widget as required. Predefined themes The SDK UI comes with two predefined themes: light and dark. Customized themes You can also override the default dark and light themes to make the SDK look ...How to customize the ASAP SDK iOS Help Widget UI?
The ASAP SDK allows you to customize the UI of the help widget as required. Predefined themes The SDK UI comes with two predefined themes: white and black. The following methods help you apply these themes. If you want to change the theme, first ...Introducing ASAP Flutter Apps SDK
This document pertains explicitly to help widgets created using the updated new ASAP Setup. If you are using an older version of ASAP, the help widgets will be read-only. To enable the new ASAP widgets on your App, use the latest ASAP Flutter Plugin ...
New to Zoho LandingPage?
Zoho LandingPage Resources