このチャット統合では、Salesforce Lightning Web Component（LWC）を使用して、チャット会話用の Agent Assist UI モジュールと統合します。
チャット統合の概要は次のとおりです。
始める前に
Agent Assist UI モジュールを Salesforce と統合するには、次のリソースへのアクセス権が必要です。
Node.js: オペレーティング システムの推奨インストール手順に沿ってインストールします。
Salesforce CLI: オペレーティング システムの推奨インストール手順に沿って操作します。
Google Cloud CLI: 指示に従って
gcloudコマンドをインストールし、gcloud auth loginを使用して認証します。Salesforce: インスタンス URL または Salesforce のログインページでログインし、次の点に注意してください。
- Salesforce の My Domain URL。私のドメイン URL を確認する手順は次のとおりです。
- メニューバー > [設定] メニューに移動します。
- [Setup] をクリックします。
- [クイック検索] ボックスに「My Domain」と入力します。ドメイン名は
MY-DOMAIN-NAME.develop.my.salesforce.comの形式です。
- Salesforce 組織 ID。組織 ID を確認する手順は次のとおりです。
- メニューバー > [設定] メニューに移動します。
- [Setup] をクリックします。
- [クイック検索] ボックスに「組織情報」と入力します。
- Salesforce の My Domain URL。私のドメイン URL を確認する手順は次のとおりです。
-
- 手順に沿って統合を設定します。
- デプロイ スクリプトを実行する前に、
deploy.shを使用するか、プロジェクト ルートの.envファイルで次の環境変数を構成します。AUTH_OPTION:SalesforceLWCに設定します。SALESFORCE_DOMAIN:YOUR_SUBDOMAIN.develop.lightning.force.comに類似したドメイン名。この値は、Salesforce の前提条件でメモしました。https://は含めないように注意してください。SALESFORCE_ORGANIZATION_ID: この値は Salesforce の前提条件でメモしました。
ステップ 1: Salesforce 開発プロジェクトを設定する
Agent Assist UI モジュールの統合を開始する手順は次のとおりです。
次のコードを実行して、Agent Assist 統合リポジトリのクローンを作成し、プロジェクトを開きます。
git clone https://github.com/GoogleCloudPlatform/agent-assist-integrations cd salesforce/aa-lwc
次のコマンドを実行して、UI モジュールの JavaScript ファイルをダウンロードします。このファイルは後で 静的リソースとしてデプロイします。Salesforce では、サードパーティの JavaScript を読み込むために静的リソースが必要です。また、静的リソース ファイルに 5 MB の制限が適用されるため、JavaScript ファイルは ZIP ファイルとしてアップロードされます。
npm run generate-static-resources npm install
ステップ 2: Salesforce 環境を設定する
Agent Assist UI モジュールは、本番環境や開発環境などの特定の環境に統合できます。Salesforce では、これらの環境を組織（org）と呼びます。
Salesforce コンソールで組織を構成する
Salesforce コンソールで、次の手順に沿って Agent Assist 統合用に組織を構成します。
- メニューバー > [設定] メニューに移動し、[設定] をクリックします。[クイック検索] ボックスに「オムニチャネル設定」と入力し、[オムニチャネル設定] をクリックします。
- [オムニチャネルを有効にする] を選択します。
- [新しいウィンドウまたはタブでエージェントをオムニチャネルに自動的にログインさせる] を選択します。
- [保存] をクリックします。
- メニューバー > [設定] メニューに移動し、[設定] をクリックします。[クイック検索] ボックスに「コミュニティ」と入力し、[デジタル エクスペリエンス] > [設定] をクリックします。
- [Enable Experience Workspaces] を選択します。
- [保存] をクリックします。
Salesforce CLI を使用して組織を構成する
Salesforce CLI を使用して Agent Assist 統合用に組織を構成する手順は次のとおりです。
次のコードを実行し、通常使用している Salesforce のログイン情報を使用して CLI を認証します。
npm run login
次のコードを実行して、LWC を組織にデプロイします。
npm run deploy
ステップ 3: 外部クライアント アプリを作成する
Salesforce LWC は、クライアント認証情報 OAuth 2.0 フローを使用して認証を行います。外部クライアント アプリは、クライアント認証情報フローを有効にします。アプリのコンシューマ キーとコンシューマ シークレットを使用して Salesforce LWC を構成し、Salesforce でユーザーを認証します。
- メニューバー > [設定] メニューに移動し、[設定] をクリックします。[クイック検索] ボックスに「外部クライアント アプリ マネージャー」と入力します。
- [External Client App Manager] > [New External Client App] > [Create] をクリックし、次の情報を入力します。
- 外部クライアント アプリ名:
lwc auth - API 名:
lwc_auth - Contact Email:
your_email@example.com - API（OAuth 設定の有効化） > OAuth の有効化: 選択済み
- API (Enable OAuth Settings) > Callback URL:
https://login.salesforce.com/services/oauth2/callback - API（OAuth 設定の有効化）> 選択した OAuth スコープ: ID URL サービスにアクセスする
- API（OAuth 設定の有効化）> クライアント認証情報フローを有効にする: 選択済み
- 外部クライアント アプリ名:
- [作成] をクリックします。
- [External Client App Manager] > [New External Client App] > [Create] をクリックし、次の情報を入力します。
- メニューバー > [設定] メニューに移動し、[設定] をクリックします。[クイック検索] ボックスに「外部クライアント アプリ マネージャー」と入力します。
- 外部クライアント アプリの名前 > [編集] をクリックします。
- [OAuth Policies] > [OAuth Flows and External Client App Enhancements] に移動します。
- [Enable Client Credentials Flow] が選択されていることを確認します。
- [Run As] に、ログイン ユーザー名を入力します。
- [保存] をクリックします。
- メニューバー > [設定] メニューに移動し、[設定] をクリックします。[クイック検索] ボックスに「外部クライアント アプリ マネージャー」と入力します。
- 外部クライアント アプリの名前 > [編集] をクリックします。
- [OAuth Settings] > [App Settings] > [Consumer Key and Secret] に移動します。
- メールで送信された確認コードを入力します。
- コンシューマー キーとコンシューマー シークレットを安全な場所にコピーします。この値は後のステップで必要になります。
CORS とコンテンツ セキュリティ ポリシーを確立する
- メニューバー > [設定] メニューに移動し、[設定] をクリックします。
- [クイック検索] ボックスに「CORS」と入力し、[編集] をクリックします。
- [OAuth エンドポイントの CORS を有効にする] を選択します。
- [保存] をクリックします。
- メニューバー > [設定] メニューに移動し、[設定] をクリックします。
- [クイック検索] ボックスに「信頼できる URL」と入力し、[新しい信頼できる URL] をクリックします。
- 次の情報を入力します。
- API 名:
ui_connector - URL: Agent Assist 統合バックエンドでデプロイした UI コネクタ Cloud Run サービス エンドポイントの URL を入力します。この URL は Cloud Run コンソールで確認できます。例:
https://UI_CONNECTOR_SUBDOMAIN.GCP_REGION.run.app。 - CSP ディレクティブ: すべてのチェックボックスをオンにします。
- [Save & New] をクリックします。
- API 名:
- 次の情報を入力します。
- API 名:
ui_connector_wss - URL: UI Connector サービス エンドポイントの Secure WebSockets URL（
wss://UI_CONNECTOR_SUBDOMAIN.GCP_REGION.run.app）を入力します。 - CSP ディレクティブ: すべてのチェックボックスをオンにします。
- [Save & New] をクリックします。
- API 名:
- 次の情報を入力します。
- API 名:
salesforce_domain - URL:
https://YOUR_SUBDOMAIN.my.salesforce.comの形式で Salesforce ドメインの URL を入力します。 - CSP ディレクティブ: すべてのチェックボックスをオンにします。
- [保存] をクリックします。
- API 名:
ステップ 4: チャット クライアントを構成する
Salesforce で Agent Assist UI モジュールを使用するには、エージェントのデスクトップにチャット クライアントが必要です。
高度なチャットを設定する
メッセンジャーを設定する手順は次のとおりです。
- メニューバー > [設定] メニューに移動し、[設定] をクリックします。[クイック検索] で「キュー」を検索し、[新規] をクリックします。
- 次の情報を入力します。
- ラベル:
Messaging Queue - キュー名:
Messaging_Queue - ルーティング構成:
Messaging_Routing_Configuration
- ラベル:
- [サポートされているオブジェクト] をクリックし、[メッセージング ユーザー] と [メッセージング セッション] を追加します。
- [Queue Members] をクリックし、[User: Your Login User] を追加します。
- [保存] をクリックします。
- 次の情報を入力します。
- メニューバー > [設定] メニューに移動し、[設定] をクリックします。[クイック検索] ボックスに「権限セット」と入力します。
- [Messaging Agents Permission Set] をクリックします。
- [Service Presence Statuses Access] > [Edit] をクリックします。
- ステータス [取り込み中] と [オンライン - メッセージ] を選択します。
- [追加] > [保存] をクリックします。
- メニューバー > [設定] メニューに移動し、[設定] をクリックします。[クイック検索] ボックスに「ユーザー」と入力し、[ユーザー] をクリックします。
- ユーザー名をクリックし、[Service Cloud User] が有効になっていることを確認します。
- ページで [Permission Set License Assignments] を探します。
- [割り当てを編集] をクリックし、
Enhanced Chat Userを選択します。 - [保存] をクリックします。
- ページで [権限セットの割り当て] を探します。
- [Edit Assignments] をクリックし、[Messaging Agent Permission Set] を選択します。
- [追加] > [保存] をクリックします。
- メニューバー > [設定] メニューに移動し、[設定] をクリックします。[クイック検索] ボックスに「メッセージ設定」と入力し、[新しいチャネル] をクリックします。
- [Enhanced Chat] を選択します。
- 名前（
Messaging Channel）を入力します。 - [保存] をクリックします。
- [Routing Type] を [Omni-Queue] に、[Queue] を [Messaging Queue] に設定します。
- [保存] をクリックして、[メッセージ設定] に移動します。
- メッセージ チャネルの名前をクリックし、[有効にする] をクリックします。
- 利用規約を読んだら、利用規約に同意します。
- メニューバー > [設定] メニューに移動し、[設定] をクリックします。[クイック検索] ボックスに「Embedded Service Deployments」と入力し、[New Deployment] をクリックします。
- [拡張チャット] > [次へ] > [ウェブ] > [次へ] をクリックします。
- 次の詳細を入力します。
- 名前:
Messaging Embedded Service Deployment - デベロッパー名: Messaging_Embedded_Service_Deployment
- ドメイン: example.com
- チャネル: メッセージ チャネル
- 名前:
- [保存] をクリックします。デプロイが完了するまで待ちます。
- [Embedded Service Deployment] 設定で、[公開] をクリックします。
- [更新]、[テスト メッセージ] の順にクリックします。
高度なチャットをテストする
メッセンジャーをテストする手順は次のとおりです。
- [テスト メッセージ] をクリックします。
- 新しいタブが読み込まれたら、吹き出しをクリックして新しいテスト会話を開始します。
- 「Test」などのメッセージを送信します。
- Salesforce のブラウザタブに移動します。
- [設定] ツールバーで、[アプリランチャー] メニューをクリックし、[サービス コンソール] を選択します。
- ユーティリティ ツールバーの [オムニチャネル] をクリックします。
- ステータスを [オンライン - メッセージ] に設定します。
- 着信メッセージを承認します。会話のサービス コンソールの新しいタブが開きます。チャットの文字起こしが表示されない。
- メニューバー > [設定] メニューに移動します。
- [ページを編集] をクリックします。
- [コンポーネント] メニューから、[拡張会話] コンポーネントを [会話] ペインにドラッグします。
- [保存] > [有効にする] > [組織のデフォルトとして割り当てる] > [デスクトップ] > [戻る] の順にクリックします。
- ページを更新する。
- ユーティリティ ツールバーの [オムニチャネル] をクリックします。
- ステータスを [オンライン - メッセージ] に設定します。
- [テスト] メッセージに返信して、メッセージ機能が動作していることを確認します。
行き詰まって詳細情報が必要な場合は、包括的な Salesforce Enhanced Chat 設定ガイドをご覧ください。
ステップ 5: Salesforce Lightning Web コンポーネントをインストールする
次の手順に沿って、Lightning Experience エディタを使用して、Salesforce LWC をメッセージ セッション ページに追加します。手順 4 のテスト会話を続けます。
- メニューバー > [設定] メニューに移動し、[ページの編集] をクリックします。
[コンポーネント] サイドバーから、
agentAssistContainerModuleをサイドバーに移動します。前の手順で配置したコンポーネントをクリックします。
次の手順に沿ってフォームのフィールドに入力し、構成の詳細を追加します。
- endpoint: エージェント統合バックエンド UI コネクタの URL。たとえば、Cloud Run コンソールの URL など。例:
https://UI_CONNECTOR_ENDPOINT.GCP_REGION.run.app - features:
会話プロファイルで有効になっている Agent Assist 機能（
CONVERSATION_SUMMARIZATION、KNOWLEDGE_ASSIST_V2、SMART_REPLY、AGENT_COACHINGなど） - channel: チャンネルが
chatであることを示します。 - platform: プラットフォームが
messagingであることを示します。 - conversationProfile: Agent Assist の会話プロファイルのリソース名（例:
projects/GCP_PROJECT_ID/locations/GCP_REGION/conversationProfiles/CONVERSATION_PROFILE_ID） - consumerKey: ステップ 3 の外部クライアント アプリのコンシューマ キー。
- consumerSecret: ステップ 3 の外部クライアント アプリのコンシューマ シークレット。
- endpoint: エージェント統合バックエンド UI コネクタの URL。たとえば、Cloud Run コンソールの URL など。例: