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';
    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:
  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:
  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

  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
  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:
  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


    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 CRM Training
        Redefine the way you work
        with Zoho Workplace

          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 CRM Training

            Create, share, and deliver

            beautiful slides from anywhere.

            Get Started Now


              Zoho Sign now offers specialized one-on-one training for both administrators and developers.

              BOOK A SESSION






                          Quick Links Workflow Automation Data Collection
                          Web Forms Enterprise Begin Data Collection
                          Interactive Forms Workplace Data Collection App
                          Offline Forms Customer Service Accessible Forms
                          Digital Forms Marketing Forms for Small Business
                          HTML Forms Education Forms for Enterprise
                          Contact Forms E-commerce Forms for any business
                          Lead Generation Forms Healthcare Forms for Startups
                          Wordpress Forms Customer onboarding Order Forms for Small Business
                          No Code Forms Construction RSVP tool for holidays
                          Free Forms Travel
                          Prefill Forms Non-Profit

                          Intake Forms Legal

                          Form Designer HR

                          Card Forms Food
                          Assign Forms Photography

                          Translate Forms Real Estate
                          Electronic Forms

                          Notification Emails for Forms Alternatives
                          Holiday Forms Google Forms alternative 
                          Form to PDF Jotform alternative





                                            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.




                                                Manage your brands on social media

                                                  Zoho Desk Resources

                                                  • Desk Community Learning Series


                                                  • Digest


                                                  • Functions


                                                  • Meetups


                                                  • Kbase


                                                  • Resources


                                                  • Glossary


                                                  • Desk Marketplace


                                                  • MVP Corner


                                                  • Word of the Day


                                                    Zoho Marketing Automation

                                                      Zoho Sheet Resources

                                                       

                                                          Zoho Forms Resources


                                                            Secure your business
                                                            communication with Zoho Mail


                                                            Mail on the move with
                                                            Zoho Mail mobile application

                                                              Stay on top of your schedule
                                                              at all times


                                                              Carry your calendar with you
                                                              Anytime, anywhere




                                                                    Zoho Sign Resources

                                                                      Sign, Paperless!

                                                                      Sign and send business documents on the go!

                                                                      Get Started Now




                                                                              Zoho TeamInbox Resources



                                                                                      Zoho DataPrep Resources



                                                                                        Zoho DataPrep Demo

                                                                                        Get a personalized demo or POC

                                                                                        REGISTER NOW


                                                                                          Design. Discuss. Deliver.

                                                                                          Create visually engaging stories with Zoho Show.

                                                                                          Get Started Now









                                                                                                              • Related Articles

                                                                                                              • Introducing ASAP React Native SDK

                                                                                                                Equipping the Help Center services as widgets to deliver instant assistance to your customers The ASAP SDK for Android/iOS provides easy access to help your mobile app's end users. Using this SDK, you can create and customize a help widget within ...
                                                                                                              • 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

                                                                                                                Equipping the Help Center services as widgets to deliver instant assistance to your customers The ASAP SDK for Android/iOS provides easy access to help your mobile app's end users. Using this SDK, you can create and customize a help widget within ...
                                                                                                                Wherever you are is as good as
                                                                                                                your workplace

                                                                                                                  Resources

                                                                                                                  Videos

                                                                                                                  Watch comprehensive videos on features and other important topics that will help you master Zoho CRM.



                                                                                                                  eBooks

                                                                                                                  Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho CRM.



                                                                                                                  Webinars

                                                                                                                  Sign up for our webinars and learn the Zoho CRM basics, from customization to sales force automation and more.



                                                                                                                  CRM Tips

                                                                                                                  Make the most of Zoho CRM with these useful tips.



                                                                                                                    Zoho Show Resources