Working with ASAP SDK for Flutter - Online Help | Zoho Desk

Working with ASAP SDK for Flutter

Integrate ASAP SDK to implement the help center services within your Flutter applications.
ASAP is a self-service platform that provides the following help center services to the customers:
  1. Raise tickets
  2. Access the Knowledge Base  
  3. Interact with other customers through community
  4. Enhance self-service with Zia Bot and Guided Conversations

Embedding ASAP add-on into your app

The ASAP SDK provides code snippets that allows you to effortlessly integrate help center components into your Flutter application. By utilizing ASAP SDK, developers can save time and effort by avoiding the need to build these features from scratch.

Embedding  ASAP add-on into your app using the Flutter SDK includes the following steps:

Step 1: Create a mobile add-on in Zoho Desk

To create the add-on, perform the following steps:

  1. In Zoho Desk, go to Setup > Channels > ASAP.

  1. In the Setup pane on the left, under ASAP, click the + button next to Mobile. The Create Mobile Add-On page appears.


  1. Under Add-On Details, configure the following settings:

    1. Name: Name for the ASAP add-on. The name is only for reference; it does not appear anywhere on the app UI.

    1. Available for: Departments for which this ASAP add-on must be enabled.

    1. Bundle ID: Enter the bundle ID of your app in the appropriate field for iOS/Android. 

Bundle ID is mandatory for enabling Live Chat and Push Notifications.

    1. Chat: Toggle switch to enable or disable the Chat feature, offering three options for customization. You can choose to enable or disable Zia, Guided Conversations(GC), and Live Chat.

The Live Chat component reflects the settings configured for the chat   channel in your help desk portal. Therefore, any change required must be done via the Setup page in Zoho Desk.

    1. Push Notifications: Toggle switch to enable or disable Push Notifications. 

JWT-based user authentication is mandatory for enabling Ticket notifications. Push Notifications related to tickets are not sent to anonymous users.

 

    1. Authentication Method: User authentication setting for the add-on

      1. Anonymous (guest) users : The end-users who are not authenticated are anonymous users. They can only submit tickets, view posts in the user community, and chat with a customer support agent. They cannot view the tickets they submitted or actively participate in the user community.

      2. JWT (registered) users : The registered end-users are authenticated users. The JWT authentication method is used to verify the end user's identity. In addition to the activities that guest users can perform, authenticated users can also view and track the status of the tickets they submitted, reply/comment on a ticket, and actively participate in the user community (with rights to perform actions such as following a topic, adding a topic, and adding a comment to existing posts). 

 4. Click Save.

A new section called Code Snippet appears. This section displays the Organization ID, App ID, and Datacenter details of your app. These details are vital for initializing the ASAP SDK in your app.  


Step 2: Install the plugin

To install the plugin in, run either of the following commands:
flutter pub add zohodesk_portal_services
(or)
add the following in pubspec.yaml
dependencies:
zohodesk_portal_services: version

Step 3: Resolve the ASAP SDK dependencies in your app

Android:
The dependencies of the ASAP SDK are available at maven.zohodl.com. To include the dependencies in your Android project, you must add the relevant Maven URLs to your project's build.gradle file. 
To perform this, open the Android folder of your Flutter project in Android Studio and add the following Maven repository in the project level build.gradle file.
allprojects
{ repositories { maven { url 'https://maven.zohodl.com/'} maven { url 'https://downloads.zohocdn.com/wmslibrary' } } }
iOS:
There is no need to separately import iOS-specific dependencies into the project since the iOS SDK dependencies are automatically added to Flutter projects through the native part of the Flutter plugin.

Step 4: Initialize the SDK

The following three keys are essential to initialize the SDK in your app:
  1. Organization ID(orgId)
  2. App ID(appId)
  3. Datacenter (dc)
To initialize the SDK, include the following code snippet in the initState() method of  the main.dart file:
import 'package:zohodesk_portal_apikit/zohodesk_portal_apikit.dart' show ZohodeskPortalApikit; ZohodeskPortalApikit.initializeSDK(orgId, appId, dc);
The values of the keys, orgId, appId, and dc appear under the Code Snippet section in the setup page of the ASAP add-on in Zoho Desk.

Code is common for both iOS and Android platforms.

Datacenter values according to the deployment type are as follows:
CN - DataCenter.CN
EU - DataCenter.EU
US - DataCenter.US
IN - DataCenter.IN
AU - DataCenter.AU
JP - DataCenter.JP

Configuring the UI 

The configuration of the help center components is based on your Zoho Desk Help Center settings. To display the available components in your application, you need to include the relevant code snippets.

(i) Home

To display the ASAP SDK Home screen, use the following code snippet:
import 'package:zohodesk_portal_core/zohodesk_portal_core.dart' show ZohodeskPortalCore;
ZohodeskPortalCore.showHome();

