このガイドでは、リッチ コンテンツを Dialogflow Messenger へ送信する方法を説明します。
ステップ 1: エージェントに addRichContent ツールを作成する
次のデータを使用して、addRichContent と呼ばれる関数ツールを作成します。
ツールの入力:
properties: {}
type: object
ツールの出力:
properties:
status:
type: string
reason:
type: string
type: object
ステップ 2: エージェントにこのツールの使用方法を伝える
手順と例で、エージェントにツールの使用方法を伝えます。
たとえば、次のようなものを手順に追加します。
- Greet the user
- Ask the user what their favorite color is.
At the same time run ${TOOL: addRichContent} to display buttons
for blue, red, yellow, and green.
- Thank the user
たとえば、次のような例を作成します。
なお、リッチ コンテンツの構文は、フローベースの仮想エージェントでカスタム ペイロードを返す場合に使用する構文と同じです。
ステップ 3: JavaScript を定義する
df-messenger をホストするページのコードで、df-messenger にリッチ コンテンツをレンダリングするよう指示する関数を定義した JavaScript コードを作成します。また、その関数を df-messenger に登録する必要があります。これにより、仮想エージェントが必要なときに関数を実行できるようにします。
変数 dfMessenger が宣言され、df-messenger のインスタンスを指していることを確認します。
この目的のために使用できるコードの例をいくつか示します。
const dfMessenger = document.querySelector('df-messenger');
function addRichContent(customPayload) {
dfMessenger.renderCustomCard(customPayload.richContent);
// add error handling
return Promise.resolve({ status: "OK", reason: null });
}
// substitute your own tool id
const toolId = 'projects/PROJECT_ID/locations/LOCATION/agents/AGENT_ID/tools/TOOL_ID'
dfMessenger.registerClientSideFunction(toolId, addRichContent.name, addRichContent);