How to display the Help Center's services as modules on your mobile app?

How to display the Help Center's services as modules on your flutter apps?

In this help article, we will learn how to display the individual help center services as modules on the ASAP help Widget. The modules can be viewed based on their default configuration and the settings configured in your Zoho Desk portal. It's important to note that the default configuration of modules may differ depending on the edition of your Zoho Desk account.

The configuration of the help center components is based on your Zoho Desk Help Center settings.

You need to include the relevant code snippets to display the available components in your application.

Home Screen

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

Knowledge Base Module

To display the Knowledge Base screen, use the following code snippet:

  1. import 'package:zohodesk_portal_kb/zohodesk_portal_kb.dart' show ZohodeskPortalKb;
    ZohodeskPortalKb.show();

Community Module

To display the Community screen, use the following code snippet:

  1. import 'package:zohodesk_portal_community/zohodesk_portal_community.dart' show ZohodeskPortalCommunity;
    ZohodeskPortalCommunity.show();

To display the Add Topic screen, use the following code snippet:

  1. import 'package:zohodesk_portal_community/zohodesk_portal_community.dart' show ZohodeskPortalCommunity;
    ZohodeskPortalCommunity.showTopicForm();

Tickets Module

To display the Tickets List screen, use the following code snippet:

  1. import 'package:zohodesk_portal_ticket/zohodesk_portal_ticket.dart' show ZohodeskPortalTicket;
    ZohodeskPortalTicket.show();

To display the Add Ticket screen, use the following code snippet:

  1. import 'package:zohodesk_portal_ticket/zohodesk_portal_ticket.dart' show ZohodeskPortalSubmitTicket;
    ZohodeskPortalSubmitTicket.show();

SalesIQ Chat Module

Chat provides a real-time communication channel for end-users to interact with a customer support agents.

The following method displays the SalesIQ chat module:

  1. import 'package:zohodesk_portal_siq/zohodesk_portal_siq.dart' show ZohodeskPortalSiq;
    ZohodeskPortalSiq.show();

Guided Conversations Module

To display GC, use the following code snippet:

  1. import 'package:zohodesk_portal_chatkit/zohodesk_portal_chatkit.dart' show ZohodeskPortalChatKit;
    ZohodeskPortalChatKit.showGC();

Info
Code is standard for both iOS and Android platforms.

Session Variables

These variables are dynamically retrieved during the bot conversations. These variables are org-specific and accessible across GC flows.
You can perform these actions with the session variable as mentioned:

Set Session Variable:

  1. import 'package:zohodesk_portal_chatkit/zohodesk_portal_chatkit.dart' show ZohodeskPortalChatKit;
    List<Map<String, String>> sessionVariable = [{"name": "YOUR VARIABLE NAME", "value" : "YOUR VARIABLE VALUE"}, {"name": "YOUR VARIABLE NAME", "value": "YOUR VARIABLE VALUE" }];
    ZohodeskPortalChatKit.setGCSessionVariable();

Update Session Variable:

  1. import 'package:zohodesk_portal_chatkit/zohodesk_portal_chatkit.dart' show ZohodeskPortalChatKit;
    List<Map<String, String>> sessionVariable = [{"name": "YOUR VARIABLE NAME", "value" : "YOUR VARIABLE VALUE"}, {"name": "YOUR VARIABLE NAME", "value": "YOUR VARIABLE VALUE" }];
    ZohodeskPortalChatKit.updateGCSessionVariable();

Answer Bot Module

Answer Bot helps end-users find answers from a bot trained on the available articles in the portal's KB module.

The following methods display the Answer Bot:
  1. import 'package:zohodesk_portal_chatkit/zohodesk_portal_chatkit.dart' show ZohodeskPortalChatKit;
    ZohodeskPortalChatKit.showAnswerBot();
InfoCode is standard for both iOS and Android platforms.

Business Messaging Module

Business Messaging helps end-users chat with agents directly or with a guided conversation flow.

The following methods display the Business Messaging:
  1. import 'package:zohodesk_portal_chatkit/zohodesk_portal_chatkit.dart' show ZohodeskPortalChatKit;
    ZohodeskPortalChatKit.showBM();
Info
Code is standard for both iOS and Android platforms.
You can perform these actions with the session variable as mentioned:

Set Session Variables

  1. import 'package:zohodesk_portal_chatkit/zohodesk_portal_chatkit.dart' show ZohodeskPortalChatKit;
    List<Map<String, String>> sessionVariable = [{"name": "YOUR VARIABLE NAME", "value" : "YOUR VARIABLE VALUE"}, {"name": "YOUR VARIABLE NAME", "value": "YOUR VARIABLE VALUE" }];
    ZohodeskPortalChatKit.setBMSessionVariable();

Update Session Variable:

  1. import 'package:zohodesk_portal_chatkit/zohodesk_portal_chatkit.dart' show ZohodeskPortalChatKit;
    List<Map<String, String>> sessionVariable = [{"name": "YOUR VARIABLE NAME", "value" : "YOUR VARIABLE VALUE"}, {"name": "YOUR VARIABLE NAME", "value": "YOUR VARIABLE VALUE" }];
    ZohodeskPortalChatKit.updateBMSessionVariable();