(ii) Knowledge Base

To display the Knowledge Base screen, use the following code snippet:
import 'package:zohodesk_portal_kb/zohodesk_portal_kb.dart' show ZohodeskPortalKb;
ZohodeskPortalKb.show();

(iii) Community

To display the Community screen, use the following code snippet:
import 'package:zohodesk_portal_community/zohodesk_portal_community.dart' show ZohodeskPortalCommunity;
ZohodeskPortalCommunity.show();
To display the Add Topic screen, use the following code snippet:
import 'package:zohodesk_portal_community/zohodesk_portal_community.dart' show ZohodeskPortalCommunity;
ZohodeskPortalCommunity.showTopicForm();

(iv) Tickets

To display the Tickets List screen, use the following code snippet:
import 'package:zohodesk_portal_ticket/zohodesk_portal_ticket.dart' show ZohodeskPortalTicket;
ZohodeskPortalTicket.show();
To display the Add Ticket screen, use the following code snippet:
import 'package:zohodesk_portal_ticket/zohodesk_portal_ticket.dart' show ZohodeskPortalSubmitTicket;
ZohodeskPortalSubmitTicket.show();

(v) Live Chat

To display the Live Chat screen, use the following code snippet:
import 'package:zohodesk_portal_chat/zohodesk_portal_chat.dart' show ZDPortalChat;
ZDPortalChat.show();

(vi) Guided Conversations(GC) and Zia

To display GC or Zia, use the following code snippet:
import 'package:zohodesk_portal_gc/zohodesk_portal_gc.dart' show ZDPortalGC;
ZDPortalGC.show();
Code is common for both iOS and Android platforms.

Customizing themes and theme type

Predefined themes

The SDK UI comes with two predefined themes: light and dark.

Android

iOS

Setting up a theme type

You can customize the theme type in the SDK add-on using the below code:
import 'package:zohodesk_portal_configuration/zohodesk_portal_configuration.dart'
show ZohodeskPortalConfiguration;
import 'package:zohodesk_portal_configuration/data/configuration_model.dart'; ZohodeskPortalConfiguration.setTheme(ZDPTheme.system);
ZDPTheme.system: By default, the system theme is selected. If you want to change the theme to light/dark mode, use the following methods:
  1.  ZDPTheme.light : Changes the SDK add-on theme to light irrespective of the system theme.
  2. ZDPTheme.dark: Changes the SDK add-on theme to dark irrespective of the system theme.
Code is common for both iOS and Android platforms.

Customize colors in the particular theme

Android

To customize the colors of the particular theme, follow the below steps:

Step 1: To customize a particular color, include the following method in Android project folder Application class:
ZDPTheme theme = new ZDPTheme.Builder(true) .setColorPrimary(Color.parseColor(colorString)) .setColorAccent(Color.parseColor(colorString)) .build(); ZDPortalConfiguration.setThemeBuilder(theme);
Step 2: Configure the theme type(dark or light) to reflect the customized color within the application as instructed in the Setting up a theme type.


iOS

