Salesforce チャットの統合

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

始める前に

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

  • Node.js

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

  • Salesforce CLI

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

  • Google Cloud CLI

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

  • Salesforce

    1. インスタンス URL または Salesforce のログインページでログインし、次の点に注意してください。
    2. Salesforce の My Domain URL。私のドメイン URL を確認する手順は次のとおりです。
      1. メニューバー > [設定] メニューに移動します。
      2. [Setup] をクリックします。
      3. [クイック検索] ボックスに「My Domain」と入力します。ドメイン名は MY-DOMAIN-NAME.develop.my.salesforce.com の形式です。
    3. Salesforce 組織 ID。組織 ID を確認する手順は次のとおりです。
      1. メニューバー > [設定] メニューに移動します。
      2. [Setup] をクリックします。
      3. [クイック検索] ボックスに「組織情報」と入力します。注: これらの統合手順は、Salesforce Developer Edition でのみテストされています。別のエディションを使用している場合は、機能ライセンスと Salesforce インターフェースに違いが生じる可能性があります。

  • Agent Assist 統合バックエンド

    1. 手順に沿って統合を設定します。
    2. デプロイ スクリプトを実行する前に、deploy.sh またはプロジェクト ルートの .env ファイルで次の環境変数を構成します。
    3. AUTH_OPTION: SalesforceLWC に設定します。
    4. SALESFORCE_DOMAIN: YOUR_SUBDOMAIN.develop.lightning.force.com に類似したドメイン名。この値は、Salesforce の前提条件でメモしました。https:// は含めないように注意してください。
    5. SALESFORCE_ORGANIZATION_ID: この値は Salesforce の前提条件でメモしました。

ステップ 1: プロジェクトを設定する

Agent Assist UI モジュールの統合を開始する手順は次のとおりです。

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

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

  2. 次のコマンドを実行して、後で静的リソースとしてデプロイされる JS ファイルをダウンロードします。

    npm run generate-static-resources
npm install

ステップ 2: 環境をセットアップする

Agent Assist UI モジュールは、本番環境や開発環境などの特定の環境に統合できます。Salesforce では、これらの環境を組織（org）と呼びます。

Salesforce コンソールで組織を構成する

Salesforce コンソールで、次の手順に沿って Agent Assist 統合用に組織を構成します。

  1. メニューバー > [設定] メニューに移動し、[設定] をクリックします。[クイック検索] ボックスに「オムニチャネル設定」と入力し、[オムニチャネル設定] をクリックします。
    1. [オムニチャネルを有効にする] を選択します。
    2. [新しいウィンドウまたはタブでエージェントをオムニチャネルに自動的にログインさせる] を選択します。
    3. [保存] をクリックします。
  2. メニューバー > [設定] メニューに移動し、[設定] をクリックします。[クイック検索] ボックスに「コミュニティ」と入力し、[デジタル エクスペリエンス] > [設定] をクリックします。
    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] をクリックし、次の情報を入力します。
    2. 外部クライアント アプリ名: lwc auth
    3. API 名: lwc_auth
    4. Contact Email: your_email@example.com
    5. API（OAuth 設定の有効化） > OAuth の有効化: 選択済み
    6. API (Enable OAuth Settings) > Callback URL: https://login.salesforce.com/services/oauth2/callback
    7. [API (Enable OAuth Settings)] > [Selected OAuth Scopes]: ID URL サービスにアクセスする
    8. API（OAuth 設定の有効化）> クライアント認証情報フローを有効にする: 選択済み
    9. [作成] をクリックします。
  2. メニューバー > [設定] メニューに移動し、[設定] をクリックします。[クイック検索] ボックスに「外部クライアント アプリケーション マネージャー」と入力します。
    1. 外部クライアント アプリの名前 > [編集] をクリックします。
    2. [OAuth Policies] > [OAuth Flows and External Client App Enhancements] に移動します。
    3. [Enable Client Credentials Flow] が選択されていることを確認します。
    4. [Run As] に、ログイン ユーザー名を入力します。
    5. [保存] をクリックします。
  3. メニューバー > [設定] メニューに移動し、[設定] をクリックします。[クイック検索] ボックスに「外部クライアント アプリケーション マネージャー」と入力します。
    1. 外部クライアント アプリの名前 > [編集] をクリックします。
    2. [OAuth Settings] > [App Settings] > [Consumer Key and Secret] に移動します。
    3. メールで送信された確認コードを入力します。
    4. コンシューマー キーとコンシューマー シークレットを安全な場所にコピーします。これらの値は後のステップで必要になります。

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

  1. メニューバー > [設定] メニューに移動し、[設定] をクリックします。
  2. [クイック検索] ボックスに「CORS」と入力し、[編集] をクリックします。
    1. [OAuth エンドポイントの CORS を有効にする] を選択します。
    2. [保存] をクリックします。
  3. メニューバー > [設定] メニューに移動し、[設定] をクリックします。
  4. [クイック検索] ボックスに「信頼できる URL」と入力し、[新しい信頼できる URL] をクリックします。
  5. [API Name]（API 名）に ui_connector と入力します。
    1. Agent Assist 統合バックエンドでデプロイした UI コネクタ Cloud Run サービス エンドポイントの URL を入力します。この URL は Cloud Run コンソールで確認できます。例: https://<var>UI_CONNECTOR_SUBDOMAIN</var>.<var>GCP_REGION</var>.run.app。
    2. [CSP ディレクティブ] のすべてのチェックボックスをオンにします。
    3. [Save & New] をクリックします。
  6. [API Name]（API 名）に salesforce_domain と入力します。
    1. Salesforce ドメインの URL を https://<var>YOUR_SUBDOMAIN</var>.my.salesforce.com の形式で入力します。
    2. [CSP ディレクティブ] のすべてのチェックボックスをオンにします。
    3. [保存] をクリックします。

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

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

