Dialogflow CX Messenger JavaScript

Dialogflow CX Messenger 提供函式，您可以呼叫這些函式來影響其行為。

renderCustomText

這個函式會顯示文字訊息，就像是來自代理或由使用者輸入。

引數：

  • string：簡訊
  • boolean：true 表示訊息來自代理，false 則表示來自使用者

傳回值：

  • void

例如：

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.renderCustomText('Custom text', true);

renderCustomCard

這個函式會轉譯自訂資訊卡，就像來自 Dialogflow CX 執行要求一樣。

引數：

  • payload：自訂酬載回應清單，在「Fulfillment」(執行要求) 部分定義

傳回值：

  • void

例如：

const dfMessenger = document.querySelector('df-messenger');
const payload = [
  {
    "type": "info",
    "title": "Info item title",
    "subtitle": "Info item subtitle",
    "image": {
      "rawUrl": "https://example.com/images/logo.png"
    },
    "anchor": {
      "href": "https://example.com",
      "target": "_blank"
    }
  }
];
dfMessenger.renderCustomCard(payload);

sendQuery

這個函式會將查詢傳送至 Dialogflow CX API，並等待回應。這會模擬通常提供給代理對話的使用者輸入內容。系統會像處理任何使用者查詢一樣處理回覆。

引數：

  • string：文字查詢

傳回值：

  • Promise<void>：非同步作業的傳回值

例如：

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.sendQuery('Describe shipping costs.');

sendRequest

這個函式會將要求傳送至 Dialogflow CX API，並等待回應。

引數：

  • string：要求類型，支援 query (另請參閱sendQuery 前述) 和 event (請參閱自訂事件)
  • any：與要求類型對應的酬載，兩種支援的要求類型都是字串

傳回值：

  • Promise<void>：非同步作業的傳回值

例如：

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.sendRequest('query', 'Describe shipping costs.');

setQueryParameters

這個函式會為 Dialogflow CX API detectIntent 要求的 queryParams 欄位設定預設值。其他 Dialogflow CX Messenger 方法可以取代查詢參數中的相應預設值。

引數：

  • object：JSON 資料。如需查詢參數的結構定義，請參閱「QueryParameters」。

傳回值：

  • void

例如：

const dfMessenger = document.querySelector('df-messenger');
const queryParameters = {
  parameters: {
  timeZone: "America/New_York"
  }
};
dfMessenger.setQueryParameters(queryParameters);

setContext

這個函式會將使用者的生成式個人化資訊傳送至 Dialogflow CX。這項資訊會保留到工作階段結束。

引數：

  • object：JSON 資料，請參閱生成式個人化說明文件

傳回值：

  • void

例如：

const dfMessenger = document.querySelector('df-messenger');
const metadata = {
  "subscription plan": "Business Premium Plus",
  "devices owned": [
    {
      model: "Google Pixel 7",
    },
    {
      model: "Google Pixel Tablet",
    },
  ],
};
dfMessenger.setContext(metadata);

clearStorage

這項函式會清除代理對話的永久儲存空間。並清除代理對話方塊的目前狀態。根據預設，系統會保留使用者的驗證狀態。您可以使用選用的 args 自訂這項行為。

引數：

名稱 類型 說明
args object? 選用引數，用於設定清除儲存空間作業。
args.clearAuthentication boolean? 用於清除驗證狀態的選用旗標。如果設為 true，系統會清除驗證狀態，否則會保留。

傳回值：

  • void

例如：

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.clearStorage();

clearAuthentication

這個函式會清除代理對話方塊的驗證。

引數：

  • 無

傳回值：

  • void

例如：

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.clearAuthentication();

startNewSession

這個函式會在代理對話中啟動新的工作階段。根據預設，系統會清除訊息記錄，但保留使用者的驗證狀態。您可以使用選用的 args 參數自訂這項行為。

引數：

名稱 類型 說明
args object? 選用引數，用於設定新工作階段的建立作業。
args.retainHistory boolean? 用於保留記錄的選用旗標。如果設為 True，系統會保留記錄，否則會清除記錄。
args.clearAuthentication boolean? 用於清除驗證狀態的選用旗標。如果設為 true，系統會清除驗證狀態，否則會保留。

傳回值：

  • void

例如：

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.startNewSession({ retainHistory: true });

openChat

在 df-messenger-chat-bubble 元素上呼叫這個函式，即可開啟即時通訊。如果即時通訊已開啟，則不會執行任何動作。

引數：

  • 無

傳回值：

  • void

例如：

const dfMessengerBubble = document.querySelector('df-messenger-chat-bubble');
dfMessengerBubble.openChat();

closeChat

這個函式會關閉即時通訊。在 df-messenger-chat-bubble 元素上呼叫這個方法，即可關閉對話。如果對話已關閉，則不會執行任何動作。

引數：

  • 無

傳回值：

  • void

例如：

const dfMessengerBubble = document.querySelector('df-messenger-chat-bubble');
dfMessengerBubble.closeChat();

openMinChat

Dialogflow CX Messenger 最小化即時通訊

在 df-messenger-chat-bubble 元素上呼叫這個函式，即可開啟最小化的即時通訊視窗。如果即時通訊視窗已最小化，這個函式就不會執行任何動作。

引數：

名稱 類型 說明
args object? 選用引數，用於設定縮小的即時通訊。
args.anchor string? 選用 anchor，設定縮小的即時通訊視窗開啟位置。邏輯與即時通訊泡泡元素上的 anchor 屬性相同。預設為 left-top。
args.showActorImages boolean? 選用標記，用於顯示演員圖片 (如果在 df-messenger-chat-bubble 元素中指定)。預設值為 false。

範例：

const dfMessengerChatBubble = document.querySelector('df-messenger-chat-bubble');
dfMessengerChatBubble.openMinChat({
  anchor: 'top-left'
});

closeMinChat

在 df-messenger-chat-bubble 元素上呼叫這個函式，即可關閉縮小的即時通訊。如果即時通訊已關閉，則不會有任何動作。

範例：

const dfMessengerChatBubble = document.querySelector('df-messenger-chat-bubble');
dfMessengerChatBubble.closeMinChat();