Salesforce チャットの統合

このチャット統合では、Salesforce Lightning Web Component（LWC）を使用して、チャット会話用の Agent Assist UI モジュールと統合します。

チャット統合の概要は次のとおりです。

Salesforce との Agent Assist チャット統合のアーキテクチャ

始める前に

Agent Assist UI モジュールを Salesforce と統合するには、次のリソースにアクセスする必要があります。

  • Node.js

  • Salesforce CLI: オペレーティング システムの推奨インストール手順に沿ってインストールします。

  • Google Cloud CLI: 手順に沿って gcloud コマンドをインストールし、gcloud auth login を使用して認証します。

  • Salesforce: インスタンス URL または Salesforce のログインページでログインし、 次の点に注意してください。

    • Salesforce の My Domain URL 。My Domain URLを確認する手順は次のとおりです。
      1. メニューバー > [設定] メニューに移動します。
      2. [設定] をクリックします。
      3. [クイック検索] ボックスに「My Domain 」と入力します。ドメイン名は MY-DOMAIN-NAME.develop.my.salesforce.com の形式です。
    • Salesforce 組織 ID。組織 ID を確認する手順は次のとおりです。
      1. メニューバー > [設定] メニューに移動します。
      2. [設定] をクリックします。
      3. [クイック検索] ボックスに「Company Information 」と入力します。

  • Agent Assist 統合バックエンド:

    1. 手順に沿って統合を設定します。
    2. デプロイ スクリプトを実行する前に、プロジェクト ルートの 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 モジュールの統合を開始する手順は次のとおりです。

  1. 次のコードを実行して、Agent Assist 統合リポジトリのクローンを作成し、プロジェクトを開きます。

    git clone https://github.com/GoogleCloudPlatform/agent-assist-integrations
cd salesforce/aa-lwc

  2. 次のコマンドを実行して、 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 統合用に組織を構成します。

  1. メニューバー > [設定] メニューに移動し、[設定] をクリックします。 In the [Quick Find] box, enter Omni-Channel Settings, then click [Omni-Channel Settings].
    1. [Enable Omni-Channel] を選択します。
    2. [Automatically log agents into Omni-Channel in the new window or tab] を選択します。
    3. [保存] をクリックします。
  2. メニューバー > [設定] メニューに移動し、[設定] をクリックします。 In the[Quick Find] box, enter Communities, then click [Digital Experiences] > [Settings].
    1. [Enable Experience Workspaces] を選択します。
    2. [保存] をクリックします。

Salesforce CLI で組織を構成する

Salesforce CLI を使用して Agent Assist 統合用に組織を構成する手順は次のとおりです。

  1. 次のコードを実行し、通常使用する Salesforce ログイン情報を使用して CLI を認証します。

    npm run login

  2. 次のコードを実行して、LWC を組織にデプロイします。

    npm run deploy

ステップ 3: 外部クライアント アプリを作成する

Salesforce LWC は、クライアント認証情報 OAuth 2.0 フローを使用して認証を行います。外部クライアント アプリを使用すると、クライアント認証情報フローを有効にできます。アプリのコンシューマ キーとコンシューマ シークレットを使用して Salesforce LWC を構成し、Salesforce でユーザーを認証します。

  1. メニューバー > [設定] メニューに移動し、[設定] をクリックします。[クイック検索] ボックスに「External Client App Manager 」と入力します。
    1. [External Client App Manager] > [New External Client App] > [Create] をクリックし、次の情報を入力します。
      • External Client App Name: lwc auth
      • API Name: lwc_auth
      • Contact Email: your_email@example.com
      • API (Enable OAuth Settings) > Enable OAuth: 選択済み
      • API (Enable OAuth Settings) > Callback URL: https://login.salesforce.com/services/oauth2/callback
      • API (Enable OAuth Settings) > Selected OAuth Scopes: Access the identity URL service
      • API (Enable OAuth Settings) > Enable Client Credentials Flow: 選択済み
    2. [作成] をクリックします。
  2. メニューバー > [設定] メニューに移動し、[設定] をクリックします。[クイック検索] ボックスに「External Client App Manager 」と入力します。
    1. 外部クライアント アプリの名前 > [編集] をクリックします。
    2. [OAuth Policies] > [OAuth Flows and External Client App Enhancements] に移動します。
    3. [Enable Client Credentials Flow] が選択されていることを確認します。
    4. [Run As] にログイン ユーザー名を入力します。
    5. [保存] をクリックします。
  3. メニューバー > [設定] メニューに移動し、[設定] をクリックします。[クイック検索] ボックスに「External Client App Manager 」と入力します。
    1. 外部クライアント アプリの名前 > [編集] をクリックします。
    2. [OAuth Settings] > [App Settings] > [Consumer Key and Secret] に移動します。
    3. メールで送信された確認コードを入力します。
    4. コンシューマ キーとコンシューマ シークレットを安全な場所にコピーします。これらは後のステップで必要になります。

