使用 Salesforce Lightning Web Component (LWC) 整合 Agent Assist 使用者介面模組,進行即時通訊對話。
事前準備
如要整合 Agent Assist UI 模組與 Salesforce,您需要存取下列資源:
-
請按照所用作業系統的建議安裝說明操作。
-
使用
npm
安裝 Salesforce CLI 會導致相容性問題。如要避免這些問題,請使用pkg
(macOS)、exe
(Windows) 或TAR
(Linux) 安裝選項。 -
按照指示安裝
gcloud
指令,並使用gcloud auth login
進行驗證。 Salesforce UI
- 在執行個體網址或 Salesforce 登入頁面登入,並記下下列事項:
- 您的 Salesforce 我的網域網址。請按照下列步驟找出「我的網域」網址:
- 前往選單列 >「設定」選單。
- 點選 [設定]。
- 在「快速尋找」中搜尋「我的網域」。網域名稱格式如下:
MY-DOMAIN-NAME.develop.my.salesforce.com
。
- 您的 Salesforce 機構 ID。請按照下列步驟找出機構 ID:
- 前往選單列 >「設定」選單。
- 點選 [設定]。
- 輸入「公司資訊」的快速尋找搜尋查詢。 注意:這些整合步驟僅使用 Salesforce Developer Edition 測試過。如果您使用其他版本,功能授權和 Salesforce 介面可能會有所不同。
- 您的 Salesforce 我的網域網址。請按照下列步驟找出「我的網域」網址:
- 在執行個體網址或 Salesforce 登入頁面登入,並記下下列事項:
-
- 按照操作說明設定整合功能。
- 執行部署指令碼前,請使用
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 模組,請按照下列步驟操作。
執行下列程式碼,複製 Agent Assist 整合存放區並開啟專案:
git clone https://github.com/GoogleCloudPlatform/agent-assist-integrations cd salesforce/aa-lwc
執行下列指令,下載稍後會部署為靜態資源的 JS 檔案:
npm run generate-static-resources npm install
步驟 2:設定環境
您可以在特定環境 (例如正式或開發環境) 中整合 Agent Assist UI 模組。Salesforce 將這些環境稱為「機構組織 (orgs)」。
在 Salesforce 控制台中設定機構
在 Salesforce 控制台中,按照下列步驟設定機構,以便整合 Agent Assist。
- 前往選單列 >「設定」選單,然後點選「設定」。在「快速尋找」中搜尋「全通路設定」,然後點選「全通路設定」。
- 勾選「啟用全通路」。
- 選取「Automatically log agents into Omni-Channel in the new window or tab」(在新視窗或分頁中自動將服務專員登入全方位服務)。
- 按一下 [儲存]。
- 前往選單列 >「設定」選單,然後點選「設定」。在「快速尋找」中搜尋「社群」,然後依序點選「數位體驗」>「設定」。
- 勾選「啟用 Experience 工作區」。
- 按一下 [儲存]。
使用 Salesforce CLI 設定機構
請按照下列步驟,使用 Salesforce CLI 設定機構,以便整合 Agent Assist。
執行下列程式碼,並使用您平常使用的 Salesforce 登入詳細資料驗證 CLI。
npm run login
執行下列程式碼,將 LWC 部署至機構。
npm run deploy
步驟 3:建立外部用戶端應用程式
Salesforce LWC 會使用用戶端憑證 OAuth 2.0 流程驗證您的身分。外部用戶端應用程式會啟用用戶端憑證流程。使用應用程式的消費者金鑰和消費者密碼設定 Salesforce LWC,透過 Salesforce 驗證使用者。
- 前往選單列 >「設定」選單,然後點選「設定」。在「快速尋找」中搜尋「External Client App Manager」。
- 依序點選「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 設定) > 啟用用戶端憑證流程:已選取
- 已連結的應用程式名稱:
- 點選「建立」。
- 依序點選「External Client App Manager」 >「New External Client App」 >「Create」,然後輸入下列資訊:
- 前往選單列 >「設定」選單,然後點選「設定」。在「快速尋找」中搜尋「External Client App Manager」。
- 依序按一下已連結的應用程式名稱 >「編輯」。
- 依序前往「OAuth Policies」 >「OAuth Flows and External Client App Enhancements」。
- 確認已選取「Enable Client Credentials Flow」。
- 在「Run As」(以這個身分執行) 中,輸入您的登入使用者名稱。
- 按一下 [儲存]。
- 前往選單列 >「設定」選單,然後點選「設定」。在「快速尋找」中搜尋「External Client App Manager」。
- 依序按一下已連結的應用程式名稱 >「編輯」。
- 依序前往「OAuth Settings」 >「App Settings」 >「Consumer Key and Secret」。
- 輸入傳送至電子郵件的驗證碼。
- 將用戶端金鑰和密鑰複製到安全的地方。後續步驟會用到這些資訊。
- 前往選單列 >「設定」選單,然後點選「設定」。在「快速尋找」中輸入「CORS」,然後按一下「編輯」。
- 勾選「為 OAuth 端點啟用 CORS」。
- 按一下 [儲存]。
如要進一步瞭解連結的應用程式,請參閱下列 Salesforce 資源。
步驟 4:設定即時通訊用戶端
如要在 Salesforce 中使用 Agent Assist 使用者介面模組,服務專員的電腦必須安裝即時通訊用戶端。
設定應用程式內和網站的訊息功能
請按照下列步驟設定即時通訊服務。
- 前往選單列 >「設定」選單,然後點選「設定」。在「快速尋找」中搜尋「受信任的網址」,然後點選「新增受信任的網址」。
- 輸入「API Name」(API 名稱):
ui_connector
。 - 輸入您透過 Agent Assist 整合後端部署的 UI 連接器 Cloud Run 服務端點網址。您可以在 Cloud Run 控制台中找到這個網址。例如:
https://UI_CONNECTOR_SUBDOMAIN.us-central1.run.app
。 - 選取「CSP 指令」中的所有選項。
- 按一下「儲存並新增」。
- 輸入「API Name」(API 名稱):
twilio_flex
。 - 輸入網址
https://flex.twilio.com
。 - 選取「CSP 指令」中的所有選項。
- 按一下「儲存並新增」。
- 輸入「API Name」(API 名稱):
salesforce_domain
。 - 輸入 Salesforce 網域的網址,格式如下:
https://YOUR_SUBDOMAIN.my.salesforce.com
。 - 選取「CSP 指令」中的所有選項。
- 按一下 [儲存]。
- 輸入「API Name」(API 名稱):
- 前往選單列 >「設定」選單,然後點選「設定」。在「快速尋找」中搜尋「佇列」,然後按一下「新增」。
- 輸入下列資訊:
- 標籤:訊息佇列
- 佇列名稱:Messaging_Queue
- 轉送設定:Messaging_Routing_Configuration
- 按一下「支援的物件」,然後新增「訊息使用者、訊息工作階段」。
- 按一下「佇列成員」,然後新增「使用者:您的登入使用者」。
- 按一下 [儲存]。
- 輸入下列資訊:
- 前往選單列 >「設定」選單,然後點選「設定」。在「快速尋找」中搜尋「權限集」。
- 按一下「訊息傳送代理商權限集」。
- 依序點選「Service Presence Statuses Access」(服務在線狀態存取權) >「Edit」(編輯)。
- 選取「忙碌」和「在線上 - 訊息」狀態。
- 依序點選「新增」>「儲存」。
- 前往選單列 >「設定」選單,然後點選「設定」。在「快速尋找」中搜尋「使用者」,然後按一下「使用者」。
- 按一下使用者名稱,確認已啟用「Service Cloud User」。
- 在頁面上找到「權限集授權指派」。
- 按一下「編輯指派項目」,然後勾選「應用程式內和網站使用者訊息」。
- 按一下 [儲存]。
- 在頁面上找到「權限集指派」。
- 按一下「編輯指派項目」,然後選取「訊息傳送服務專員權限集」。
- 依序點選「新增」>「儲存」。
- 前往選單列 >「設定」選單,然後點選「設定」。在「快速尋找」中搜尋「訊息設定」,然後按一下「新管道」。
- 選取「應用程式內和網站即時通訊」。
- 輸入「名稱」:訊息管道。
- 按一下 [儲存]。
- 將「Routing Type」(路徑類型) 設為「Omni-Queue」(全方位佇列),並將「Queue」(佇列) 設為「Messaging Queue」(訊息佇列)。
- 按一下「儲存」,然後前往「訊息設定」。
- 依序點選訊息管道名稱和「啟用」。
- 詳閱後,請接受條款及細則。
- 前往選單列 >「設定」選單,然後點選「設定」。在「快速尋找」中搜尋「Embedded Service Deployments」,然後按一下「New Deployment」。
- 依序點選「應用程式內和網站訊息」 >「下一步」 >「網站」 >「下一步」。
- 填入下列詳細資料:
- 名稱:Messaging Embedded Service Deployment
- 開發人員名稱:Messaging_Embedded_Service_Deployment
- 網域:example.com
- 管道:訊息管道
- 按一下 [儲存]。請等待部署作業完成。
- 在「Embedded Service Deployment」設定中,按一下「發布」。
- 依序點選「重新整理」和「測試訊息」。
測試應用程式內和網站的訊息功能
請按照下列步驟測試即時通訊服務。
- 按一下「測試訊息」。
- 新分頁載入後,按一下對話泡泡即可開始新的測試對話。
- 傳送訊息,例如「
"Test"
」。 - 前往 Salesforce 瀏覽器分頁。
- 在「設定」工具列中,按一下「應用程式啟動器」選單,然後選取「服務控制台」。
- 按一下公用程式工具列中的「全方位通路」。
- 將狀態設為「線上 - 訊息」。
- 接受傳入的訊息。這會在服務控制台中開啟新的分頁,顯示該對話。無法查看即時通訊轉錄稿。
- 前往選單列 >「設定」選單。
- 按一下「編輯頁面」。
- 從「元件」選單中,將「強化對話」拖曳至「對話」窗格。
- 依序點選「儲存」 >「啟用」 >「設為機構預設值」 >「電腦」 >「返回」圖示 。
- 請重新整理頁面。
- 按一下公用程式工具列中的「全方位通路」。
- 將狀態設為「線上 - 訊息」。
- 回覆「測試」訊息,確認訊息功能正常運作。
如果遇到問題且需要更多資訊,請參閱完整的 Salesforce 應用程式內和網站訊息設定指南。
步驟 5:安裝 Salesforce LWC
請按照下列步驟,使用 Lightning Experience 編輯器將 Salesforce LWC 新增至訊息工作階段頁面。繼續執行步驟 4 的測試對話。
- 前往選單列 >「設定」選單,然後按一下「編輯頁面」。
從「元件」側欄將
agentAssistContainerModule
移至側欄。按一下您在上一個步驟中放置的元件。
按照下列指示填寫表單欄位,新增設定詳細資料。
- 端點:服務專員整合後端 UI 連接器的網址,例如 Cloud Run 控制台的網址,如:
https://UI-CONNECTOR-ENDPOINT.GCP-REGION.run.app
- 功能:在對話設定檔中啟用 Agent Assist 功能,例如
CONVERSATION_SUMMARIZATION
、KNOWLEDGE_ASSIST_V2
、SMART_REPLY
和AGENT_COACHING
conversationProfile
:Agent Assist 對話設定檔資源名稱 (例如:projects/GCP-PROJECT-ID/locations/GCP-REGION/conversationProfiles/CONVERSATION-PROFILE-ID
)- consumerKey:步驟 3 中的已連線應用程式用戶端金鑰
- consumerSecret:步驟 3 中連結的應用程式用戶端密鑰
- 端點:服務專員整合後端 UI 連接器的網址,例如 Cloud Run 控制台的網址,如: