En esta guía, se explica cómo enviar contenido enriquecido a Dialogflow Messenger.
Paso 1: Crea una herramienta addRichContent en tu agente
Crea una herramienta de función llamada addRichContent con los siguientes datos:
Entrada de herramientas:
properties: {}
type: object
Resultado de la herramienta:
properties:
status:
type: string
reason:
type: string
type: object
Paso 2: Dile a tu agente cómo usar esta herramienta
Indícale a tu agente cómo usar la herramienta con instrucciones y ejemplos.
Por ejemplo, agrega información como la que se muestra a continuación a tus instrucciones:
- 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
Por ejemplo, crea un ejemplo como el siguiente:
Ten en cuenta que la sintaxis para el contenido enriquecido es la misma que usarías si mostraras una carga útil personalizada en un agente virtual basado en flujo.
Paso 3: Define el código JavaScript
En el código de la página que aloja df-messenger, debes crear código JavaScript que defina una función que le indique a df-messenger que renderice el contenido enriquecido.
También debes registrar esa función con df-messenger para que sepa que debe ejecutarla cuando el agente virtual la necesite.
Asegúrate de que la variable dfMessenger esté declarada y apunte a tu instancia de df-messenger.
A continuación, se muestra un código de ejemplo que puedes usar con este fin:
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);