Salesforce 整合

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

事前準備

如要整合 Agent Assist UI 模組與 Salesforce,您需要存取下列資源:

  • Node.js

    請按照所用作業系統的建議安裝說明操作。

  • Salesforce CLI

    使用 npm 安裝 Salesforce CLI 會導致相容性問題。如要避免這些問題,請使用 pkg (macOS)、exe (Windows) 或 TAR (Linux) 安裝選項。

  • Gcloud CLI

    按照指示安裝 gcloud 指令,並使用 gcloud auth login 進行驗證。

  • Salesforce UI

    • 在執行個體網址或 Salesforce 登入頁面登入,並記下下列事項:
      • 您的 Salesforce 我的網域網址。請按照下列步驟找出「我的網域」網址
        1. 前往選單列 >「設定」選單。
        2. 點選 [設定]。
        3. 在「快速尋找」中搜尋「我的網域」。網域名稱格式如下:MY-DOMAIN-NAME.develop.my.salesforce.com
      • 您的 Salesforce 機構 ID。請按照下列步驟找出機構 ID:
        1. 前往選單列 >「設定」選單。
        2. 點選 [設定]。
        3. 輸入「公司資訊」的快速尋找搜尋查詢。 注意:這些整合步驟僅使用 Salesforce Developer Edition 測試過。如果您使用其他版本,功能授權和 Salesforce 介面可能會有所不同。
  • 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:設定專案

如要開始整合 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 將這些環境稱為「機構組織 (orgs)」

在 Salesforce 控制台中設定機構

在 Salesforce 控制台中,按照下列步驟設定機構,以便整合 Agent Assist。

  1. 前往選單列 >「設定」選單,然後點選「設定」。在「快速尋找」中搜尋「全通路設定」,然後點選「全通路設定」
    1. 勾選「啟用全通路」
    2. 選取「Automatically log agents into Omni-Channel in the new window or tab」(在新視窗或分頁中自動將服務專員登入全方位服務)
    3. 按一下 [儲存]
  2. 前往選單列 >「設定」選單,然後點選「設定」。在「快速尋找」中搜尋「社群」,然後依序點選「數位體驗」>「設定」
    1. 勾選「啟用 Experience 工作區」
    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. 前往選單列 >「設定」選單,然後點選「設定」。在「快速尋找」中搜尋「External Client App Manager」。
    1. 依序點選「External Client App Manager」 >「New External Client App」 >「Create」,然後輸入下列資訊:
      • 已連結的應用程式名稱lwc auth
      • API 名稱lwc_auth
      • 聯絡電子郵件地址your_email@example.com
      • 「API (Enable OAuth Settings)」 >「Enable OAuth」:已選取
      • 「API (Enable OAuth Settings)」 >「Callback URL」https://login.salesforce.com/services/oauth2/callback
      • API (Enable OAuth Settings) > Selected OAuth Scopes:存取身分網址服務
      • API (啟用 OAuth 設定) > 啟用用戶端憑證流程:已選取
    2. 點選「建立」
  2. 前往選單列 >「設定」選單,然後點選「設定」。在「快速尋找」中搜尋「External Client App Manager」。
    1. 依序按一下已連結的應用程式名稱 >「編輯」
    2. 依序前往「OAuth Policies」 >「OAuth Flows and External Client App Enhancements」
    3. 確認已選取「Enable Client Credentials Flow」
    4. 在「Run As」(以這個身分執行) 中,輸入您的登入使用者名稱。
    5. 按一下 [儲存]
  3. 前往選單列 >「設定」選單,然後點選「設定」。在「快速尋找」中搜尋「External Client App Manager」。
    1. 依序按一下已連結的應用程式名稱 >「編輯」
    2. 依序前往「OAuth Settings」 >「App Settings」 >「Consumer Key and Secret」
    3. 輸入傳送至電子郵件的驗證碼。
    4. 將用戶端金鑰和密鑰複製到安全的地方。後續步驟會用到這些資訊。
  4. 前往選單列 >「設定」選單,然後點選「設定」。在「快速尋找」中輸入「CORS」,然後按一下「編輯」
    1. 勾選「為 OAuth 端點啟用 CORS」
    2. 按一下 [儲存]

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

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

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