CORS とコンテンツ セキュリティ ポリシーを確立する

  1. メニューバー > [設定] メニューに移動し、[設定] をクリックします。
  2. [**クイック検索**] ボックスに「**CORS** 」と入力し、[**編集**] をクリックします。
    1. [Enable CORS for OAuth endpoints] を選択します。
    2. [保存] をクリックします。
  3. メニューバー > [設定] メニューに移動し、[設定] をクリックします。
  4. [**クイック検索**] ボックスに「**Trusted URLs** 」と入力し、[**New Trusted URL**] をクリックします。
  5. 次の情報を入力します。
    • API Name: ui_connector
    • URL: Agent Assist 統合バックエンドでデプロイした UI コネクタ Cloud Run サービス エンドポイントの URL を入力します。この URL は Cloud Run コンソールで確認できます。例: https://UI_CONNECTOR_SUBDOMAIN.GCP_REGION.run.app。
    • CSP Directives: すべてのチェックボックスをオンにします。
    • [Save &New] をクリックします。
  6. 次の情報を入力します。
    • API Name: ui_connector_wss
    • URL: UI コネクタ サービス エンドポイントの Secure WebSockets URL（wss://UI_CONNECTOR_SUBDOMAIN.GCP_REGION.run.app）を入力します。
    • CSP Directives: すべてのチェックボックスをオンにします。
    • [Save &New] をクリックします。
  7. 次の情報を入力します。
    • API Name: salesforce_domain
    • URL: 次の 形式で Salesforce ドメインの URL を入力します: https://YOUR_SUBDOMAIN.my.salesforce.com。
    • CSP Directives: すべてのチェックボックスをオンにします。
    • [保存] をクリックします。

ステップ 4: チャット クライアントを構成する

Salesforce で Agent Assist UI モジュールを使用するには、エージェント デスクトップにチャット クライアントが必要です。

拡張チャットを構成する

メッセンジャーを構成する手順は次のとおりです。

  1. メニューバー > [設定] メニューに移動し、[設定] をクリックします。 [クイック検索] で「Queues」を検索し、[New] をクリックします。
    1. 次の情報を入力します。
      • Label: Messaging Queue
      • Queue Name: Messaging_Queue
      • Routing Configuration: Messaging_Routing_Configuration
    2. [Supported Objects] をクリックし、[Messaging User] と [Messaging Session] を追加します。
    3. [Queue Members] をクリックし、[User: Your Login User] を追加します。
    4. [保存] をクリックします。
  2. メニューバー > [設定] メニューに移動し、[設定] をクリックします。[クイック検索] ボックスに「Permission Sets 」と入力します。
    1. [Messaging Agents Permission Set] をクリックします。
    2. [Service Presence Statuses Access] > [Edit] をクリックします。
    3. ステータス [Busy] と [Online - Messaging] を選択します。
    4. [Add] > [保存] をクリックします。
  3. メニューバー > [設定] メニューに移動し、[設定] をクリックします。 「[Quick Find]」ボックスに「Users」と入力し、[Users]をクリックします。
    1. ユーザー名をクリックし、[Service Cloud User] が有効になっていることを確認します。
    2. ページで [Permission Set License Assignments] を探します。
    3. [Edit Assignments] をクリックし、Enhanced Chat User を選択します。
    4. [保存] をクリックします。
    5. ページで [Permission Set Assignments] を探します。
    6. [Edit Assignments] をクリックし、[Messaging Agent Permission Set] を選択します。
    7. [Add] > [保存] をクリックします。
  4. メニューバー > [設定] メニューに移動し、[設定] をクリックします。 In the [Quick Find] box, enter [Messaging Settings], then click [New Channel].
    1. [Enhanced Chat] を選択します。
    2. [Name] に Messaging Channel と入力します。
    3. [保存] をクリックします。
    4. [Routing Type] を [Omni-Queue] に、[Queue] を [Messaging Queue] に設定します。
    5. [保存] をクリックし、[Messaging Settings] に移動します。
    6. メッセージング チャネルの名前をクリックし、[Activate] をクリックします。
    7. 利用規約 を読んで同意します。
  5. メニューバー > [設定] メニューに移動し、[設定] をクリックします。 [クイック検索] ボックスに「Embedded Service Deployments」と入力し、[新規 展開] をクリックします。
    1. [Enhanced Chat] > [Next] > [Web] > [Next] をクリックします。
    2. 次の情報を入力します。
      • Name: Messaging Embedded Service Deployment
      • Developer Name: Messaging_Embedded_Service_Deployment
      • Domain: example.com
      • Channel: Messaging Channel
    3. [保存] をクリックします。デプロイが完了するまで待ちます。
    4. [Embedded Service Deployment] 設定で [Publish] をクリックします。
    5. [Refresh]、[Test Messaging] の順にクリックします。

拡張チャットをテストする

メッセンジャーをテストする手順は次のとおりです。

  1. [Test Messaging] をクリックします。
  2. 新しいタブが読み込まれたら、吹き出しをクリックして新しいテスト会話を開始します。
  3. 「Test 」などのメッセージを送信します。
  4. Salesforce ブラウザタブに移動します。
  5. [設定] ツールバーで、[アプリ ランチャー] メニューをクリックし、[Service Console] を選択します。
  6. ユーティリティ ツールバーで [Omni-Channel] をクリックします。
  7. ステータスを [Online - Messaging] に設定します。
  8. 着信したメッセージを承諾します。これにより、会話の新しいタブが [Service Console] に開きます。チャットのトランスクリプトは表示されません。
  9. メニューバー > [設定] メニューに移動します。
  10. [Edit Page] をクリックします。
  11. [Components] メニューから、[Enhanced Conversation] コンポーネントを [Conversation] ペインにドラッグします。
  12. [Save] > [Activate] > [Assign as Org Default] > [Desktop] > [Back] の順にクリックします。
  13. ページを更新します。
  14. ユーティリティ ツールバーで [Omni-Channel] をクリックします。
  15. ステータスを [Online - Messaging] に設定します。
  16. [Test] メッセージに返信して、メッセージングが機能していることを確認します。

問題が発生して詳細情報が必要な場合は、包括的な Salesforce 拡張チャットの設定ガイドをご覧ください。

ステップ 5: Salesforce Lightning Web Component をインストールする

Lightning Experience エディタを使用して、メッセージング セッション ページに Salesforce LWC を追加する手順は次のとおりです。ステップ 4 のテスト会話を続けます。

  1. メニューバー > [設定] メニューに移動し、[Edit Page] をクリックします。

  2. [Components] サイドバーから、agentAssistContainerModule をサイドバーに移動します。

  3. 前のステップで配置したコンポーネントをクリックします。

  4. 次の手順に沿ってフォーム フィールドに入力し、構成の詳細を追加します。

    • endpoint: Agent Integration Backend UI コネクタの URL（ Cloud Run コンソールの URL など）。例: https://UI_CONNECTOR_ENDPOINT.GCP_REGION.run.app
    • features: Agent Assist 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 の外部クライアント アプリのコンシューマ シークレット。