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.


 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. 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)
  1. 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:
  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();

    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









                                            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 enable push notifications for the ASAP SDK via the React Native?

                                                                                                                You can configure the ASAP help widget to send notifications to end-users when an agent responds via chat. Ensure that Push Notifications settings are configured in the ASAP help widget setup page in Zoho Desk. Ensure that push notifications are ...
                                                                                                              • 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 ...
                                                                                                                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