Salesforce との連携

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

始める前に

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

  • Node.js

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

  • Salesforce CLI

    npm を使用して Salesforce CLI をインストールすると、互換性の問題が発生することがわかっています。この問題を回避するには、pkg(macOS)、exe(Windows)、TAR(Linux)のいずれかのインストール オプションを使用します。

  • Gcloud CLI

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

  • Salesforce UI

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

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

ステップ 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. [Enable Omni-Channel] をオンにします。
    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. メニューバー > [設定] メニューに移動し、[設定] をクリックします。[クイック検索] で「外部クライアント アプリ マネージャー」を検索します。
    1. [External Client App Manager] > [New External Client App] > [Create] をクリックし、次の情報を入力します。
      • Connected App Name: 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 (Enable OAuth Settings)] > [Selected OAuth Scopes]: ID URL サービスにアクセスする
      • API(OAuth 設定の有効化)> クライアント認証情報フローを有効にする: 選択済み
    2. [作成] をクリックします。
  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. コンシューマー キーとコンシューマー シークレットを安全な場所にコピーします。これらの値は後の手順で必要になります。
  4. メニューバー > [設定] メニューに移動し、[設定] をクリックします。[クイック検索] で「CORS」を検索し、[編集] をクリックします。
    1. [OAuth エンドポイントの CORS を有効にする] をオンにします。
    2. [保存] をクリックします。

接続アプリの詳細については、次の Salesforce のリソースをご覧ください。

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

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

アプリ内とウェブのメッセージングを設定する

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

  1. メニューバー > [設定] メニューに移動し、[設定] をクリックします。[クイック検索] で「信頼できる URL」を検索し、[新しい信頼できる URL] をクリックします。
    1. API 名ui_connector)を入力します。
    2. Agent Assist 統合バックエンドでデプロイした UI コネクタ Cloud Run サービス エンドポイントの URL を入力します。この URL は Cloud Run コンソールで確認できます。例: https://UI_CONNECTOR_SUBDOMAIN.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://YOUR_SUBDOMAIN.my.salesforce.com の形式で入力します。
    11. [CSP ディレクティブ] で、すべてのオプションを選択します。
    12. [保存] をクリックします。
  2. メニューバー > [設定] メニューに移動し、[設定] をクリックします。[クイック検索] で「キュー」を検索し、[新規] をクリックします。
    1. 次の情報を入力します。
      • ラベル: メッセージ キュー
      • キュー名: Messaging_Queue
      • ルーティング構成: Messaging_Routing_Configuration
    2. [Supported Objects] をクリックし、「Messaging User, Messaging Session」を追加します。
    3. [Queue Members] をクリックし、「User: Your Login User」を追加します。
    4. [保存] をクリックします。
  3. メニューバー > [設定] メニューに移動し、[設定] をクリックします。[クイック検索] で「Permission Sets」を検索します。
    1. [Messaging Agents Permission Set] をクリックします。
    2. [Service Presence Statuses Access] > [Edit] をクリックします。
    3. ステータス [Busy] と [Online - Messaging] を選択します。
    4. [追加] > [保存] をクリックします。
  4. メニューバー > [設定] メニューに移動し、[設定] をクリックします。[クイック検索] に「Users」と入力して検索し、[Users] をクリックします。
    1. ユーザー名をクリックし、[Service Cloud User] が有効になっていることを確認します。
    2. ページで [Permission Set License Assignments] を探します。
    3. [割り当てを編集] をクリックし、[アプリ内ユーザーとウェブ ユーザー向けのメッセージ] をオンにします。
    4. [保存] をクリックします。
    5. ページで [権限セットの割り当て] を探します。
    6. [Edit Assignments] をクリックし、[Messaging Agent Permission Set] を選択します。
    7. [追加] > [保存] をクリックします。
  5. メニューバー > [設定] メニューに移動し、[設定] をクリックします。[クイック検索] で「Messaging Settings」を検索し、[New Channel] をクリックします。
    1. [Messaging for In-App and Web] を選択します。
    2. [名前] に「Messaging Channel」と入力します。
    3. [保存] をクリックします。
    4. [Routing Type] を [Omni-Queue] に、[Queue] を [Messaging Queue] に設定します。
    5. [保存] をクリックし、[メッセージ設定] に移動します。
    6. メッセージ チャネルの名前をクリックし、[有効にする] をクリックします。
    7. 利用規約を読んだら、利用規約に同意します。
  6. メニューバー > [設定] メニューに移動し、[設定] をクリックします。[クイック検索] で「Embedded Service Deployments」を検索し、[New Deployment] をクリックします。
    1. [アプリ内とウェブのメッセージ] > [次へ] > [ウェブ] > [次へ] をクリックします。
    2. 次の詳細を入力します。
      • 名前: Messaging Embedded Service Deployment
      • Developer Name: Messaging_Embedded_Service_Deployment
      • ドメイン: example.com
      • チャネル: メッセージ チャネル
    3. [保存] をクリックします。デプロイが完了するまで待ちます。
    4. [Embedded Service Deployment] 設定で、[公開] をクリックします。
    5. [更新]、[テスト メッセージ] の順にクリックします。

アプリ内とウェブのメッセージングをテストする

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

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

行き詰まって詳細情報が必要な場合は、包括的な Salesforce Messaging for In-App and Web 設定ガイドを参照してください。

ステップ 5: Salesforce LWC をインストールする

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

  1. メニューバー > [設定] メニューに移動し、[ページの編集] をクリックします。
  2. [コンポーネント] サイドバーから、agentAssistContainerModule をサイドバーに移動します。

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

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

    • エンドポイント: エージェント統合バックエンド UI コネクタの URL。たとえば、Cloud Run コンソールの URL(https://UI-CONNECTOR-ENDPOINT.GCP-REGION.run.app など)。
    • features: 会話プロファイルで有効になっている Agent Assist 機能CONVERSATION_SUMMARIZATIONKNOWLEDGE_ASSIST_V2SMART_REPLYAGENT_COACHING など)
    • conversationProfile: Agent Assist 会話プロファイルのリソース名(例: projects/GCP-PROJECT-ID/locations/GCP-REGION/conversationProfiles/CONVERSATION-PROFILE-ID
    • consumerKey: 手順 3 の接続アプリケーションのコンシューマ キー
    • consumerSecret: 手順 3 の接続アプリのコンシューマ シークレット