高度なチャットを設定する

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

  1. メニューバー > [設定] メニューに移動し、[設定] をクリックします。[クイック検索] ボックスに「信頼できる URL」と入力し、[新しい信頼できる URL] をクリックします。
    1. API 名（ui_connector）を入力します。
    2. Agent Assist 統合バックエンドでデプロイした UI コネクタ Cloud Run サービス エンドポイントの URL を入力します。この URL は Cloud Run コンソールで確認できます。例: https://<var>UI_CONNECTOR_SUBDOMAIN</var>.us-central1.run.app。
    3. [CSP ディレクティブ] のすべてのチェックボックスをオンにします。
    4. [Save & New] をクリックします。
    5. API 名（twilio_flex）を入力します。
    6. URL https://flex.twilio.com を入力します。
    7. [CSP ディレクティブ] のすべてのチェックボックスをオンにします。
    8. [Save & New] をクリックします。
    9. API 名（salesforce_domain）を入力します。
    10. Salesforce ドメインの URL を https://<var>YOUR_SUBDOMAIN</var>.my.salesforce.com の形式で入力します。
    11. [CSP ディレクティブ] のすべてのチェックボックスをオンにします。
    12. [保存] をクリックします。
  2. メニューバー > [設定] メニューに移動し、[設定] をクリックします。[クイック検索] で「キュー」を検索し、[新規] をクリックします。
    1. 次の情報を入力します。
    2. ラベル: メッセージ キュー
    3. キュー名: Messaging_Queue
    4. ルーティング構成: Messaging_Routing_Configuration
    5. [Supported Objects] をクリックし、[Messaging User] と [Messaging Session] を追加します。
    6. [Queue Members] をクリックし、[User: Your Login User] を追加します。
    7. [保存] をクリックします。
  3. メニューバー > [設定] メニューに移動し、[設定] をクリックします。[クイック検索] ボックスに「Permission Sets」と入力します。
    1. [Messaging Agents Permission Set] をクリックします。
    2. [Service Presence Statuses Access] > [Edit] をクリックします。
    3. ステータス [取り込み中] と [オンライン - メッセージ] を選択します。
    4. [追加] > [保存] をクリックします。
  4. メニューバー > [設定] メニューに移動し、[設定] をクリックします。[クイック検索] ボックスに「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. [追加] > [保存] をクリックします。
  5. メニューバー > [設定] メニューに移動し、[設定] をクリックします。[クイック検索] ボックスに「メッセージ設定」と入力し、[新しいチャネル] をクリックします。
    1. [Enhanced Chat] を選択します。
    2. [名前] に「Messaging Channel」と入力します。
    3. [保存] をクリックします。
    4. [Routing Type] を [Omni-Queue] に、[Queue] を [Messaging Queue] に設定します。
    5. [保存] をクリックして、[メッセージ設定] に移動します。
    6. メッセージ チャネルの名前をクリックし、[有効にする] をクリックします。
    7. 利用規約を読んだら、利用規約に同意します。
  6. メニューバー > [設定] メニューに移動し、[設定] をクリックします。[クイック検索] ボックスに「Embedded Service Deployments」と入力し、[New Deployment] をクリックします。
    1. [拡張チャット] > [次へ] > [ウェブ] > [次へ] をクリックします。
    2. 次の詳細情報を入力します。
    3. 名前: Messaging Embedded Service Deployment
    4. デベロッパー名: Messaging_Embedded_Service_Deployment
    5. ドメイン: example.com
    6. チャネル: メッセージ チャネル
    7. [保存] をクリックします。デプロイが完了するまで待ちます。
    8. [Embedded Service Deployment] 設定で、[公開] をクリックします。
    9. [更新]、[テスト メッセージ] の順にクリックします。

