Twilio Flex との Salesforce 音声統合

Agent Assist と Twilio Flex の Salesforce との統合のアーキテクチャ

この音声統合では、Twilio Open CTI 統合を使用して、Twilio Flex コールセンターを Salesforce インスタンスに統合します。

Agent Assist は、Twilio Flex 通話のメディア ストリームを使用して、Salesforce Lightning Service Console でエージェントに提案を提供します。

始める前に

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

  • Node.js

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

  • Salesforce CLI

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

  • Google Cloud CLI

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

  • Salesforce

    インスタンス 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 の前提条件でメモしました。https:// は含めないように注意してください。
      • SALESFORCE_ORGANIZATION_ID: この値は Salesforce の前提条件でメモしました。
      • APP_AUTH_OPTION: Twilio に設定します。
      • TWILIO_ACCOUNT_SID: Twilio アカウント SID に設定します。

ステップ 1: Twilio Flex を設定する

この統合では、Twilio Flex がソフトフォンとして機能します。Twilio コンソールにログインして、Flex アカウントを設定できます。Flex アカウントの作成方法について詳しくは、Twilio の設定ページをご覧ください。

SIPREC コネクタ アドオンをインストールする

SIPREC コネクタ アドオンを使用すると、Twilio Flex アカウントで音声通話メディア ストリームの SIPREC フォークを Agent Assist に作成できます。SIPREC コネクタ アドオンをインストールする手順は次のとおりです。

  1. Twilio Home > [Marketplace] > [Catalog] > [Twilio] > [Siprec Connector] に移動します。
  2. [インストール] > [利用規約に同意する] チェックボックス > [インストール] をクリックします。
  3. [構成] タブで、次の詳細を使用してプラグインを構成します。
    • Unique Name: SipRec1
    • セッション録画サーバー: 
      sip:+<GTP-provisioned-phone-number>@216.239.36.145:5672;transport=tls;secure=true;edge=umatilla
    • GTP 番号のプロビジョニングについて詳しくは、テレフォニー統合のドキュメントをご覧ください。Twilio Siprec コネクタでは SBC の構成と検証の手順が完了しているため、これらの手順は無視してかまいません。
  4. Twilio ホーム > 関数とアセットに移動します。
    • サイドバーに [関数とアセット] が表示されていない場合は、[プロダクトを探索] から固定します。
  5. [サービスを作成] をクリックします。
  6. 新しいサービスに ui-connector-auth という名前を付けます。
  7. 表示されたエディタで、[追加 +] > [関数を追加] をクリックします。
  8. 関数に conversation-name という名前を付けます。
  9. をクリックし、関数の公開設定を [公開] に変更します。
  10. GitHub リポジトリから ui-connector-auth.js の内容全体をコピーして、エディタに貼り付けます。
  11. [保存] をクリックします。
  12. [すべてデプロイ] をクリックします。

Flex Studio で IVR を構成する

IVR は、Twilio Studio でプログラムによる通話フローを構成し、メディア ストリームの SIPREC フォークを Agent Assist に送信することで構成されます。また、HTTP POST を実行して、電話番号と会話 ID を Agent Assist と共有します。Flex Studio で IVR を構成する手順は次のとおりです。

  1. Twilio Console に移動します。
  2. [Develop] > [Phone Numbers] > [Manage] > [Active Numbers] をクリックします。表には、Flex アカウント用にプロビジョニングされたデフォルトの Twilio 番号が 1 行で表示されます。
  3. [Voice - Studio Workflow] セクションで、[Voice IVR] をクリックします。
  4. HTTP リクエストを作成ウィジェットをフローにドラッグします。
  5. Incoming Call を SendCallToAgent ウィジェットの入力から切断します。
  6. [Incoming Call] を [Make HTTP Request] ウィジェットの入力に接続します。
  7. HTTP リクエストの作成ウィジェットを次の詳細で構成します。
    • ウィジェット名: register_twilio
    • リクエスト メソッド: POST
    • リクエスト URL: <your-ui-connector-cloud-run-url>.run.app/register-app
    • コンテンツ タイプ: Application/JSON
    • リクエストの本文: 
      {
"accountSid": "<yourTwilioAccountSid>",
"authToken": "<yourTwilioAccountAuthToken>"
}
  8. [関数を実行] ウィジェットをフローにドラッグします。
  9. register_twilio ウィジェットの [成功] 出力と [失敗] 出力を [関数を実行] ウィジェットの入力に接続します。
  10. 次の詳細を使用してウィジェットを作成します。
    • ウィジェット名: conversation_name
    • サービス: ui-connector-auth
    • 環境: ui
    • 関数: conversation-name
    • 関数パラメータ:
      • token: 
        {{ widgets.register_twilio.parsed.token }}
      • endpoint: <your-ui-connector-cloud-run-url>.run.app/conversation-name
      • phone: 
        {{ trigger.call.From | replace_first:'+','' }}
      • conversationName: 
        projects/<project>/locations/<location>/conversations/TW-{{ trigger.call.From | replace_first:'+','' }}-{{ trigger.call.CallSid }}
  11. サイドバーからフローに [Fork Stream] ウィジェットをドラッグします。
  12. HTTP リクエスト ウィジェットの [成功と失敗] 出力を、ストリームの分岐ウィジェットの入力に接続します。
  13. フォーク ストリーム ウィジェットの 次へノードを SendCallToAgent ウィジェットに接続します。

  14. [Fork Stream] ウィジェットを次のように構成します。

    • Stream Action: Start
    • ストリーム タイプ: Siprec
    • コネクタ名: Siprec1
    • トラック: 両方のトラック

    • ストリーム パラメータ:

      • キー: conversation

      • 値:

        projects/<gcp-project-id>/conversations/TW-{{trigger.call.From | replace_first:'+','' }}-{{trigger.call.CallSid}}

  15. [保存] > [公開] をクリックします。

アカウントの詳細

この手順に沿って、Twilio Flex アカウントの詳細情報を収集します。この情報は、後で Salesforce で Flex CTI を構成するために必要になります。

  1. Twilio Home > [Account Dashboard] に移動し、次の情報を書き留めます。
    • アカウント SID
    • Twilio の電話番号

ステップ 2: 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 を読み込むために静的リソースが必要です。

    npm run generate-static-resources
npm install

ステップ 3: Salesforce 環境を設定する

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

Salesforce CLI を使用して組織を構成する

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

  1. 次のコードを実行し、通常使用する Salesforce のログイン情報を使用して CLI を認証します。
    npm run login
  2. 次のコードを実行して、LWC を組織にデプロイします。
    npm run deploy

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

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

  1. メニューバー > [設定] メニューに移動し、[設定] をクリックします。[クイック検索] ボックスに「外部クライアント アプリ マネージャー」と入力します。
    1. [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 設定の有効化）> クライアント認証情報フローを有効にする: 選択済み
    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. コンシューマー キーとコンシューマー シークレットを安全な場所にコピーします。この値は後のステップで必要になります。

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

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

ステップ 5: Twilio Flex CTI プラグインをインストールする

Salesforce は、サードパーティのソフトフォンを Salesforce インスタンスと統合できるように、Salesforce Open CTI を提供しています。

Twilio Flex CTI は、Salesforce Open CTI を使用して、Salesforce インスタンス内で Flex を直接使用できるようにします。Twilio の手順に沿って、Salesforce インスタンスで Twilio Flex CTI を設定します。

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

次の手順に沿って、Lightning Experience エディタを使用して、新しい通話が着信したときに Twilio Flex CTI が開く連絡先ページに Salesforce Lightning Web コンポーネントを追加します。

  1. サービス コンソールに移動し、[連絡先] を選択します。
  2. 連絡先レコードを選択します。
  3. [設定] メニュー > [ページの編集] をクリックします。
  4. [テンプレート] > [変更] をクリックします。
    1. [ヘッダー] と [2 つの等しいリージョン] を選択します。
    2. [次へ] をクリックします。
    3. 各リージョンを新しいリージョンにマッピングします。
    4. [完了] をクリックします。
  5. [コンポーネント] サイドバーから、agentAssistContainerModule をサイドバーに移動します。注: このコンポーネントは npm deploy コマンドによって提供されました。
  6. 前の手順で配置したコンポーネントをクリックし、次の手順でフォーム フィールドに入力して構成の詳細を追加します。
    • endpoint: エージェント統合バックエンド UI コネクタの URL。たとえば、Cloud Run コンソールの URL など。例: https://UI_CONNECTOR_ENDPOINT.GCP_REGION.run.app
    • features: 会話プロファイルで有効になっている Agent Assist の機能（CONVERSATION_SUMMARIZATION、KNOWLEDGE_ASSIST_V2、AGENT_COACHING など）。SMART_REPLY などの一部の機能は voice では使用できません。
    • channel: 統合が voice 用であることを示します。
    • platform: プラットフォームが twilio であることを示します。
    • conversationProfile: Agent Assist の会話プロファイルのリソース名（例: projects/GCP_PROJECT_ID/locations/GCP_REGION/conversationProfiles/CONVERSATION_PROFILE_ID）
    • consumerKey: 前の手順で取得した外部クライアント アプリのコンシューマ キー。
    • consumerSecret: 前の手順で取得した外部クライアント アプリのコンシューマ シークレット。

ステップ 7: 統合をテストする

Salesforce コールセンターへのテスト通話で音声統合をテストできます。

  1. サービス コンソールから Twilio Flex にログインします。
  2. Twilio Flex の番号に電話をかけます。これはステップ 1 でメモしました。
  3. サービス コンソールで通話に応答します。画面に、電話をかけた番号の新しい連絡先ページまたは既存の連絡先ページが開きます。
  4. 新しい連絡先ページの場合は、連絡先を保存します。連絡先ページが読み込まれると、Salesforce Lightning Web Component がサイドバーに読み込まれます。
  5. 会話の両側をテストして、エージェント アシスト機能が構成どおりに動作していることを確認します。