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.
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.
2. Value - They are the desired colour string keys, which are RNZohodeskPortalSDK.colorPrimary, RNZohodeskPortalSDK.colorPrimaryDark and so on.
3. 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.
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();