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.

    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







                                                                                            You are currently viewing the help articles of Sprints 1.0. If you are a user of 2.0, please refer here.

                                                                                            You are currently viewing the help articles of Sprints 2.0. If you are a user of 1.0, please refer here.



                                                                                                  • Related Articles

                                                                                                  • Working with the ASAP SDK for iOS

                                                                                                    SDK version 3.0 The ASAP SDK for iOS provides easy access to help the end-users of your iOS app. Using this SDK, you can create and customize an add-on that resides within your app and provides end-users with easy access to the following help center ...
                                                                                                  • Working with the ASAP SDK for React Native

                                                                                                    The ASAP SDK for React Native makes help available within quick reach for the end-users of your mobile app. Using this SDK, you can add and customize an add-on that resides within your iOS/Android app and provides end-users with easy access to your: ...
                                                                                                  • Working with the Zoho GC SDK for iOS

                                                                                                    Mobile applications have proven to be a significant component of business with the advent of smartphones. Businesses offer a range of services through their mobile phone applications for better customer engagement. To improve users' interest in apps, ...
                                                                                                  • Working with the Zoho GC SDK for Android

                                                                                                    Mobile applications have proven to be a significant component of business with the advent of smartphones. Businesses offer a range of services through their mobile phone applications for better customer engagement. To improve users' interest in apps, ...
                                                                                                  • Working with the ASAP Add-Ons for Mobile Platforms

                                                                                                    The ASAP SDKs for mobile platforms--iOS and Android--make help available within quick reach for the end-users of your mobile apps. Using these SDKs, you can create and customize add-ons that reside within your app and provide end-users with easy ...
                                                                                                    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