この音声統合では、Twilio Open CTI 統合を使用して、Twilio Flex コールセンターを Salesforce インスタンスに統合します。
Agent Assist は、Twilio Flex 通話のメディア ストリームを使用して、Salesforce Lightning サービス コンソールでエージェントに候補を提供します。
始める前に
Agent Assist UI モジュールを Salesforce と統合するには、次のリソースへのアクセス権が必要です。
- Node.js Google は、この統合で Node.js 18.20.4 をテストし、推奨しています。Node.js 20.18.0 には、互換性に関する既知の問題があります。特定のバージョンの Node.js をインストールする手順については、nvm をご覧ください。
- Salesforce CLI。次のターミナル コマンドを使用してインストールします。
(sudo) npm install -g @salesforce/cli
- Gcloud CLI
指示に従って
gcloud
コマンドをインストールし、次のコードを使用して認証します。gcloud auth login
- Salesforce UI
- インスタンス URL または login.salesforce.com でログインし、次の点に注意してください。
- Salesforce の [My Domain URL]。メニューバー > [設定] メニューに移動して、[設定] をクリックします。[クイック検索] で「My Domain」を検索します。ドメイン名の形式は MY-DOMAIN-NAME.develop.my.salesforce.com です。
- Salesforce 組織 ID。メニューバー > 設定メニューに移動し、[設定] をクリックして、この設定を見つけます。[クイック検索] で「組織情報」を検索します。
- インスタンス URL または login.salesforce.com でログインし、次の点に注意してください。
- Agent Assist 統合バックエンド
- 手順に沿って統合を設定します。
- デプロイ スクリプトを実行する前に、
deploy.sh
を使用するか、プロジェクト ルートの.env
ファイルで次の環境変数を構成します。AUTH_OPTION
:SalesforceLWC
に設定します。SALESFORCE_DOMAIN
: ドメイン名(例:YOUR_SUBDOMAIN.develop.lightning.force.com
)。この値は、Salesforce UI の前提条件でメモしました。https:// は含めないでください。SALESFORCE_ORGANIZATION_ID
: この値は、Salesforce UI の前提条件でメモしました。
ステップ 1: Twilio Flex を設定する
この統合では、Twilio Flex がソフトフォンとして機能します。Twilio コンソールにログインして、Flex アカウントを設定できます。Flex アカウントの作成方法について詳しくは、Twilio の設定ページをご覧ください。
SIPREC コネクタ アドオンをインストールする
SIPREC コネクタ アドオンを使用すると、Twilio Flex アカウントで音声通話メディア ストリームの SIPREC フォークを Agent Assist に作成できます。SIPREC コネクタ アドオンをインストールする手順は次のとおりです。
- Twilio ホーム > [マーケットプレイス] > [カタログ] > [Twilio] > [Siprec Connector] に移動します。
- [インストール] > [利用規約の確認] チェックボックス > [インストール] をクリックします。
- [構成] タブで、プラグインを次のように構成します。
- Unique Name:
SipRec1
- セッション録画サーバー:
sip:+<GTP-provisioned-phone-number>@216.239.36.145:5672;transport=tls;secure=true;edge=umatilla
- Google の担当者と協力して、電話統合の概要に関するドキュメントに記載されているプロセスに沿って GTP 番号をプロビジョニングします。Twilio Siprec Connector では SBC の構成と検証の手順はすでに完了しているため、無視してかまいません。
- Unique Name:
- Twilio ホーム > 関数とアセットに移動します。
- サイドバーに [関数とアセット] が表示されていない場合は、[プロダクトを探索] から固定します。
- [サービスを作成] をクリックします。
- 新しいサービスに
ui-connector-auth
という名前を付けます。 - 表示されたエディタで、[追加 +] > [関数を追加] をクリックします。
- 関数に
conversation-name
という名前を付けます。 - をクリックし、関数の公開設定を [Public] に変更します。
- GitHub リポジトリから
ui-connector-auth.js
の内容全体をコピーして、エディタに貼り付けます。 - [保存] をクリックします。
- [すべてデプロイ] をクリックします。
Flex Studio で IVR を構成する
IVR は、Twilio Studio でプログラムによる通話フローを構成し、メディア ストリームの SIPREC フォークを Agent Assist に作成することで構成されます。また、HTTP POST を実行して、電話番号と会話 ID を Agent Assist と共有します。Flex Studio で IVR を構成する手順は次のとおりです。
- Twilio コンソールに移動します。
- [Develop] > [Phone Numbers] > [Manage] > [Active Numbers] をクリックします。表には、Flex アカウント用にプロビジョニングされたデフォルトの Twilio 番号が 1 行で表示されます。
- [音声 - Studio ワークフロー] セクションで、[音声 IVR] をクリックします。
- [HTTP リクエストを作成] ウィジェットをフローにドラッグします。
- Incoming Call を SendCallToAgent ウィジェットの入力から切断します。
- [Incoming Call] を [Make HTTP Request] ウィジェットの入力に接続します。
- 次の詳細を使用して、HTTP リクエストの作成ウィジェットを構成します。
- ウィジェット名:
register_twilio
- リクエスト メソッド:
POST
- リクエスト URL:
<your-ui-connector-cloud-run-url>.run.app/register-app
- コンテンツ タイプ: Application/JSON
- リクエストの本文:
{ "accountSid": "<yourTwilioAccountSid>", "authToken": "<yourTwilioAccountAuthToken>" }
- ウィジェット名:
- [関数を実行] ウィジェットをフローにドラッグします。
- register_twilio ウィジェットの [Success] 出力と [Fail] 出力を、Run Function ウィジェットの入力に接続します。
- 次の詳細を使用してウィジェットを作成します。
- ウィジェット名:
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 }}
- token:
- ウィジェット名:
- サイドバーからフローに Fork Stream ウィジェットをドラッグします。
- [Make HTTP Request] ウィジェットの [Success and Fail] 出力を [Fork Stream] ウィジェットの入力に接続します。
- [Fork Stream] ウィジェットの [Next] ノードを [SendCallToAgent] ウィジェットに接続します。
[Fork Stream] ウィジェットを次のように構成します。
- Stream Action: Start
- ストリーム タイプ: Siprec
- コネクタ名:
Siprec1
- トラック: 両方のトラック
ストリーム パラメータ:
- キー:
conversation
値:
projects/<gcp-project-id>/conversations/TW-{{trigger.call.From | replace_first:'+','' }}-{{trigger.call.CallSid}}
- キー:
[保存] > [公開] をクリックします。
アカウントの詳細
この手順に沿って、Twilio Flex アカウントの詳細情報を収集します。この情報は、後で Salesforce で Flex CTI を構成するために必要になります。
- Twilio Home > Account Dashboard に移動し、次の情報を書き留めます。
- アカウント SID
- Twilio の電話番号
ステップ 2: 開発プロジェクトを設定する
Agent Assist UI モジュールの統合を開始する手順は次のとおりです。
- 次のコードを実行して、Agent Assist 統合リポジトリのクローンを作成し、プロジェクトを開きます。
git clone https://github.com/GoogleCloudPlatform/agent-assist-integrations cd salesforce/aa-lwc
- 次のコマンドを実行して、UI モジュールの JavaScript ファイルをダウンロードします。これらのファイルは、後で 静的リソースとしてデプロイします。Salesforce では、静的リソースでサードパーティの JS を読み込む必要があります。
npm run generate-static-resources npm install
ステップ 3: Salesforce 環境を設定する
Agent Assist UI モジュールは、本番環境や開発環境などの特定の環境に統合できます。Salesforce では、これらの環境を「組織(org)」と呼びます。
Salesforce CLI を使用して組織を構成する
Salesforce CLI を使用して Agent Assist 統合用に組織を構成する手順は次のとおりです。
- 次のコードを実行し、通常使用している Salesforce のログイン情報を使用して CLI を認証します。
npm run login
- 次のコードを実行して、LWC を組織にデプロイします。
npm run deploy
ステップ 4: 接続アプリを作成する
Salesforce Lightning Web コンポーネントは、クライアント認証情報の OAuth 2.0 フローを使用してユーザーを認証します。接続アプリケーション(アプリ)は、クライアント認証情報フローを有効にします。アプリのコンシューマ キーとコンシューマ シークレットを使用して、Salesforce でユーザーを認証するように LWC を構成します。
基本設定を構成する
- メニューバー > 設定メニューに移動し、[設定] をクリックします。[クイック検索] で「アプリ マネージャー」を検索します。
- [New Connected App] > [Create a Connected App] > [Continue] をクリックし、次の情報を入力します。
- Connected App Name:
lwc auth
- API 名:
lwc_auth
- Contact Email:
your_email@example.com
- OAuth 設定を有効にする:
checked
- コールバック URL:
https://login.salesforce.com/services/oauth2/callback
- Selected OAuth Scopes: ID URL サービスにアクセスする
- Enable Client Credentials Flow:
checked
- Connected App Name:
- [保存] をクリックします。
接続アプリの詳細については、次の Salesforce のリソースをご覧ください。
実行権限と認証情報を設定する
- メニューバー > 設定メニューに移動し、[設定] をクリックします。
- [クイック検索] で「接続済みのアプリを管理」を検索します。
- 接続済みアプリの名前 > [編集] をクリックします。
- [クライアント認証情報フロー] に移動します。
- [Run As] で、虫眼鏡アイコンをクリックしてユーザー名を選択します。
- [保存] をクリックします。
- メニューバー > 設定メニューに移動し、[設定] をクリックします。
- [クイック検索] で「アプリ マネージャー」を検索します。
lwc auth
を見つけて、 をクリックします。- [View] > [Manage Consumer Details] をクリックします。
- メールに送信された確認コードを入力します。
- コンシューマー キーとコンシューマー シークレットを安全な場所にコピーします。これらは後のステップで必要になります。
CORS とコンテンツ セキュリティ ポリシーを確立する
- メニューバー > 設定メニューに移動し、[設定] をクリックします。
- [クイック検索] で「CORS」を検索し、[編集] をクリックします。
- [OAuth エンドポイントの CORS を有効にする] をオンにします。
- [保存] をクリックします。
- メニューバー > 設定メニューに移動し、[設定] をクリックします。
- [クイック検索] で「信頼できる URL」を検索し、[新しい信頼できる URL] をクリックします。
- API 名(
ui_connector
)を入力します。- Agent Assist Integration Backend でデプロイした UI Connector Cloud Run Service エンドポイントの URL を入力します。この URL は Cloud Run コンソールで確認できます。例:
https://UI_CONNECTOR_SUBDOMAIN.GCP-REGION.run.app
。 - [CSP ディレクティブ] のすべてのチェックボックスをオンにします。
- [Save & New] をクリックします。
- Agent Assist Integration Backend でデプロイした UI Connector Cloud Run Service エンドポイントの URL を入力します。この URL は Cloud Run コンソールで確認できます。例:
- API 名(
ui_connector_wss
)を入力します。- Agent Assist Integration Backend でデプロイした UI Connector Cloud Run Service エンドポイントの URL を入力します。この URL は Cloud Run コンソールで確認できます。WebSockets トラフィック用にプロトコルを wss に変更します。例:
wss://UI_CONNECTOR_SUBDOMAIN.GCP-REGION.run.app
。 - [CSP ディレクティブ] のすべてのチェックボックスをオンにします。
- [Save & New] をクリックします。
- Agent Assist Integration Backend でデプロイした UI Connector Cloud Run Service エンドポイントの URL を入力します。この URL は Cloud Run コンソールで確認できます。WebSockets トラフィック用にプロトコルを wss に変更します。例:
- API 名(
salesforce_domain
)を入力します。- Salesforce ドメインの URL を
https://YOUR_SUBDOMAIN.my.salesforce.com
の形式で入力します。 - [CSP ディレクティブ] のすべてのチェックボックスをオンにします。
- [保存] をクリックします。
- Salesforce ドメインの URL を
ステップ 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 コンポーネントを追加する手順は次のとおりです。
- サービス コンソールに移動し、[連絡先] を選択します。
- 連絡先レコードを選択します。
- 設定メニュー > [ページの編集] をクリックします。
- [テンプレート] > [変更] をクリックします。
- [ヘッダー] と [2 つの等しいリージョン] を選択します。
- [次へ] をクリックします。
- 各リージョンを新しいリージョンにマッピングします。
- [完了] をクリックします。
- [コンポーネント] サイドバーから、
agentAssistContainerModule
をサイドバーに移動します。注:npm deploy
コマンドは、このコンポーネントを提供しました。 - 前の手順で配置したコンポーネントをクリックし、次の手順に沿ってフォーム フィールドに入力して構成の詳細を追加します。
- 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-twilio
では利用できません。 - channel: 統合が音声用であることを示します。
- channelType: 音声統合タイプが twilio であることを示します。
- conversationProfile: Agent Assist 会話プロファイルのリソース名。例:
projects/GCP-PROJECT-ID/locations/GCP-REGION/conversationProfiles/CONVERSATION-PROFILE-ID
- consumerKey: ステップ 3 の接続アプリケーションのコンシューマ キー。
- consumerSecret: 手順 3 で取得した接続アプリのコンシューマ シークレット。
- endpoint: 統合バックエンドの UI コネクタの URL。たとえば、Cloud Run コンソールの URL(
ステップ 7: 統合をテストする
Salesforce コールセンターへのテスト通話で、音声統合をテストできます。
- Salesforce サービス コンソールから Twilio Flex にログインします。
- Twilio Flex の番号に電話をかけます。これはステップ 1 でメモしました。
- Salesforce サービス コンソールで通話に応答します。画面に、電話をかけてきた番号の新しい連絡先ページまたは既存の連絡先ページが開きます。
- 新しい連絡先ページの場合は、連絡先を保存します。[Contact] ページが読み込まれると、Salesforce Lightning Web Component がサイドバーに読み込まれます。
- 会話の両側をテストして、Agent Assist 機能が構成どおりに動作していることを確認します。