將 Salesforce 語音整合與 Twilio Flex 整合

這項語音整合功能會使用 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 使用者介面
    1. 在執行個體網址或 login.salesforce.com 登入，並記下下列事項：
      • 您的 Salesforce「我的網域網址」。如要查看這個 ID，請依序前往選單列 >「設定」選單，然後點選「設定」。在「快速搜尋」中輸入「我的網域」。網域名稱的格式如下：MY-DOMAIN-NAME.develop.my.salesforce.com。
      • 您的 Salesforce 機構 ID。如要查看，請前往選單列 >「設定」選單，然後按一下「設定」。在「快速尋找」中搜尋「公司資訊」。
  • 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 使用者介面必要條件中記下這個值。

步驟 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. 在「設定」分頁中，依下列步驟設定外掛程式：
    • 專屬名稱：SipRec1
    • 工作階段錄製伺服器：
      sip:+<GTP-provisioned-phone-number>@216.239.36.145:5672;transport=tls;secure=true;edge=umatilla
    • 請與 Google 代表合作，使用電話整合總覽說明文件佈建 GTP 號碼，該文件詳細說明瞭相關程序。您可以忽略 SBC 設定和驗證步驟，因為 Twilio Siprec 連接器已完成這些步驟。
  4. 依序前往「Twilio Home」 >「Functions and Assets」。
    • 如果側欄未顯示「函式和資產」，請從「探索產品」固定顯示。
  5. 按一下「建立服務」。
  6. 將新服務命名為 ui-connector-auth。
  7. 在隨即顯示的編輯器中，依序點選「新增 +」 >「新增函式」。
  8. 將函式命名為 conversation-name。
  9. 按一下 ，然後將函式顯示設定變更為「公開」。
  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」(語音 - Studio 工作流程) 部分，按一下「Voice IVR」(語音 IVR)。
  4. 將「Make HTTP Request」小工具拖曳至流程中。
  5. 從 SendCallToAgent 小工具的輸入內容中，取消連結 Incoming Call。
  6. 將「Incoming Call」連結至「Make HTTP Request」小工具的輸入內容。
  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 需要載入第三方 JS 的靜態資源。
    npm run generate-static-resources
npm install

步驟 3：設定 Salesforce 環境

您可以在特定環境 (例如正式或開發環境) 中整合 Agent Assist UI 模組。Salesforce 將這些環境稱為「機構組織 (orgs)」。

使用 Salesforce CLI 設定機構

請按照下列步驟，使用 Salesforce CLI 設定機構，以便整合 Agent Assist。

  1. 執行下列程式碼，並使用您平常使用的 Salesforce 登入詳細資料驗證 CLI。
    npm run login
  2. 執行下列程式碼，將 LWC 部署至機構。
    npm run deploy

步驟 4：建立已連結的應用程式

Salesforce Lightning 網頁元件會使用用戶端憑證 OAuth 2.0 流程驗證您的身分。已連線的應用程式會啟用用戶端憑證流程。使用應用程式的消費者金鑰和消費者密碼設定 LWC，透過 Salesforce 驗證使用者。

設定基本設定

  1. 前往選單列 >「設定」選單，然後點選「設定」。在「快速尋找」中搜尋「應用程式管理工具」。
  2. 依序點選「New Connected App」 >「Create a Connected App」 >「Continue」，然後輸入下列資訊。
    • 已連結的應用程式名稱：lwc auth
    • API 名稱：lwc_auth
    • 聯絡電子郵件地址：your_email@example.com
    • 啟用 OAuth 設定：checked
    • 回呼網址：https://login.salesforce.com/services/oauth2/callback
    • 選取的 OAuth 範圍：存取身分識別網址服務
    • 啟用用戶端憑證流程：checked
  3. 按一下 [儲存]。

如要進一步瞭解連結的應用程式，請參閱下列 Salesforce 資源。

設定執行授權和憑證

  1. 前往選單列 >「設定」選單，然後點選「設定」。
  2. 在「快速尋找」中搜尋「管理連結的應用程式」。
  3. 依序按一下已連結的應用程式名稱 >「編輯」。
    • 前往「Client Credentials Flow」(用戶端憑證流程)。
    • 在「Run As」(以...身分執行) 部分，按一下放大鏡，然後選取您的使用者名稱。
    • 按一下 [儲存]。
  4. 前往選單列 >「設定」選單，然後點選「設定」。
  5. 在「快速尋找」中搜尋「應用程式管理工具」。
  6. 找到「lwc auth」，然後按一下 。
    • 依序按一下「查看」 >「管理消費者詳細資料」。
    • 輸入傳送至電子郵件的驗證碼。
    • 將「Consumer Key」和「Consumer Secret」複製到安全的地方，後續步驟會用到。

建立 CORS 和內容安全政策

  1. 前往選單列 >「設定」選單，然後點選「設定」。
  2. 在「快速尋找」中輸入「CORS」，然後按一下「編輯」。
    • 勾選「為 OAuth 端點啟用 CORS」。
    • 按一下 [儲存]。
  3. 前往選單列 >「設定」選單，然後點選「設定」。
  4. 在「快速尋找」中搜尋「受信任的網址」，然後點選「新增受信任的網址」。
  5. 輸入「API Name」(API 名稱)：ui_connector
    • 輸入您透過 Agent Assist Integration Backend 部署的 UI Connector Cloud Run 服務端點 URL。您可以在 Cloud Run 控制台中找到這個網址。例如：https://UI_CONNECTOR_SUBDOMAIN.GCP-REGION.run.app。
    • 勾選「CSP 指令」中的所有方塊。
    • 按一下「儲存並新增」。
  6. 輸入「API Name」(API 名稱)：ui_connector_wss
    • 輸入您透過 Agent Assist Integration Backend 部署的 UI Connector Cloud Run 服務端點 URL。您可以在 Cloud Run 控制台中找到這個網址。將通訊協定變更為 wss，以用於 WebSocket 流量。例如：wss://UI_CONNECTOR_SUBDOMAIN.GCP-REGION.run.app。
    • 勾選「CSP 指令」中的所有方塊。
    • 按一下「儲存並新增」。
  7. 輸入「API Name」(API 名稱)：salesforce_domain
    • 以 https://YOUR_SUBDOMAIN.my.salesforce.com 格式輸入 Salesforce 網域的 URL。
    • 勾選「CSP 指令」中的所有方塊。
    • 按一下 [儲存]。

步驟 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 Web Component

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

  1. 前往「服務控制台」，然後選取「聯絡人」。
  2. 選取聯絡人記錄。
  3. 依序點選「設定」選單 >「編輯頁面」。
  4. 依序點選「範本」 >「變更」。
    • 選取「標題」和「兩個大小相等的區域」。
    • 點選「下一步」。
    • 將每個區域對應至新區域。
    • 按一下 [完成]。
  5. 從「元件」側欄將 agentAssistContainerModule 移至側欄。注意：這個元件是由 npm deploy 指令提供。
  6. 按一下上一個步驟中放置的元件，然後填寫表單欄位，新增設定詳細資料。
    • 端點：整合後端 UI 連接器的網址。例如 Cloud Run 控制台中的網址，如：https://UI-CONNECTOR-ENDPOINT.GCP-REGION.run.app。
    • 功能：加入 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 中的已連線應用程式用戶端密鑰。

步驟 7：測試整合功能

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

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