Flutter向けのどこでもサポートSDK(ソフトウェア開発キット)を活用すると、Flutterで開発したモバイルアプリ内にZoho Deskのサポート機能をかんたんに埋め込むことができます。
これにより、アプリの利用者に対して、以下の機能を提供できます。
- サポート窓口への問い合わせ(問い合わせの送信)
- ナレッジベース(製品やサービスに関するヘルプやよくある質問)の参照
- コミュニティの利用(他の利用者やサポート担当者とのやりとり)
- サポート担当者とのチャット、Ziaボットや自動ガイドボットの利用
どこでもサポートSDKの設定
この記事では、Flutterで開発したモバイルアプリに、どこでもサポートの機能を埋め込むために必要な設定を紹介します。このページに記載されている設定手順を実施するだけで、アプリ内にサポート機能をかんたんに埋め込むことができます。
必要な設定は以下のとおりです。
手順1:Zoho Deskでのどこでもサポートのアドオンの設定
どこでもサポートのアドオンの設定手順は以下のとおりです。
Zoho Deskで画面右上の設定アイコン→[経路]→[どこでもサポート]の順に移動します。
画面左側にあるメニューで[どこでもサポート]の欄にある[モバイル]にカーソルを重ね、[+](追加)アイコンをクリックします。モバイル用アドオンの作成ページが表示されます。
[アドオンの詳細]で、以下の内容を設定します。
[名前]:どこでもサポートのアドオンの名前です。この名前は参照用です。アプリの操作画面上には表示されません。
[有効]:どこでもサポートのアドオンを有効にする部門を選択します。
[バンドルID]:[Android]または[iOS]の項目にアプリのバンドルIDを入力します。
チャット機能を有効にしたり、プッシュ通知を送信したりするには、バンドルIDが必須です。
[チャット]:切り替えボタンをクリックすると、チャット機能を有効/無効にできます。また、必要に応じて、[Zia](質問に関連するナレッジベース記事の提示)や[自動ガイドボット](案内フローに基づく自動応答チャット)を有効にすることも可能です。
どこでもサポートのチャット機能には、ポータルでのチャット機能の設定内容が反映されます。そのため、チャット機能の設定を変更するには、画面右上の設定アイコンをクリックし、[経路]の欄にある[チャット]をクリックします。 [プッシュ通知]:切り替えボタンをクリックすると、プッシュ通知を有効/無効にできます。
通知を有効にするには、JWT方式でのユーザー認証が必須となります。問い合わせに関するプッシュ通知を匿名ユーザーに対して送信することはできません。
[認証方法]:このアドオンにおけるユーザーの認証方法を設定します。
匿名ユーザー(JWT認証なし):ユーザー認証を行わない場合、利用者はゲストユーザー(匿名ユーザー)としてみなされます。ゲストユーザーによって実行できる操作は、ナレッジベースへのアクセス、問い合わせ送信、コミュニティでの投稿の表示、サポート担当者とのチャットに限定されます。自分が送信した問い合わせを表示したり、コミュニティで投稿したりすることはできません。
認証ユーザー(JWT認証あり):JWT方式でのユーザー認証を行う場合、利用者は認証ユーザーとみなされます。認証ユーザーは、ゲストユーザーが行える操作に加えて、送信した問い合わせのステータスの表示、問い合わせへの返信やコメントの追加を行うことができます。また、コミュニティでは、トピック(投稿)の追加やフォロー、既存の投稿へのコメントの追加など、さまざまな操作を行うことができます。
4.[保存する]をクリックします。
保存すると、コード欄が表示されます。このコード欄では組織ID、アプリID、データセンターなどの情報を確認できます。これらの情報は、アプリでどこでもサポートSDKの初期設定を行う際に必要です。
手順2:プラグインのインストール
プラグインをインストールするには、以下のコマンドを実行します。
flutter pub add zohodesk_portal_services
または
「pubspec.yaml」ファイルに以下のコードを追加します。
dependencies:
zohodesk_portal_services: version
手順3:依存関係ファイルの取得
Android:
どこでもサポートSDKの依存関係ファイルは、「maven.zohodl.com」からダウンロードできます。Androidプロジェクトで依存関係ファイルを取得するには、プロジェクトの「build.gradle」ファイルにMavenのURLを追加する必要があります。
追加するには、Android StudioでFlutterプロジェクトのAndroidフォルダーを開いて、「build.gradle」ファイルのプロジェクトに以下のコードを追加します。
allprojects
{ repositories { maven { url 'https://maven.zohodl.com/'} maven { url 'https://downloads.zohocdn.com/wmslibrary' } } }
iOS:
iOSの場合、iOS用の依存関係ファイルを個別にインポートする必要はありません。iOSのSDKの依存関係ファイルは、Flutterのプラグインを通じて自動でFlutterプロジェクトに追加されます。
手順4:SDKの初期設定
次に、アプリでどこでもサポートSDKの初期設定を行います。この手順には、以下の3つのキーが必要です。
- 組織ID(orgID)
- アプリID(appID)
- データセンター(dc)
SDKの初期設定を行うには、「main.dart」ファイルのinitState()メソッドに以下のコードを追加します。
import 'package:zohodesk_portal_apikit/zohodesk_portal_apikit.dart' show ZohodeskPortalApikit; ZohodeskPortalApikit.initializeSDK(orgId, appId, dc);
組織ID(orgId)、アプリID(appId)、データセンター(dc)の各キーの値は、Zoho Deskのどこでもサポートのアドオンの設定画面にあるコード欄から確認できます。
上記のコードは、iOSとAndroidの両方に共通して利用できます。
各データセンターに対応する値は、以下のとおりです。
中国(CN) - DataCenter.CN
EU地域(EU) - DataCenter.EU
アメリカ(US) - DataCenter.US
インド(IN) - DataCenter.IN
オーストラリア(AU) - DataCenter.AU
日本(JP) - DataCenter.JP
各サポートメニューの表示
どこでもサポートでは、Zoho Deskのヘルプセンターの設定に基づいて要素が表示されます。アプリ内で各サポートメニューを表示するには、以下のコードを含める必要があります。
(1) ホーム画面
ホーム画面を表示するには、以下のコードを使用します。
import 'package:zohodesk_portal_core/zohodesk_portal_core.dart' show ZohodeskPortalCore; ZohodeskPortalCore.showHome();
(2) ナレッジベース(ヘルプやよくある質問)
ナレッジベース画面を表示するには、以下のコードを使用します。
import 'package:zohodesk_portal_kb/zohodesk_portal_kb.dart' show ZohodeskPortalKb;
ZohodeskPortalKb.show();
(3) コミュニティ
コミュニティ画面を表示するには、以下のコードを使用します。
import 'package:zohodesk_portal_community/zohodesk_portal_community.dart' show ZohodeskPortalCommunity;
ZohodeskPortalCommunity.show();
トピックの追加画面を表示するには、以下のコードを使用します。
import 'package:zohodesk_portal_community/zohodesk_portal_community.dart' show ZohodeskPortalCommunity;
ZohodeskPortalCommunity.showTopicForm();
(4) 問い合わせ
問い合わせの一覧を表示するには、以下のコードを使用します。
import 'package:zohodesk_portal_ticket/zohodesk_portal_ticket.dart' show ZohodeskPortalTicket;
ZohodeskPortalTicket.show();
問い合わせの追加画面を表示するには、以下のコードを使用します。
import 'package:zohodesk_portal_ticket/zohodesk_portal_ticket.dart' show ZohodeskPortalSubmitTicket;
ZohodeskPortalSubmitTicket.show();
(5) チャット
チャット画面を表示するには、以下のコードを使用します。
import 'package:zohodesk_portal_chat/zohodesk_portal_chat.dart' show ZDPortalChat;
ZDPortalChat.show();
(6) 自動ガイドボットとZia
自動ガイドボットやZiaの画面を表示するには、以下のコードを使用します。
import 'package:zohodesk_portal_gc/zohodesk_portal_gc.dart' show ZDPortalGC;
ZDPortalGC.show();
上記のコードは、iOSとAndroidの両方に共通して利用できます。
テーマのカスタマイズ
標準のテーマ
操作画面の標準テーマには、ライトとダークの2種類が用意されています。
Android
iOS
テーマの種類の設定
どこでもサポートの操作画面のテーマをカスタマイズするには、以下のコードを使用します。
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:操作画面のテーマは、使用中のOSのテーマと連動します。ライトモード/ダークモードに変更したい場合は、以下のメソッドを使用します。
- ZDPTheme.light:使用中のOSのテーマに関わらず、ライトテーマが適用されます。
- ZDPTheme.dark:使用中のOSのテーマに関わらず、ダークテーマが適用されます。
上記のコードは、iOSとAndroidの両方に共通して利用できます。
テーマのカスタマイズ
Android
特定のテーマで、操作画面の背景や要素の色をカスタマイズしたい場合、以下の手順を実施します。
手順1:以下のコードをAndroidプロジェクトのApplicationクラスに追加します。
ZDPTheme theme = new ZDPTheme.Builder(true) .setColorPrimary(Color.parseColor(colorString)) .setColorAccent(Color.parseColor(colorString)) .build(); ZDPortalConfiguration.setThemeBuilder(theme);
手順2:この記事内の「
テーマの種類の設定」に記載されている手順に従って、ダークテーマまたはライトテーマのいずれかを設定します。
iOS
設定したテーマ(ダークテーマ/ライトテーマ)を上書き(オーバーライド)できます。
ライトテーマを適用している場合は、以下のメソッドを使用します。
ZDPThemeManager.updateLightTheme(theme: <#ZDPThemeProtocol#>)
ダークテーマを適用している場合は、以下のメソッドを使用します。
ZDPThemeManager.updateDarkTheme(theme: <#ZDPThemeProtocol#>)
「ZDThemeProtocol」には、どこでもサポートで使用したい色の属性のリストを指定できます(例:「primaryTextColor」、「navigationBarTextColor」)。なお、プロトコル内の属性はすべて任意です。独自のクラスを作成した上で、対象のクラスの属性を実装し、「updateLightTheme」メソッドや「updateDarkTheme」メソッドの「ZDThemeProtocol」内に複数指定できます。これにより、標準のテーマの色をクラスで設定した色に変更することができます。
テーマの種類の設定では、ライトテーマまたはダークテーマのいずれかを選択する必要があります。テーマはカスタマイズ可能ですが、画面表示の全体的なデザインには、ダークテーマまたはライトテーマのいずれかが適用されます。
ユーザー認証の設定
(1) ユーザーの認証
どこでもサポートのアドオンでユーザー認証を行うには、以下のコードを使用します。
JWTによるユーザー認証の詳細については、
こちらをご参照ください。
import 'package:zohodesk_portal_apikit/zohodesk_portal_apikit.dart' show ZohodeskPortalApikit; ZohodeskPortalApikit.login(jwtToken, (isSuccess) { //Sign in success/failed });
上記のコード内の
「jwtToken」には、アプリによって指定されたトークンを指定します。JWTトークンの生成方法の詳細については、
こちらをご参照ください。
- 「callback」は、「userFetch」が実行された後に呼び出されます。
- 「isSuccess」は、ユーザー認証が成功したかどうかを示します。
(2) ユーザーのログアウト
ユーザーのログアウトには、以下のコードを使用します。
import 'package:zohodesk_portal_apikit/zohodesk_portal_apikit.dart' show ZohodeskPortalApikit; ZohodeskPortalApikit.logout((isSuccess) { //Sign out success/failed });
- 「callback」は、「userFetch」が実行された後に呼び出されます。
- 「isSuccess」は、ユーザーのログアウトが成功したかどうかを示します。
上記のコードは、iOSとAndroidの両方に共通して利用できます。
プッシュ通知
プッシュ通知は、以下のタイミングで送信されます。
- 問い合わせの優先度の更新
- 問い合わせのステータスの更新
- 担当者による返信
- 担当者によるコメント
- 担当者によるチャットの返信
プッシュ通知の有効化に必要な設定
Android
iOS
プッシュ通知の有効化には、p12形式のAPNs(Apple プッシュ通知サービス)証明書のアップロードが必要です。証明書をアップロードするには、以下の手順を実施します。
1.APNs(Apple プッシュ通知サービス)証明書を作成して、ダウンロードします。
2.APNs証明書のp12ファイルをパスワード付きでアップロードします。
次に、「UNUserNotificationCenterDelegate」プロトコルを使用して「AppDelegate」クラスを設定します。その後、「AppDelegate」ファイルで以下をインポートします。
import UserNotifications import zohodesk_portal_apikit
「AppDelegate」ファイルで「application:didRegisterForRemoteNotificationsWithDeviceToken」メソッドを使用して「DeviceID」の値を取得します。
func application(_ application: UIApplication,didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) { let token = deviceToken.reduce("", {$0 + String(format: "%02X", $1)}).uppercased() ZohodeskPortalApikitPlugin.deviceIDForZDPortal = token }
プッシュ通知の有効化/無効化
Android
どこでもサポートのアドオンでプッシュ通知を有効にするには、「main.dart」クラスに以下のコードを追加します。
import package:zohodesk_portal_apikit/zohodesk_portal_apikit.dart show ZohodeskPortalApikit; ZohodeskPortalApikit.enablePush(_fcmToken);
どこでもサポートのアドオンでプッシュ通知を無効にするには、「main.dart」クラスに以下のコードを追加します。
import package:zohodesk_portal_apikit/zohodesk_portal_apikit.dart show ZohodeskPortalApikit; ZohodeskPortalApikit.disablePush(_fcmToken);
「_fcmToken」は、FirebaseMessaging.instance.getToken()メソッドを使用して取得できます。
FCMトークンの取得方法の詳細については、
こちらをご参照ください。
iOS
プッシュ通知を有効/無効にするには、あらかじめ
トークンを指定する必要があります。
プッシュ通知を有効にするには、以下のコードを追加します。
import package:zohodesk_portal_apikit/zohodesk_portal_apikit.dart show ZohodeskPortalApikit; ZohodeskPortalApikit.enablePush(null);
プッシュ通知を無効にするには、以下のコードを追加します。
import package:zohodesk_portal_apikit/zohodesk_portal_apikit.dart show ZohodeskPortalApikit; ZohodeskPortalApikit.disablePush(null);
プッシュ通知の処理の設定
プッシュ通知の処理の設定を行うと、アプリの利用者によってプッシュ通知がタップされた際に、プッシュ通知の種類に応じて異なる画面を表示することができます。
Android
プッシュ通知の種類 | 表示する画面 |
個別通知 | 問い合わせの一覧ページ |
一括通知 | 問い合わせの詳細ページ |
チャットに関する通知 | チャット画面 |
前提条件:プッシュ通知の処理を設定する前に、プッシュ通知用のアイコンを設定しておく必要があります。 プッシュ通知用のアイコンの設定:
プッシュ通知のアイコンを指定するには、以下のコードを使用します。
ZohodeskPortalConfigurationPlugin.setNotificationIcon(drtawableRes);
「drtawableRes」には、アイコン用のドローアブルリソースのIDを指定します。
プッシュ通知の処理の設定
プッシュ通知の処理の設定を行うには、
「main.dart」クラスの
「FirebaseMessaging.onMessage.listen」と
「_firebaseMessagingBackgroundHandler」に以下のコードを追加します。プッシュ通知の処理の詳細については、
こちらをご参照ください。
ZohodeskPortalConfiguration.handleNotification(map);
「map」には、「remotemessage.data」を使用して取得した通知メッセージのデータを指定します。
「handleNotification」関数は、
SDKの初期設定が完了してから呼び出すようにしてください。
iOS
プッシュ通知の種類 | 移動先のページ |
個別通知 | 問い合わせの一覧 |
一括通知 | 問い合わせの詳細 |
プッシュ通知の設定を行うには、「AppDelegate」ファイルの「application:didReceiveRemoteNotification」メソッドに以下のコードを追加します。
override func application(_ application: UIApplication, didReceiveRemoteNotification userInfo: [AnyHashable : Any]) { if (application.applicationState == .background) { ZDPortalConfiguration.processRemoteNotification(userInfo: userInfo) } }
ログの有効化
どこでもサポートの利用中に発生したエラーの解決には、ログが役立ちます。
初期設定では、ログは無効になっています。
ログを有効にするには、以下のコードを追加します。
import 'package:zohodesk_portal_apikit/zohodesk_portal_apikit.dart' show ZohodeskPortalApikit; ZohodeskPortalApikit.enableLogs();
上記のコードは、iOSとAndroidの両方に共通して利用できます。
ログは、ビルドのリリース前に無効にしておく必要があります。
リリースノート
バージョン1.0.2
- Android SDKの最新バージョン(ベータ版バージョン14)に対応
バージョン1.0.1