En esta guía, se explica cómo enviar contenido enriquecido a Dialogflow Messenger.
Paso 1: Crea una herramienta addRichContent en tu agente
Crea un herramienta de funciones llamado 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
Cuéntale a tu agente cómo usar la herramienta en 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 el flujo.
Paso 3: Define el código JavaScript
En el código de la página que aloja df-messenger,
debes crear un código JavaScript
que define una función que le indica a df-messenger que renderice el contenido enriquecido.
También debes registrar esa función con df-messenger,
para saber que debe ejecutar la función cuando el agente virtual la necesite.
Asegúrate de que se declare la variable dfMessenger
y apunta 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);