Salesforce 即時通訊整合

使用 Salesforce Lightning Web Component (LWC) 整合 Agent Assist 使用者介面模組，進行即時通訊對話。

事前準備

如要整合 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 先決條件中記下這個值。

步驟 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. 選取「啟用全方位通路」。
    2. 選取「Automatically log agents into Omni-Channel in the new window or tab」(在新視窗或分頁中自動將服務專員登入全方位服務)。
    3. 按一下 [儲存]。
  2. 前往選單列 >「設定」選單，然後點選「設定」。在「快速尋找」方塊中輸入「社群」，然後依序點選「數位體驗」 >「設定」。
    1. 選取「啟用體驗工作區」。
    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」，然後輸入下列資訊。
    2. 外部用戶端應用程式名稱：lwc auth
    3. API 名稱：lwc_auth
    4. 聯絡電子郵件地址：your_email@example.com
    5. 「API (Enable OAuth Settings)」 >「Enable OAuth」：已選取
    6. 「API (Enable OAuth Settings)」 >「Callback URL」：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 Name」(API 名稱)：ui_connector
    1. 輸入您透過 Agent Assist 整合後端部署的 UI 連接器 Cloud Run 服務端點 URL。您可以在 Cloud Run 控制台中找到這個網址。例如：https://<var>UI_CONNECTOR_SUBDOMAIN</var>.<var>GCP_REGION</var>.run.app。
    2. 選取「CSP 指令」下方的所有核取方塊。
    3. 按一下「儲存並新增」。
  6. 輸入「API Name」(API 名稱)：salesforce_domain
    1. 以 https://<var>YOUR_SUBDOMAIN</var>.my.salesforce.com 格式輸入 Salesforce 網域的 URL。
    2. 選取「CSP 指令」下方的所有核取方塊。
    3. 按一下 [儲存]。

步驟 4：設定即時通訊用戶端

如要在 Salesforce 中使用 Agent Assist 使用者介面模組，服務專員的電腦必須安裝即時通訊用戶端。

設定進階對話

請按照下列步驟設定即時通訊服務。

  1. 前往選單列 >「設定」選單，然後點選「設定」。在「快速尋找」方塊中輸入「信任的網址」，然後點選「新增信任的網址」。
    1. 輸入「API Name」(API 名稱)：ui_connector。
    2. 輸入您透過 Agent Assist 整合後端部署的 UI 連接器 Cloud Run 服務端點網址。您可以在 Cloud Run 控制台中找到這個網址。例如：https://<var>UI_CONNECTOR_SUBDOMAIN</var>.us-central1.run.app。
    3. 選取「CSP 指令」下方的所有核取方塊。
    4. 按一下「儲存並新增」。
    5. 輸入「API Name」(API 名稱)：twilio_flex。
    6. 輸入網址 https://flex.twilio.com。
    7. 選取「CSP 指令」下方的所有核取方塊。
    8. 按一下「儲存並新增」。
    9. 輸入「API Name」(API 名稱)：salesforce_domain。
    10. 輸入 Salesforce 網域的網址，格式如下：https://<var>YOUR_SUBDOMAIN</var>.my.salesforce.com。
    11. 選取「CSP 指令」下方的所有核取方塊。
    12. 按一下 [儲存]。
  2. 前往選單列 >「設定」選單，然後點選「設定」。在「快速尋找」中搜尋「佇列」，然後按一下「新增」。
    1. 輸入下列資訊：
    2. 標籤：訊息佇列
    3. 佇列名稱：Messaging_Queue
    4. 轉送設定：Messaging_Routing_Configuration
    5. 按一下「支援的物件」，然後新增「訊息服務使用者」和「訊息服務工作階段」。
    6. 按一下「佇列成員」，然後新增「使用者：您的登入使用者」。
    7. 按一下 [儲存]。
  3. 前往選單列 >「設定」選單，然後點選「設定」。在「快速尋找」方塊中輸入「權限集」。
    1. 按一下「Messaging Agents Permission Set」(訊息代理程式權限集)。
    2. 依序點選「服務狀態存取權」>「編輯」。
    3. 選取「忙碌」和「在線上 - 訊息」狀態。
    4. 依序點選「新增」>「儲存」。
  4. 前往選單列 >「設定」選單，然後點選「設定」。在「快速搜尋」方塊中輸入「使用者」，然後按一下「使用者」。
    1. 按一下使用者名稱，確認已啟用「Service Cloud User」。
    2. 在頁面上找到「權限集授權指派」。
    3. 按一下「編輯指派項目」，然後選取「進階即時通訊使用者」。
    4. 按一下 [儲存]。
    5. 在頁面上找到「Permission Set Assignments」(權限集指派)。
    6. 按一下「編輯指派項目」，然後選取「訊息傳送服務專員權限集」。
    7. 依序點選「新增」>「儲存」。
  5. 前往選單列 >「設定」選單，然後點選「設定」。在「快速尋找」方塊中輸入「訊息設定」，然後點選「新增管道」。
    1. 選取「強化版即時通訊」。
    2. 輸入「名稱」：訊息管道。
    3. 按一下 [儲存]。
    4. 將「Routing Type」(路徑類型) 設為「Omni-Queue」(全方位佇列)，並將「Queue」(佇列) 設為「Messaging Queue」(訊息佇列)。
    5. 按一下「儲存」，然後前往「訊息設定」。
    6. 按一下訊息管道名稱，然後點選「啟用」。
    7. 詳閱後，請接受條款及細則。
  6. 前往選單列 >「設定」選單，然後點選「設定」。在「快速尋找」方塊中輸入「Embedded Service Deployments」，然後按一下「New Deployment」。
    1. 依序點選「加強型即時通訊」 >「下一步」 >「網站」 >「下一步」。
    2. 填寫下列詳細資料：
    3. 名稱：Messaging Embedded Service Deployment
    4. 開發人員名稱：Messaging_Embedded_Service_Deployment
    5. 網域：example.com
    6. 管道：訊息管道
    7. 按一下 [儲存]。請等待部署作業完成。
    8. 在「Embedded Service Deployment」設定中，按一下「發布」。
    9. 依序點選「重新整理」和「測試訊息」。

