本指南提供全通路閘道的完整快速入門說明，您將瞭解如何將 Agent Studio 虛擬服務專員設為目的地、將 WebChat 管道設為來源，以及建立轉送政策來連結兩者。
事前準備
開始本快速入門導覽課程前，您必須擁有 Google Cloud 專案，並完成初始設定步驟：
- 啟用 API 和服務代理程式：請務必啟用必要 API，並按照How-to 總覽所述設定服務代理程式。
- 設定 Agent Studio 代理：建構及設定 Agent Studio 代理，並為該代理建立對話設定檔。如需詳細操作說明，請參閱「對話式代理說明文件」和「為 CX Agent Studio 代理建立對話設定檔」。建立的代理程式必須位於 Omnichannel Gateway 支援的區域。
- 準備用於測試的網頁應用程式：您需要網站或網頁應用程式，才能部署網路即時通訊小工具進行測試。這可以是任何安全來源網頁，包括本機網頁開發伺服器 (例如使用
python -m http.server啟動本機伺服器)，或部署在 Cloud Run 等服務上的服務。
步驟 1：設定 Agent Studio 代理程式 (目的地)
如要將 Agent Studio 代理程式連結至 Omnichannel Gateway，請設定代理程式執行器服務帳戶，並建立目的地端點設定。
設定代理程式執行器服務帳戶
所有代理程式都會在服務帳戶下執行。Omnichannel Gateway 代表服務專員撥打電話時，會使用這個服務帳戶進行驗證。您可以使用這個服務帳戶，限制代理程式的存取範圍。
建立代理程式執行的服務帳戶。為服務帳戶指派下列角色：
roles/serviceusage.serviceUsageConsumer- 代理程式所需的任何其他角色。
此外，請在代理程式執行器服務帳戶中，授予 Omnichannel Gateway 服務代理程式「服務帳戶使用者」角色 (roles/iam.serviceAccountUser)，允許代理程式以服務帳戶身分執行工作流程：
gcloud
gcloud iam service-accounts create agent-runner \ --description="Service account for executing agentic application workflows" \ --display-name="Agent Runner" \ --project="PROJECT_ID" gcloud projects add-iam-policy-binding PROJECT_ID \ --member="serviceAccount:agent-runner@PROJECT_ID." \ --role="roles/serviceusage.serviceUsageConsumer" gcloud iam service-accounts add-iam-policy-binding \ agent-runner@PROJECT_ID. \ --member="serviceAccount:service-PROJECT_NUMBER@gcp-sa-agenticapplications." \ --role="roles/iam.serviceAccountUser" \ --project="PROJECT_ID" gcloud projects add-iam-policy-binding PROJECT_ID \ --member="serviceAccount:agent-runner@PROJECT_ID." \ --role="roles/dialogflow.serviceAgent"
如果代理程式需要額外的工具呼叫功能，您之後可以新增更具體的權限。
建立目的地端點設定
建立指向 Agent Studio 對話設定檔的目的地端點設定。
如要將代理程式連結至 Omnichannel Gateway，請執行下列範例指令，建立端點設定。請將預留位置替換為目標專案、代理程式 ID 和服務帳戶詳細資料：
curl
curl -i -X POST \ -H "Authorization: Bearer $(gcloud auth application-default print-access-token)" \ -H "Content-Type: application/json" \ "https://agenticapplications.googleapis.com/v1alpha/projects/PROJECT_ID/locations/LOCATION/omnichannelEndpointConfigs" \ -d @- <<EOF { "displayName": "Agent Studio Destination Configuration", "destinationConfig": { "conversationProfile": { "conversationProfile": "projects/PROJECT_ID/locations/LOCATION/conversationProfiles/CONVERSATION_PROFILE_ID", "serviceAccount": "projects/PROJECT_ID/serviceAccounts/agent-runner@PROJECT_ID." } } } EOF
步驟 2：設定 WebChat 管道 (來源)
如要接收使用者傳送的訊息，請將 WebChat 管道設定為來源端點、設定權杖代理程式以進行安全驗證，並將即時通訊小工具嵌入網站。
建立來源端點設定
為 WebChat 建立來源端點設定。
如要將代理程式連結至 Omnichannel Gateway，請執行下列範例指令，建立端點設定。請將預留位置替換為目標專案、代理程式 ID 和服務帳戶詳細資料：
curl
curl -i -X POST \ -H "Authorization: Bearer $(gcloud auth application-default print-access-token)" \ -H "Content-Type: application/json" \ "https://agenticapplications.googleapis.com/v1alpha/projects/PROJECT_ID/locations/LOCATION/omnichannelEndpointConfigs" \ -d @- <<EOF { "displayName": "WebChat Source Configuration", "sourceConfig": { "webChatSdkConfig": {} } } EOF
設定權杖代理程式
如要使用 WebChat，Omnichannel Gateway 必須透過不記名權杖驗證要求。權杖代理程式資源會產生存取權杖，供用戶端小工具呼叫 Google API 時使用。
為權杖代理程式建立服務帳戶
為權杖代理程式建立專屬服務帳戶。 指派下列角色：
roles/agenticapplications.user
我們提供了一組範例指令，說明如何使用 gcloud 執行這項操作：
gcloud
gcloud iam service-accounts create token-broker \ --description="Service account for the token broker application" \ --display-name="Service account for Token Broker" \ --project="PROJECT_ID" gcloud projects add-iam-policy-binding PROJECT_ID \ --member="serviceAccount:token-broker@PROJECT_ID." \ --role="roles/agenticapplications.user"
建立權杖代理程式資源
執行下列 cURL 指令來初始化代理程式。別忘了視需要替換變數：
curl
curl -i -X POST \ -H "Authorization: Bearer $(gcloud auth application-default print-access-token)" \ -H "Content-Type: application/json" \ "https://agenticapplications.googleapis.com/v1alpha/projects/PROJECT_ID/locations/LOCATION/omnichannelTokenBrokers" \ -d @- <<EOF { "displayName": "A broker", "issuerServiceAccount": "YOUR_BROKER_SERVICE_ACCOUNT_HERE" } EOF
嵌入及初始化即時通訊小工具
按照「在網站上嵌入小工具」一文的操作說明，在網站上嵌入並初始化網頁即時通訊小工具。
在 HTML 網頁中設定 chat-messenger 元素，連線至來源端點設定。將專案 ID、位置和端點設定詳細資料替換為您自己的：
<chat-messenger
project-id="PROJECT_ID"
enable-audio-input="false"
location="LOCATION"
service='{"name":"omnichannel", "endpointConfig": "projects/PROJECT_ID/locations/LOCATION/omnichannelEndpointConfigs/SOURCE_ENDPOINT_CONFIG_ID"}'
language-code="en"
url-allowlist="https://gstatic.com/"
></chat-messenger>
接著，使用 chatSdk 和權杖代理程式資源名稱建立安全驗證：
<script>
window.addEventListener("chat-messenger-loaded", async () => {
const context = await window.chatSdk.prebuilts.concorde.createContext({
tokenBroker: {
tokenBrokerName: "projects/PROJECT_ID/locations/LOCATION/omnichannelTokenBrokers/TOKEN_BROKER_NAME",
},
});
window.chatSdk.registerContext(context);
});
</script>
步驟 3：設定路徑
如要將 WebChat 來源管道的來電流量連線至 Agent Studio 目的地代理程式，請建立路徑。本範例使用靜態路由政策。
如要建立路徑，請執行下列範例指令。將預留位置替換為目標專案和端點設定詳細資料：
curl
curl -i -X POST \ -H "Authorization: Bearer $(gcloud auth application-default print-access-token)" \ -H "Content-Type: application/json" \ "https://agenticapplications.googleapis.com/v1alpha/projects/PROJECT_ID/locations/LOCATION/omnichannelRoutes" \ -d @- <<EOF { "displayName": "WebChat to Agent Studio Route", "sourceEndpointConfig": [ "projects/PROJECT_ID/locations/LOCATION/omnichannelEndpointConfigs/SOURCE_ENDPOINT_CONFIG_ID" ], "staticRoutingPolicy": { "destinationEndpointConfigs": [ "projects/PROJECT_ID/locations/LOCATION/omnichannelEndpointConfigs/DESTINATION_ENDPOINT_CONFIG_ID" ], "deadline": "10s" } } EOF
步驟 4：測試整合功能
設定代理、管道和路徑後，即可測試端對端對話流程：
- 開啟內嵌即時通訊小工具的網頁應用程式。如果您在本機進行測試，可以在 HTML 檔案的目錄中啟動本機網路伺服器，方法是在終端機中執行
python -m http.server，然後在瀏覽器中前往http://localhost:8000。 - 按一下即時通訊小工具，開啟對話視窗。
- 傳送訊息，並確認您收到來自 Agent Studio 代理程式的回覆，該回覆會透過 Omnichannel Gateway 轉送。