React Native向けASAP SDKの操作
React Native向けのASAP SDK（ソフトウェア開発キット）を活用すると、モバイルアプリのエンドユーザーが手軽に利用できるヘルプ機能を提供することができます。SDKを使用することで、iOSやAndroidアプリ内のアドオンを作成したり、カスタマイズしたりできます。また、エンドユーザーが以下の機能に簡単にアクセスできるようになります：
- カスタマーサポートチームへの問い合わせ（問い合わせの送信、サポート担当者とのチャット）
- ナレッジベース（ヘルプ記事へのアクセス）
- ユーザーコミュニティ（アプリを通じた他の顧客とやりとり）
この機能を活用すれば、エンドユーザーはアプリを終了してWebサイトにアクセスし直したり、サポートを受けるためにメールを送信したりする必要はありません。ユーザーはアプリ内でヘルプ記事を検索することができます。顧客満足度の向上につなげることができます。
React Native SDKを使用してアプリにASAPアドオンを追加する方法は以下のとおりです。
手順1：Zoho Deskでモバイルアドオンを作成します。
以下の手順で、アドオンを作成できます。
- Zoho Deskで、［設定］ > ［チャネル］ > ［ASAP］の順に移動します。
- 左側の設定メニューのASAPにて、モバイルの隣にある［+］ボタンをクリックします。モバイルアドオンの作成画面が表示されます。
- ［アドオンの詳細］で、以下の内容を設定します：
- 名前：ASAPアドオンの名前です。この名前は参照用です。アプリの操作画面上には表示されません。
- 有効：ASAPアドオンを有効にする部門を選択します。
- バンドルID: iOSまたはAndroidの項目に、各アプリのバンドルIDを入力します。
- チャット：切り替えボタンを操作することで、チャット機能を有効または無効にできます。メモ：チャットの項目には、ポータルのチャットチャネルにて設定された内容が反映されます。そのため、設定を変更するには、Zoho Deskの設定画面で行う必要があります。
- プッシュ通知：切り替えボタンを操作することで、プッシュ通知を有効または無効にできます。（詳細については、このドキュメントの手順7をご参照ください。）メモ：通知を有効にするには、JWT方式でのユーザー認証が必須となります。匿名ユーザーに対して、問い合わせに関するプッシュ通知を送信することはできません。
- 認証方法：このアドオンにおけるユーザーの認証方法を設定します。
- 匿名 - この方法では、エンドユーザーはゲストユーザーとみなされます。ゲストユーザーが行える操作は、問い合わせの送信、ユーザーコミュニティでの投稿内容の表示、サポート担当者とのチャット、に限定されます。自分が送信した問い合わせを表示したり、ユーザーコミュニティに参加したりすることはできません。
- JWT - この方法では、エンドユーザーは認証済みユーザーとみなされます。ゲストユーザーが行える操作に加えて、認証済みユーザーは、自分が送信した問い合わせのステータスを表示したり、問い合わせに返信やコメントしたり、ユーザーコミュニティに参加したりすることもできます。コミュニティでは、トピックのフォロー、トピックの追加、既存の投稿へのコメントの追加など、さまざまな操作を行うことができます。
- ［保存］をクリックします。
メモ：チャット機能を有効にしたり、プッシュ通知を送信したりするには、バンドルIDが必須です。
コードのセクションが新しく表示されます。このセクションには組織ID、アプリID、配置の種類（データセンター）といったアプリの詳細が表示されます。これらの詳細データは、アプリでASAP SDKの初期設定を行う際に必要です。
手順2：プラグインをインストールします。
プラグインをインストールするには、ターミナルでReact Nativeのプロジェクトのディレクトリーを開いて、以下のコマンドを実行します：
npm install react-native-zohodesk-portal-sdk --save react-native link react-native-zohodesk-portal-sdk
手順3：アプリにSDKを追加します。
Androidアプリの場合、この手順でMavenを使用します。
React Native向けのASAP SDKは、「maven.zohodl.com」でリリースされています。そのため、URLをAndroidのプロジェクトで指定する必要があります。指定するには、Android StudioでReact NativeのプロジェクトのAndroidフォルダーを開いて、「build.gradle」ファイルのプロジェクトに以下のMavenのレポジトリを追加します。
allprojects{ repositories{ maven { url 'https://maven.zohodl.com/'} } }
iOSアプリの場合、この手順でCocoaPodsを使用します。
React NativeのプロジェクトにすでにPodfileが存在する場合、コマンド「pod install」を実行します。
プロジェクトにPodfileが存在しない場合、iOSフォルダーで以下のコマンドを実行します：
pod init
次に、以下のコードを使用して、React Native SDKの「RNZohodeskPortalSdk」をPodfileに追加します：
target 'YourProjectName' do pod 'RNZohodeskPortalSdk',:path => '../node_modules/react-native-zohodesk-portal-sdk/ios/RNZohodeskPortalSdk.podspec' end
その後、iOSで直接コマンド「pod install」を実行します。
Podfileをインストールしたら、XcodeのiOSのプロジェクトを開いて、［Build Settings］ > ［Build Options］の順に移動します。Build Optionsで、「ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES」を「Yes」に設定します。
次に、以下のキーとそれぞれの説明をアプリの「Info.plist」ファイルに追加します。
- Privacy - Camera Usage Description
- Privacy - Microphone Usage Description
- Privacy - Photo Library Usage Description
手順4：SDKの初期設定を行います。
SDKの初期設定を行うには、以下のコードをJavaScriptのコード内に追加します。
import { ZohoDeskPortalSDK }from 'react-native-zohodesk-portal-sdk'; ZohoDeskPortalSDK.initialise("orgId", "appId", "dc");
手順5：操作画面を設定し、要件に合わせてヘルプタブを追加、または除外します。
Zoho Deskのホーム画面を表示するには、以下のコードを使用します。
import { ZDPortalHome } from 'react-native-zohodesk-portal-sdk'; ZDPortalHome.show();
ナレッジベースを表示するには、以下のコードを使用します。
import { ZDPortalKB } from 'react-native-zohodesk-portal-sdk'; ZDPortalKB.show();
コミュニティタブを表示するには、以下のコードを使用します。
import { ZDPortalCommunity } from 'react-native-zohodesk-portal-sdk'; ZDPortalCommunity.show();
問い合わせの一覧を表示するには、以下のコードを使用します。
import { ZDPortalTickets } from 'react-native-zohodesk-portal-sdk'; ZDPortalTickets.show();
問い合わせの送信フォームを表示するには、以下のコードを使用します。
import { ZDPortalSubmitTicket } from 'react-native-zohodesk-portal-sdk'; ZDPortalSubmitTicket.show();
チャットタブを表示するには、以下のコードを使用します。
import { ZDPortalChat } from 'react-native-zohodesk-portal-sdk'; ZDPortalChat.show();
手順6：アドオンでのユーザー認証を設定します。
アドオンでユーザーを認証するには、以下のコードを使用します。
ZohoDeskPortalSDK.isUserSignedIn((isSignedIn) => { if(!isSignedIn) { ZohoDeskPortalSDK.setUserToken(curEmailId, (msg) => { alert('Success Alert '+msg); } , msg => { alert('Failure Alert '+msg); }); } else { alert("User is already signed in"); } })
アドオンからユーザーをログアウトさせるには、以下のコードを使用します。
import { ZohoDeskPortalSDK } from 'react-native-zohodesk-portal-sdk'; ZohoDeskPortalSDK.logout((msg)=>{ alert("Success "+msg); }, (msg) =>{ alert("Failure "+msg); });
手順7：プッシュ通知を設定します。
前提条件
アドオンにプッシュ通知が実装されていることを確認してください。
Androidアプリの場合
この手順では、以下の2種類の設定を行います：
- 手順1で作成したモバイルアドオンのプッシュ通知を有効にします。この設定は、Zoho DeskのASAP設定画面にて行います。
- アプリのFCMキーを取得し、アドオンに追加します。このFCMキー（トークン）を取得するには、Firebaseコンソールで次の順に移動します：［プロジェクトの設定］ > ［クラウドメッセージング］ > ［サーバーキー］
上記の2つ目の設定を行う際に、アドオンのAndroidのプロジェクトにFCMトークンを指定する必要があります。指定するには、「MainApplication.java」クラスの「oncreate()」メソッドに以下のコードを追加します。
RNZohodeskPortalSDK.setFirebaseId(FirebaseInstanceId.getInstance().getToken());
iOSアプリの場合
はじめに、APNs（Apple プッシュ通知サービス）証明書を作成して、アップロードします。その後、APNs証明書のp12ファイルをパスワードと共にアップロードします。
プッシュ通知を有効にするには、「UNUserNotificationCenterDelegate」プロトコルを使用してクラス「AppDelegate」を設定します。そして、以下のヘッダーを「AppDelegate.h」ファイル内にインポートします。
#import <UserNotifications/UserNotifications.h> #import <RNZohodeskPortalSdk/RNZohoDeskPortalSDK.h>
次に、「AppDelegate.m」ファイルにて「application:didRegisterForRemoteNotificationsWithDeviceToken」メソッドを使用して、「DeviceID」の値を取得します。以下のコードを使用して、取得した値を「RNZohodeskPortalSdk」に追加します。
const unsigned *tokenBytes = [deviceToken bytes]; NSString *hexToken = [NSString stringWithFormat:@"%08x%08x%08x%08x%08x%08x%08x%08x", ntohl(tokenBytes[0]), ntohl(tokenBytes[1]), ntohl(tokenBytes[2]), ntohl(tokenBytes[3]), ntohl(tokenBytes[4]), ntohl(tokenBytes[5]), ntohl(tokenBytes[6]), ntohl(tokenBytes[7])]; [RNZohoDeskPortalSDK setDeviceIDForZDPortal:hexToken];
プッシュ通知の有効化
プッシュ通知を有効にするには、以下のコードをJavaScriptのコード内に追加します。
import { ZohoDeskPortalSDK } from 'react-native-zohodesk-portal-sdk'; ZohoDeskPortalSDK.enablePush();
プッシュ通知の無効化
プッシュ通知を無効にするには、以下のコードをJavaScriptのコード内に追加します。
import { ZohoDeskPortalSDK } from 'react-native-zohodesk-portal-sdk'; ZohoDeskPortalSDK.disablePush();
プッシュ通知の各種設定
Androidアプリの場合
プッシュ通知の操作画面や移動画面を設定するには、クラス「FirebaseMessagingService」のメソッド「onMessageReceived()」に以下のコードを追加します。
RNZohodeskPortalSDK.handleNotification(getApplicationContext(), remoteMessage.getData(), icon);
iOSアプリの場合
プッシュ通知の操作画面や移動画面を設定するには、「AppDelegate.m」ファイルのメソッド「application:didReceiveRemoteNotification」に以下のコードを追加します。
[RNZohoDeskPortalSDK processRemoteNotification:userInfo];
手順8：アドオンのテーマをカスタマイズします。
Androidアプリの場合
アドオンのテーマをカスタマイズするには、はじめにカスタムテーマのリソースIDが必要です。Androidプロジェクトのクラス「MainApplication.java」内のメソッド「oncreate()」に、以下のコードを追加します。
RNZohodeskPortalSDK.setThemeResource(resourceId);
「resourceId」の値には、R.style.DeskLightTheme、R.style.DeskDarkThemeのいずれか、またはこれらの2種類のテーマのいずれかを拡張する他のテーマから指定する必要があります。
iOSアプリの場合
SDKの操作画面には、2種類の標準テーマが用意されています。ライトテーマとダークテーマです。いずれかのテーマを適用するには、以下のコードを使用します。
#import <RNZohodeskPortalSdk/RNZohoDeskPortalSDK.h> [RNZohoDeskPortalSDK setTheme:RNZDThemeLight];
手順9：アドオンのエラーログを設定します。
React Native向けASAP SDKには、アドオンの利用中に発生したエラーを修復するオプションが用意されています。このオプションには、SDKのログが使用されます。
アドオンでログを有効にするには、以下のコードを使用します。
import { ZohoDeskPortalSDK } from 'react-native-zohodesk-portal-sdk'; ZohoDeskPortalSDK.enableLogs();
アドオンでログを無効にするには、以下のコードを使用します。
import { ZohoDeskPortalSDK } from 'react-native-zohodesk-portal-sdk'; ZohoDeskPortalSDK.disableLogs();
Zoho CRM 管理者向けトレーニング
「導入したばかりで基本操作や設定に不安がある」、「短期間で集中的に運用開始できる状態にしたい」、「運用を開始しているが再度学び直したい」 といった課題を抱えられているユーザーさまに向けた少人数制のオンライントレーニングです。
日々の営業活動を効率的に管理し、導入効果を高めるための方法を学びましょう。
- Zoho Workerly Home
- Forums
- Connect With Us:
- Zoho Recruit Home
- Forums
- Connect With Us:
New to Zoho Workerly?
New to Zoho Recruit?
New to Zoho CRM?
New to Zoho Projects?
New to Zoho Sprints?
New to Zoho Assist?
Related Articles
iOS向けASAP SDKの操作
SDK バージョン2.0 はじめに iOS向けのASAP SDK（ソフトウェア開発キット）を活用すると、iOSアプリのエンドユーザーが手軽に利用できるヘルプ機能を提供することができます。SDKを使用することで、アプリ内のアドオンを作成したり、カスタマイズしたりできます。また、エンドユーザーが以下の機能に簡単にアクセスできるようになります： カスタマーサポートチームへの問い合わせ（問い合わせの送信、サポート担当者とのチャット） ナレッジベース（ヘルプ記事へのアクセス） ...Android向けASAP SDKの操作
SDK バージョン2.0 はじめに Android向けのASAP SDK（ソフトウェア開発キット）を活用すると、Androidアプリのエンドユーザーが手軽に利用できるヘルプ機能を提供することができます。SDKを使用することで、アプリ内のアドオンを作成したり、カスタマイズしたりできます。また、エンドユーザーが以下の機能に簡単にアクセスできるようになります： カスタマーサポートチームへの問い合わせ（問い合わせの送信、サポート担当者とのチャット） ナレッジベース（ヘルプ記事へのアクセス） ...CSSの変更によるヘルプセンターのカスタマイズ
ヘルプセンターにおいて、記事の詳細画面のカスタマイズ、問い合わせフォームやトピックリストの追加など、特定の項目を変更したい場合があります。ヘルプセンター全体での編集が必要な場合や、特定のカテゴリーの編集が必要な場合もあります。このような場合、CSS（Cascading Style Sheets）を利用してヘルプセンターのスタイルをカスタマイズできます。 ...