How to customize the ASAP SDK Help WIdget UI?

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

  1. 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)
  1. import {ZohoDeskPortalConfiguration} from '@zohocorp/zohodesk-portal-configuration';
  2. var themeValue = 1 // Default theme is 1 (Light theme)
  3. 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:
  1. #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:
  1. #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:
  1. 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:
  1. #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.

To enable the logs, include the following code snippet:
  1. 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.
  1. module.exports = {
    assets: ['./assets/fonts/'],
    };
Run the command to link the assets to your iOS and Android projects:
  1. 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:
  1. #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:
Notes
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: 
  1. 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:
  1. 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:
  1. #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:
  1. 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