設定應用程式內和網站的訊息功能

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

  1. 前往選單列 >「設定」選單,然後點選「設定」。在「快速尋找」中搜尋「受信任的網址」,然後點選「新增受信任的網址」
    1. 輸入「API Name」(API 名稱)ui_connector
    2. 輸入您透過 Agent Assist 整合後端部署的 UI 連接器 Cloud Run 服務端點網址。您可以在 Cloud Run 控制台中找到這個網址。例如:https://UI_CONNECTOR_SUBDOMAIN.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://YOUR_SUBDOMAIN.my.salesforce.com
    11. 選取「CSP 指令」中的所有選項。
    12. 按一下 [儲存]
  2. 前往選單列 >「設定」選單,然後點選「設定」。在「快速尋找」中搜尋「佇列」,然後按一下「新增」
    1. 輸入下列資訊:
      • 標籤:訊息佇列
      • 佇列名稱:Messaging_Queue
      • 轉送設定:Messaging_Routing_Configuration
    2. 按一下「支援的物件」,然後新增「訊息使用者、訊息工作階段」。
    3. 按一下「佇列成員」,然後新增「使用者:您的登入使用者」。
    4. 按一下 [儲存]
  3. 前往選單列 >「設定」選單,然後點選「設定」。在「快速尋找」中搜尋「權限集」。
    1. 按一下「訊息傳送代理商權限集」
    2. 依序點選「Service Presence Statuses Access」(服務在線狀態存取權) >「Edit」(編輯)
    3. 選取「忙碌」和「在線上 - 訊息」狀態。
    4. 依序點選「新增」>「儲存」。
  4. 前往選單列 >「設定」選單,然後點選「設定」。在「快速尋找」中搜尋「使用者」,然後按一下「使用者」
    1. 按一下使用者名稱,確認已啟用「Service Cloud User」
    2. 在頁面上找到「權限集授權指派」
    3. 按一下「編輯指派項目」,然後勾選「應用程式內和網站使用者訊息」
    4. 按一下 [儲存]
    5. 在頁面上找到「權限集指派」
    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. 填入下列詳細資料:
      • 名稱:Messaging Embedded Service Deployment
      • 開發人員名稱:Messaging_Embedded_Service_Deployment
      • 網域:example.com
      • 管道:訊息管道
    3. 按一下 [儲存]。請等待部署作業完成。
    4. 在「Embedded Service Deployment」設定中,按一下「發布」
    5. 依序點選「重新整理」和「測試訊息」。

測試應用程式內和網站的訊息功能

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

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

如果遇到問題且需要更多資訊,請參閱完整的 Salesforce 應用程式內和網站訊息設定指南

步驟 5:安裝 Salesforce LWC

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

  1. 前往選單列 >「設定」選單,然後按一下「編輯頁面」
  2. 從「元件」側欄將 agentAssistContainerModule 移至側欄。

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

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

    • 端點服務專員整合後端 UI 連接器的網址,例如 Cloud Run 控制台的網址,如:https://UI-CONNECTOR-ENDPOINT.GCP-REGION.run.app
    • 功能:在對話設定檔中啟用 Agent Assist 功能,例如 CONVERSATION_SUMMARIZATIONKNOWLEDGE_ASSIST_V2SMART_REPLYAGENT_COACHING
    • conversationProfileAgent Assist 對話設定檔資源名稱 (例如:projects/GCP-PROJECT-ID/locations/GCP-REGION/conversationProfiles/CONVERSATION-PROFILE-ID)
    • consumerKey:步驟 3 中的已連線應用程式用戶端金鑰
    • consumerSecret:步驟 3 中連結的應用程式用戶端密鑰