透過 Twilio Flex 整合 Salesforce Voice

這項語音整合功能會使用 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

  1. 在執行個體網址或 Salesforce 登入頁面登入，並記下下列資訊：
  2. 您的 Salesforce 我的網域網址。請按照下列步驟找出「我的網域」網址：
     1. 前往選單列 >「設定」選單。
     2. 點選 [設定]。
     3. 在「快速搜尋」方塊中輸入「我的網域」。網域名稱格式如下：MY-DOMAIN-NAME.develop.my.salesforce.com。
  3. 您的 Salesforce 組織 ID。請按照下列步驟找出機構 ID：
     1. 前往選單列 >「設定」選單。
     2. 點選 [設定]。
     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 先決條件中記下這個值。
  6. APP_AUTH_OPTION：設為 Twilio。
  7. 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. 在「設定」分頁中，依下列步驟設定外掛程式：
   1. 專屬名稱：SipRec1
   2. 工作階段錄製伺服器：

      sip:+<GTP-provisioned-phone-number>@216.239.36.145:5672;transport=tls;secure=true;edge=umatilla

   3. 如要進一步瞭解如何佈建 GTP 號碼，請參閱電話整合說明文件。由於 Twilio Siprec 連接器已完成 SBC 設定和驗證步驟，因此您可以忽略這些步驟。
4. 依序前往「Twilio Home」 >「Functions and Assets」。
   • 如果側欄未顯示「函式和資產」，請從「探索產品」固定顯示。
5. 按一下「建立服務」。
6. 將新服務命名為 ui-connector-auth。
7. 在隨即顯示的編輯器中，依序點選「新增 +」 >「新增函式」。
8. 將函式命名為 conversation-name。
9. 按一下 lock，然後將函式顯示設定變更為「公開」。
10. 將 GitHub 存放區中 ui-connector-auth.js 的所有內容複製並貼到編輯器。
11. 按一下 [儲存]。
12. 按一下「Deploy All」(全部部署)。

使用 Flex Studio 設定 IVR

IVR 包含使用 Twilio Studio 設定程式輔助通話流程，將媒體串流的 SIPREC 分支傳送至 Agent Assist。此外，也會執行 HTTP POST，將電話號碼和對話 ID 分享給 Agent Assist。請按照下列步驟，使用 Flex Studio 設定 IVR。

1. 前往 Twilio 控制台。
2. 依序點選「Develop」>「Phone Numbers」>「Manage」>「Active Numbers」。表格中應有一列，其中包含為 Flex 帳戶佈建的預設 Twilio 號碼。
3. 在「Voice - Studio Workflow」部分中，按一下「Voice IVR」。
4. 將「Make HTTP Request」小工具拖曳至流程中。
5. 從 SendCallToAgent 小工具的輸入內容中，取消連結 Incoming Call。
6. 將「Incoming Call」(來電) 連結至「Make HTTP Request」(發出 HTTP 要求) 小工具的輸入內容。
7. 使用下列詳細資料設定「發出 HTTP 要求」小工具：
   • 小工具名稱：register_twilio
   • 要求方法：POST
   • 要求網址：<your-ui-connector-cloud-run-url>.run.app/register-app
   • 內容類型：Application/JSON
   • 要求主體：

     {
     "accountSid": "<yourTwilioAccountSid>",
     "authToken": "<yourTwilioAccountAuthToken>"
     }

8. 將「執行函式」小工具拖曳至流程中。
9. 將 register_twilio 小工具的「Success」和「Fail」輸出內容，連結至「Run Function」小工具的輸入內容。
10. 建立小工具時，請提供下列詳細資料：
    • 小工具名稱：conversation_name
    • 服務：ui-connector-auth
    • 環境：ui
    • 功能：conversation-name
    • 函式參數：
      • token：

        {{ widgets.register_twilio.parsed.token }}

      • 端點：<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. 將「Make HTTP Request」小工具的「Success」和「Fail」輸出內容，連線至「Fork Stream」小工具的輸入內容。
13. 將「Fork Stream」小工具的「Next」節點，連結至「SendCallToAgent」小工具。

14. 請按照下列方式設定「Fork Stream」小工具：

    • 串流動作：開始
    • 串流類型：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」，並記下下列資訊：
   • Account SID (帳戶 SID)
   • 我的 Twilio 電話號碼

步驟 2：設定開發專案

如要開始整合 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」，然後輸入下列資訊。
   2. 外部用戶端應用程式名稱：lwc auth
   3. API 名稱：lwc_auth
   4. 聯絡電子郵件地址：[e-mail]
   5. 「API (Enable OAuth Settings)」 >「Enable OAuth」：已選取
   6. API (啟用 OAuth 設定) > 回呼網址：https://login.salesforce.com/services/oauth2/callback
   7. API (Enable OAuth Settings) > Selected OAuth Scopes：存取身分網址服務
   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. 在「快速尋找」方塊中輸入「信任的網址」，然後點選「新增信任的網址」。
5. 輸入 API 名稱：ui_connector
   1. 輸入您透過 Agent Assist Integration Backend 部署的 UI 連接器 Cloud Run 服務端點 URL。您可以在 Cloud Run 控制台中找到這個網址。例如：https://<var>UI_CONNECTOR_SUBDOMAIN</var>.<var>GCP_REGION</var>.run.app。
   2. 選取「CSP 指令」下方的所有核取方塊。
   3. 按一下「儲存並新增」。
6. 輸入 API 名稱：ui_connector_wss
   1. 輸入您透過 Agent Assist Integration Backend 部署的 UI 連接器 Cloud Run 服務端點 URL。您可以在 Cloud Run 控制台中找到這個網址。將通訊協定變更為 wss，以用於 WebSocket 流量。例如：wss://<var>UI_CONNECTOR_SUBDOMAIN</var>.<var>GCP_REGION</var>.run.app。
   2. 選取「CSP 指令」下方的所有核取方塊。
   3. 按一下「儲存並新增」。
7. 輸入 API 名稱：salesforce_domain
   1. 以 https://<var>YOUR_SUBDOMAIN</var>.my.salesforce.com 格式輸入 Salesforce 網域的 URL。
   2. 選取「CSP 指令」下方的所有核取方塊。
   3. 按一下 [儲存]。

步驟 5：安裝 Twilio Flex CTI 外掛程式

Salesforce 提供 Salesforce Open CTI，可讓您將第三方軟體電話與 Salesforce 執行個體整合。

Twilio Flex CTI 使用 Salesforce Open CTI，讓您直接在 Salesforce 執行個體中使用 Flex。按照 Twilio 的操作說明，在 Salesforce 執行個體中設定 Twilio Flex CTI。

步驟 6：安裝 Salesforce Lightning 網頁元件

請按照下列步驟，使用 Lightning Experience 編輯器將 Salesforce Lightning Web Component 新增至聯絡人頁面。當有新來電時，系統會開啟 Twilio Flex CTI。

1. 前往服務控制台，然後選取「聯絡人」。
2. 選取聯絡人記錄。
3. 按一下「設定」選單 >「編輯頁面」。
4. 依序點選「範本」 >「變更」。
   1. 選取「標題」和「兩個大小相等的區域」。
   2. 點選「下一步」。
   3. 將每個區域對應至新區域。
   4. 按一下 [完成]。
5. 從「元件」側欄將 agentAssistContainerModule 移到側欄。注意：這個元件是由 npm deploy 指令提供。
6. 按一下上一個步驟中放置的元件，然後填寫表單欄位，新增設定詳細資料。
   • 端點：整合後端 UI 連接器的網址。例如 Cloud Run 控制台中的網址，如：https://<var>UI_CONNECTOR_ENDPOINT</var>.<var>GCP_REGION</var>.run.app。
   • 功能：Agent Assist 功能。您必須在對話設定檔中啟用這些功能。可用的功能包括 CONVERSATION_SUMMARIZATION、KNOWLEDGE_ASSIST_V2 和 AGENT_COACHING。請注意，部分功能 (例如 SMART_REPLY) 不適用於 voice。
   • channel：指出整合功能適用於 voice。
   • 平台：指出平台為 twilio。
   • conversationProfile：Agent Assist 對話商家檔案資源名稱。例如：projects/<var>GCP_PROJECT_ID</var>/locations/<var>GCP_REGION</var>/conversationProfiles/<var>CONVERSATION_PROFILE_ID</var>
   • consumerKey：步驟 3 中的外部用戶端用戶端金鑰。
   • consumerSecret：步驟 3 中的外部用戶端應用程式用戶端密鑰。

步驟 7：測試整合功能

您可以撥打測試電話到 Salesforce 呼叫中心，測試語音整合功能。

1. 從服務控制台登入 Twilio Flex。
2. 撥打 Twilio Flex 號碼。您在步驟 1 中已記下這項資訊。
3. 在服務控制台中接聽電話。畫面上應會開啟來電號碼的新聯絡人頁面或現有聯絡人頁面。
4. 如果是新的聯絡人頁面，請儲存聯絡人。聯絡人頁面載入時，Salesforce Lightning 網頁元件應會載入側欄。
5. 測試對話雙方，確保 Agent Assist 功能運作方式符合設定。