使用預建 SDK 設定 WebChat

本指南說明如何使用預先建構的 SDK 選項，整合及設定 Omnichannel Gateway 的現成 WebChat 體驗。您將瞭解如何在網站上部署浮動聊天小工具，並將其轉送給您設定的服務專員。

事前準備

請確認您已在 Omnichannel Gateway 中設定支援的代理程式，並已設定指向該代理程式的端點設定。此外，請確認您已完成「How-to 總覽」中所述的初始專案設定。

此外，您應有要嵌入即時通訊小工具的網頁應用程式。這可以是任何安全來源網頁，包括本機網頁開發伺服器 (例如使用 python -m http.server 啟動本機伺服器)，或部署在 Cloud Run 等服務上的服務。

建立來源端點設定

如要透過全通路閘道轉送 WebChat 訊息流量，請建立來源端點設定。 在下列範例中，我們會說明如何直接連線至服務專員，但如要運用 Omnichannel Gateway 的轉送功能，則必須設定來源端點。建議您立即建立。

如要將代理程式連結至 Omnichannel Gateway，請執行下列範例指令，建立端點設定。將預留位置替換為目標專案：

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 必須透過不記名權杖驗證要求。如要讓使用者安全地使用即時通訊小工具，您必須實作權杖核發方法。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

安裝並初始化預先建構的 SDK

您可以將網頁即時通訊小工具嵌入網站，讓使用者透過 Omnichannel Gateway，立即與虛擬服務專員互動。

在網站上嵌入即時通訊小工具

首先，請按照「在網站上嵌入小工具」一文的說明，嵌入並初始化這個小工具。

如要將小工具連結至 Omnichannel Gateway，請在網頁應用程式中設定 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/ENDPOINT_CONFIG_ID"}'
  language-code="en"
  url-allowlist="https://gstatic.com/"
></chat-messenger>

您可以將來源端點設定 (我們在此建立的設定) 或目的地端點設定用於 endpointConfig 值。建議使用目的地端點設定測試代理程式，因為使用來源端點設定需要設定路由規則。如要進一步瞭解如何設定來源管道和目的地代理程式之間的路由，請參閱代理程式路由設定總覽。

使用預建 SDK 啟動驗證

使用 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>

測試 WebChat

載入網頁應用程式時，聊天小工具會顯示在頁面上，並透過全通路閘道安全地傳送訊息。您應該可以輸入訊息、按下傳送，並從設定的服務專員收到回覆。如要進行本機測試，請在終端機中執行 python -m http.server，然後在瀏覽器中前往 http://localhost:8000，即可提供網頁應用程式檔案。

後續步驟