You can override the default dark and light theme in the SDK add-on
To update the default light theme, include the following method:
ZDPThemeManager.updateLightTheme(theme: <#ZDPThemeProtocol#>)
To update the default dark theme, include the following method:
ZDPThemeManager.updateDarkTheme(theme: <#ZDPThemeProtocol#>)
Here, ZDPThemeProtocol contains the list of properties that represents the most used colors across the SDK, such as primaryTextColor and navigationBarTextColor. All properties in the protocol are optional. You can create any class conforming to this protocol, implement one or more properties, and pass an object of that class to the updateLightTheme or updateDarkTheme method. The colors you set in the class will override the default theme.



Setting up a theme type involves choosing a predefined theme type. The SDK's theme can be customized, but its overall appearance will always be either dark or light, depending on the theme type you have chosen. 

Configuring user authentication in the add-on

(i) Authenticating users:

To authenticate users in the add-on, include the following code snippet:
import 'package:zohodesk_portal_apikit/zohodesk_portal_apikit.dart' show ZohodeskPortalApikit; ZohodeskPortalApikit.login(jwtToken, (isSuccess) { //Sign in success/failed });

In the above code snippet, jwtToken refers to the token that is passed from your app. Read more on how to generate jwttoken
  1. callback will be called after userFetch is executed.
  2. isSuccess will indicate whether the user authentication was successful or not.

(ii) Logging out users:

To log users out from the add-on, include the following code snippet:
import 'package:zohodesk_portal_apikit/zohodesk_portal_apikit.dart' show ZohodeskPortalApikit; ZohodeskPortalApikit.logout((isSuccess) { //Sign out success/failed });
  1. callback will be called after userFetch is executed.
  2. isSuccess will indicate whether the user's logout attempt was successful or not.
Code is common for both iOS and Android platforms.

Push Notifications

Push notifications are sent to the end-users on the following situations:
  1. Ticket priority update
  2. Ticket status update
  3. Agent's reply
  4. Agent's public comment
  5. Agent's reply to the Live Chat

Configuring Push Notifications settings

Ensure that the Push Notifications setting is enabled on the ASAP setup page in Zoho Desk. For more information, refer to 'Push Notifications' section under "Create a mobile add-on in Zoho Desk.

For iOS, create and upload a valid Apple Push Notification Service (APNs) certificate and its password.

Refer to document to learn about Apple Push Notifications.

Enable Push Notifications

Android

To enable Push Notifications, include the following code snippet in the main.dart class file:
import package:zohodesk_portal_apikit/zohodesk_portal_apikit.dart show ZohodeskPortalApikit;
ZohodeskPortalApikit.enablePush(_fcmToken);

iOS

To enable push notifications, include the following method in the iOS application AppDelegate file.
func application
(_ application: UIApplication,
didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data)
{
let token = deviceToken.reduce
("", {$0 + String(format: "%02X", $1)}).uppercased()
ZohoDeskPortalSDK.enablePushNotification
(deviceToken:token, mode: .production)
}

To ensure the accuracy of notifications:

  1. Test the functionality in development mode.
  2. Transition to development mode by replacing ".production" with ".sandbox" in the provided code snippet and Desk Setup.
  3. Remember to switch back to production mode before deploying the application for end-customer usage.

Disable Push Notifications

To disable Push Notifications, include the following code snippet in the main.dart class file:
import package:zohodesk_portal_apikit/zohodesk_portal_apikit.dart show ZohodeskPortalApikit;
ZohodeskPortalApikit.disablePush(_fcmToken);
_fcmToken is the string that is retrieved using 'FirebaseMessaging.instance.getToken().'
 Learn more on how to retrieve the fcm token. Before enabling or disabling Push Notifications, the token must be passed beforehand.
Code is common for both iOS and Android platforms.

Handling Push Notifications

To navigate end-users to the respective screen, depending on the type of push notifications received.

Android

Type of Push Notification
End user navigation page
Single notification
Ticket List
Bulk notification
Ticket Details
Chat notification
Live Chat

Prerequisite: Ensure that the notification icon is set before handling Push Notifications. 
Passing the Push Notification icon:
To pass the icon, include the following code snippet:
ZohodeskPortalConfigurationPlugin.setNotificationIcon(drtawableRes);
drtawableRes refers to the drawable identifier of the icon.
Handling push notifications:
To handle push notifications, include the following code snippet in the FirebaseMessaging.onMessage.listen and _firebaseMessagingBackgroundHandler of main.dart class. Learn more on handling push notifications.
ZohodeskPortalConfiguration.handleNotification(map);
map refers to the notification message data that is retrieved using, remotemessage.data
Ensure that the SDK initialization process is completed before calling the handleNotification function.

iOS

To handle the Push Notifications, include the following code snippet in the application:didReceiveRemoteNotification method in the AppDelegate file.
override func application(_ application: UIApplication, didReceiveRemoteNotification userInfo: [AnyHashable : Any]) 
{
   ZDPortalConfiguration.processRemoteNotification(userInfo: userInfo)
}

Error logging

Enabling the console log allows you to track error messages, helping in the identification and resolution of errors that may arise during execution.
By default, logs are disabled for the SDK. 
To enable the logs, include the following code snippet:
import 'package:zohodesk_portal_apikit/zohodesk_portal_apikit.dart' show ZohodeskPortalApikit;
ZohodeskPortalApikit.enableLogs();
Code is common for both iOS and Android platforms.
The logs should be disabled before releasing the build.

Release Notes

Version 1.0.2

  1. Integrated the latest version (beta version 14) of the Android SDK for Flutter.

Version 1.0.1

  1. Fixed the issue faced during SDK initialization.

    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 iOS SDK

                                                                                                                This document pertains explicitly to help widgets created using the updated new ASAP Setup. 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 ...
                                                                                                              • Introducing ASAP Android SDK

                                                                                                                This document pertains explicitly to help widgets created using the updated new ASAP Setup. 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 ...
                                                                                                              • 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 ...
                                                                                                              • Working with the ASAP SDK for Flutter

                                                                                                                The ASAP SDK provides easy-to-use code snippets that "effortlessly integrate Help Center Components" with your Flutter application, including the following: • Knowledge Base: Provide users with easy access to articles and FAQs, enabling them to find ...
                                                                                                              • 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 ...
                                                                                                                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