這項整合服務可為代理程式提供可嵌入網站中的自訂聊天對話方塊。
設定
這項整合功能可允許已驗證或未驗證的 使用者代理程式查詢存取權。
未通過驗證的設定
如要設定未經驗證的 Dialogflow CX Messenger 服務專員存取權，請按照下列步驟操作：
- 前往 Dialogflow CX 主控台。
- 選擇 Google Cloud 專案。
- 選取代理程式。
- 選取「管理」分頁標籤。
- 按一下左側欄選單中的「整合」。
- 按一下「Dialogflow CX Messenger」上的「連結」。
- 設定對話方塊隨即開啟。
- 如果先前已為這個服務專員設定整合功能，您會看到可嵌入的 HTML 程式碼。無論您要驗證或不驗證，請按一下對話方塊底部的「停用...」按鈕，以便在下一個步驟中重新設定。
- 選取「環境」。
- 選取「Unauthenticated API」(未經驗證的 API)。
- 選取樣式。
- 視需要限制網域存取權。
- 按一下「啟用未經驗證的 API」。
- 對話方塊會顯示可嵌入網站的 HTML 程式碼。複製這組代碼。
- 按一下 [完成]。
已驗證的設定
如要設定 Dialogflow CX Messenger 代理程式的驗證存取權，請按照下列步驟操作：
- 前往 Dialogflow CX 主控台。
- 選擇 Google Cloud 專案。
- 選取代理程式。
- 選取「管理」分頁標籤。
- 按一下左側欄選單中的「整合」。
- 按一下「Dialogflow CX Messenger」上的「連結」。
- 設定對話方塊隨即開啟。
- 如果先前已為這個服務專員設定整合功能，您會看到可嵌入的 HTML 程式碼。無論您要驗證或不驗證，請按一下對話方塊底部的「停用...」按鈕，以便在下一個步驟中重新設定。
- 選取「環境」。
- 選取「Authorized API」(已授權的 API)。
- 選取樣式。
- 視需要限制網域存取權。
- 按一下「啟用授權的 API」。
- 對話方塊會顯示可嵌入網站的 HTML 程式碼。複製這組代碼。
- 按一下 [完成]。
- 設定 OAuth 用戶端：
- 為貴機構建立 OAuth 同意畫面。新增
https://www.googleapis.com/auth/cloud-platform做為必要範圍。 - 建立 OAuth 2.0 用戶端 ID。
在「已授權的 JavaScript 來源」下方，指定允許代管及查詢代理程式的 HTTP 來源。例如：
https://your-company.com。 - 授予使用者查詢代理的權限。 將每位使用者或群組新增為主體，並指派「Dialogflow API Client」(Dialogflow API 用戶端) 和「Service Usage Consumer」(服務用量消費者) 角色。
- 為貴機構建立 OAuth 同意畫面。新增
嵌入
在網站的網頁中貼上您在前述步驟複製的嵌入程式碼。
<script> 和 <df-messenger> HTML 元素應位於網頁的 <body> 元素中。
如果您使用經過驗證的整合服務，請將 <df-messenger> 的 oauth-client-id 屬性設為 OAuth 用戶端 ID。如要使用使用者的身分進行工具驗證，請使用任意名稱設定 access-token-name 屬性。然後使用值為 $session.params.ACCESS_TOKEN_NAME 的 Bearer 權杖進行工具驗證。
更新任何其他需要更新的屬性。
如要允許使用回應式版面配置，請在 <head> 元素中新增下列內容：
<meta name="viewport" content="width=device-width, initial-scale=1">
自訂
您可以套用許多HTML 自訂和 CSS 自訂，影響對話方塊的外觀和行為。
JavaScript
您可以使用許多 JavaScript 事件和 JavaScript 函式與對話方塊互動。
範例
以下範例顯示 HTML 自訂、CSS 自訂和 JavaScript 事件處理：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>My chat</title>
<style>
df-messenger {
/*
* Customize as required. df-messenger will fill the
* space that is provided.
*/
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 320px;
}
</style>
<script src="https://www.gstatic.com/dialogflow-console/fast/df-messenger/prod/v1/df-messenger.js"></script>
</head>
<body>
<df-messenger
location="global" <!-- TODO: update agent location as needed -->
project-id="my-project-id" <!-- TODO: update project ID -->
agent-id="my-agent-id" <!-- TODO: update agent ID -->
language-code="en" <!-- TODO: update agent language as needed -->
>
<df-messenger-chat
chat-title="Agent Name" <!-- TODO: update dialog title as needed -->
></df-messenger-chat>
</df-messenger>
<script>
// An example of handling events: Navigate to the first suggested URL.
document.addEventListener('df-url-suggested', (event) => {
if (Array.isArray(event.detail.suggestedUrls) &&
event.detail.suggestedUrls.length) {
window.location.href = event.detail.suggestedUrls[0];
}
});
</script>
</body>
</html>
Fulfillment
你可以使用多種完成動作的回應類型，做為代理程式的回應。
答案意見回饋
如果啟用回覆意見回饋，預設的對話方塊會在使用者介面中新增「讚」和「倒讚」按鈕。在對話期間，使用者可以點選這些按鈕，針對代理程式的回覆提供意見。如果使用者選取「不喜歡」圖示，可以選擇提供負面意見回饋的原因。
自訂意見回饋元件
如要指定自訂意見回饋元素，必須在網站上定義新的自訂元素。
如要提交意見回饋，元素必須發出 df-custom-submit-feedback-clicked 事件。所含的 detail 欄位必須是字串。
class CustomFeedbackElement extends HTMLElement {
constructor() {
super();
// It is not strictly required but recommended to contain the custom
// element in a shadow root.
this.renderRoot = this.attachShadow({mode: 'open'});
}
// Web component Lifecycle method.
connectedCallback() {
const wrapper = document.createElement('div');
// Build the component as required.
const button = document.createElement('button');
button.innerText = 'Submit';
button.addEventListener('click', () => {
this._onSubmitClick();
});
wrapper.appendChild(button);
this.renderRoot.appendChild(wrapper);
}
// Called when Submit button is clicked.
_onSubmitClick() {
const event = new CustomEvent("df-custom-submit-feedback-clicked", {
// `detail` may be any string,
// this will be sent to the backend to be stored.
detail: JSON.stringify({
"usefulness": 2,
"accuracy": 3,
}),
// Required to propagate up the DOM tree
// https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles
bubbles: true,
// Required to propagate across ShadowDOM
// https://developer.mozilla.org/en-US/docs/Web/API/Event/composed
composed: true,
});
this.dispatchEvent(event);
}
}
(function() {
// Registers the element. This name must be "df-external-custom-feedback".
customElements.define('df-external-custom-feedback', CustomFeedbackElement);
})();
偵錯
如要在本機測試 Dialogflow CX Messenger 服務專員，請按照下列步驟操作：
- 如上所述，在網頁中嵌入 Dialogflow CX Messenger 元素。
- 為該網頁啟動本機 HTTP 伺服器，並指定通訊埠。
- 如要存取該頁面，請前往
http://localhost:port_number。