測試進階即時通訊

請按照下列步驟測試即時通訊服務。

  1. 按一下「測試訊息」。
  2. 新分頁載入後，按一下對話方塊即可開始新的測試對話。
  3. 傳送訊息，例如「測試」。
  4. 前往 Salesforce 瀏覽器分頁。
  5. 在「設定」工具列上，按一下「應用程式啟動器」選單，然後選取「服務控制台」。
  6. 按一下公用程式工具列中的「全方位通路」。
  7. 將狀態設為「線上 - 訊息」。
  8. 接受傳入的訊息。這會在對話的服務控制台中開啟新分頁。無法查看即時通訊記錄。
  9. 前往選單列 >「設定」選單。
  10. 按一下「編輯頁面」。
  11. 從「Components」選單中，將「Enhanced Conversation」元件拖曳至「Conversation」窗格。
  12. 依序點選「儲存」 >「啟用」 >「指派為機構預設值」 >「電腦」 >「返回」。
  13. 請重新整理頁面。
  14. 按一下公用程式工具列中的「全方位通路」。
  15. 將狀態設為「線上 - 訊息」。
  16. 回覆「測試」訊息，確認訊息功能正常運作。

如果遇到問題且需要更多資訊，請參閱完整的 Salesforce Enhanced Chat 設定指南。

步驟 5：安裝 Salesforce Lightning Web Component

請按照下列步驟，使用 Lightning Experience 編輯器將 Salesforce LWC 新增至訊息工作階段頁面。繼續執行步驟 4 的測試對話。

  1. 前往選單列 >「設定」選單，然後按一下「編輯頁面」。

  2. 從「元件」側欄將 agentAssistContainerModule 移至側欄。

  3. 按一下您在上一個步驟中放置的元件。

  4. 按照下列指示填寫表單欄位，新增設定詳細資料。

    • 端點：代理程式整合後端 UI 連接器的網址，例如 Cloud Run 控制台的網址，如：https://<var>UI_CONNECTOR_ENDPOINT</var>.<var>GCP_REGION</var>.run.app
    • 功能：在對話設定檔中啟用 Agent Assist 功能，例如 CONVERSATION_SUMMARIZATION、KNOWLEDGE_ASSIST_V2、SMART_REPLY 和 AGENT_COACHING
    • channel：指出管道為 chat。
    • 平台：指出平台為 messaging。
    • conversationProfile：Agent Assist 對話設定檔資源名稱 (例如：projects/<var>GCP_PROJECT_ID</var>/locations/<var>GCP_REGION</var>/conversationProfiles/<var>CONVERSATION_PROFILE_ID</var>)
    • consumerKey：步驟 3 中的外部用戶端應用程式用戶端金鑰
    • consumerSecret：步驟 3 中的外部用戶端應用程式消費者密鑰