Pendoリソースセンター内にIntercomのライブチャットを埋め込むと、状況に合わせたガイダンスとプロダクトウォークスルーとともに、リアルタイムのサポートを提供できます。このインテグレーションにより、Intercomのチャットスニペットによって作成されたアクティベーションバッジが削除され、Pendoリソースセンター内でライブチャットが有効になります。リソースセンターは、Pendoバッジまたはアプリケーションのターゲット要素から起動できます。
前提条件
- Pendoの管理者ユーザー権限
- Intercom管理者ユーザー権限もしくはIntercomチャット権限。
- Pendoサブスクリプション用の有効なIntercomインテグレーション。IntercomインテグレーションをPendoサブスクリプションに追加するには、Pendoカスタマーサクセスまたは営業担当者にご連絡ください。
- Intercomチャットスニペットをインストールするためのエンジニアリングリソース。
- 公開済みのPendoリソースセンター。詳細については、「リソースセンターの概要」をご参照ください。
- Pendoエージェントバージョン2.93.2以降。
重要な情報
- Intercomスニペットは、ページヘッダーのPendoインストールスクリプトの下にインストールする必要があります。
- リソースセンターでIntercomチャットモジュールを公開せずにIntercomスニペットをインストールすると、Intercomチャット起動バッジがUIにロードされます。
- リソースセンターは単一のチャットインテグレーションのみをサポートするため、リストにある最初のモジュールのみをロードします。
セットアッププロセス
Intercomチャットとリソースセンターのインテグレーションの設定は、以下の手順で行います。
Intercomチャットがインストールされていて、リソースセンターモジュールが公開されていない場合、IntercomスニペットはUI上にIntercomチャットの起動ボタンをロードします。公開されているリソースセンターにチャットモジュールがある場合、アプリケーションにインストールされているチャットスニペットが検出されるまで、そのモジュールはリソースセンターに表示されません。このインストール順序がフェールセーフとなり、チャットモジュールは機能しているときのみ表示されるようになります。
ステップ 1. Intercomチャットモジュールをリソースセンターに追加する
アプリケーションにスニペットをインストールする前に、チャットモジュールをリソースセンターに追加し、公開する必要があります。これを行わないと、リソースセンターモジュールが追加されるまで、Intercomは起動バッジを表示します。
- ［設定（Settings）］>［インテグレーション（Integrations）］に移動します。
- Intercomインテグレーションを見つけて開きます。
- ［ステージング設定（Staging Setup）］タブを開きます。
- トグルを使って［ステータス（Status）］（ステージング）をオンにします。
- Intercomチャットモジュールのタイトルと説明を追加し、チャットウィンドウの位置（Chat Window Positioning）を選択して詳細を編集します。
- パネルの右下にある［保存（Save）］を選択します。
- 開いた確認ウィンドウで、［公開（Publish）］を選択します。これによって、Intercomチャットモジュールがご使用のリソースセンターに自動的に表示されるわけではありません。この記事のステップ 2で説明したように、引き続きリソースセンターを設定する必要があります。
- ［プロダクト（Product）］タブで、設定を確認し、［クリックして終了（Click to Finish）］を選択します。
これにより、インテグレーションをリソースセンターで設定できるようになり、Intercomチャットがアプリケーションに直接インストールされている場合は、Intercomチャットバッジが非表示になります。
ステップ 2. リソースセンターを構成する
- ［ガイド（Guides）］>［リソースセンター（Resource Center）］に移動します。
- リソースセンターを見つけて開きます。
- リソースセンターの［ドラフト（Draft）］タブで、リソースセンターの最初のページにカーソルを合わせ、［+モジュールを追加（+Add Modules）］を選択します。
- ［Intercomチャット（Intercom Chat）］を選択し、ページの右下隅にある［モジュールを追加（Add Modules）］を選択します。
- 必要に応じて、デフォルトで［全員（Everyone）］に設定されているモジュールのセグメントを編集します。Intercomチャットモジュールにカーソルを合わせ、［モジュールの詳細を表示（View Module Details）］をクリックして、［セグメント（Segment）］で［編集（Edit）］を選択します。必要に応じて［セグメント］を編集します。
- 必要に応じて、 ［ステージングへプッシュ（Push to Staging）］の横にある［自分のアプリで管理（Manage in My App）］を選択して、リソースセンターでモジュールを並べ替えます。
- ［ステージングへプッシュ］を選択します。これにより、本番環境にプッシュする前に、新しいリソースセンターを確認し、ステージング環境でインテグレーションをテストできます。
ステップ 3. リソースセンターを公開する
- 新しいリソースセンターのテストが完了したら、［本番環境へプッシュ（Push to Production）］を選択して、新しく構成したリソースセンターを本番環境に昇格させます。
- アプリケーションに移動してリソースセンターを開き、Intercomチャットモジュールが公開されているリソースセンターで利用できるようになったことを確認します。
ステップ 4. Intercomチャットスニペットをアプリケーションコードにコピーする
チャットモジュールを使用するすべてのページにIntercomチャットスニペットをインストールする必要があります。
Intercomには、チャットスニペットを挿入するためのインストール手順を提供しています。プロセスは、Pendoインストールスクリプトのインストールと同様です。Intercomでは、インストールスクリプトを<body>の閉じタグの前に追加することを推奨していますが、<head>にインストールすることも可能です。Intercomチャットスニペットがページ上に存在しない限り、リソースセンターのIntercomチャットモジュールはロードされません。
Intercomチャットスニペットは、<head>内のPendoインストールスクリプトの下にインストールする必要があります。IntercomスニペットがPendoインストールスクリプトの前にロードされた場合、Intercomはリソースセンターモジュールを使用せずに自分自身のチャット起動ボタンをロードします。
Intercomチャットモジュールの使用方法
エンドユーザーがリソースセンターの［Intercomチャット（Intercom Chat）］モジュールを選択すると、Intercomチャットウィンドウが開き、リソースセンターが非表示となります。これで、サポートエージェントとのチャットが開始されます。
ユーザーがサポートエージェントに接続されると、アプリ内のチャットモジュールですべての会話を行うことができます。
リソースセンターのバッジまたはアクティベーション要素を選択すると、チャットが終了し、チャットウィンドウが閉じます。リソースセンターを再度開くと、ホームページにリソースセンターが表示されます。