高度なチャットをテストする

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

  1. [テスト メッセージ] をクリックします。
  2. 新しいタブが読み込まれたら、吹き出しをクリックして新しいテスト会話を開始します。
  3. 「Test」などのメッセージを送信します。
  4. Salesforce のブラウザタブに移動します。
  5. [設定] ツールバーで、[App Launcher] メニューをクリックし、[Service Console] を選択します。
  6. ユーティリティ ツールバーの [オムニチャネル] をクリックします。
  7. ステータスを [オンライン - メッセージ] に設定します。
  8. 着信メッセージを承認します。会話の Service Console の新しいタブが開きます。チャットの文字起こしが表示されない。
  9. メニューバー > [設定] メニューに移動します。
  10. [ページの編集] をクリックします。
  11. [Components] メニューから、[Enhanced Conversation] コンポーネントを [Conversation] ペインにドラッグします。
  12. [保存] > [有効にする] > [組織のデフォルトとして割り当てる] > [デスクトップ] > 戻る の順にクリックします。
  13. ページを更新する。
  14. ユーティリティ ツールバーの [オムニチャネル] をクリックします。
  15. ステータスを [オンライン - メッセージ] に設定します。
  16. [テスト] メッセージに返信して、メッセージ機能が動作していることを確認します。

行き詰まって詳細情報が必要な場合は、包括的な Salesforce Enhanced Chat 設定ガイドをご覧ください。

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

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

  1. メニューバー > [設定] メニューに移動し、[ページの編集] をクリックします。

  2. [コンポーネント] サイドバーから、agentAssistContainerModule をサイドバーに移動します。

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

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

    • endpoint: エージェント統合バックエンド UI コネクタの URL。たとえば、Cloud Run コンソールの URL（https://<var>UI_CONNECTOR_ENDPOINT</var>.<var>GCP_REGION</var>.run.app など）。
    • features: 会話プロファイルで有効になっている Agent Assist 機能（CONVERSATION_SUMMARIZATION、KNOWLEDGE_ASSIST_V2、SMART_REPLY、AGENT_COACHING など）
    • channel: チャンネルが chat であることを示します。
    • platform: プラットフォームが messaging であることを示します。
    • conversationProfile: Agent Assist の会話プロファイルのリソース名（例: projects/<var>GCP_PROJECT_ID</var>/locations/<var>GCP_REGION</var>/conversationProfiles/<var>CONVERSATION_PROFILE_ID</var>）
    • consumerKey: ステップ 3 の外部クライアント アプリのコンシューマ キー
    • consumerSecret: ステップ 3 の外部クライアント アプリのコンシューマ シークレット