Neste guia, explicamos como enviar conteúdo avançado para o Dialogflow Messenger.
Etapa 1: criar uma ferramenta addRichContent no agente
Crie uma ferramenta de função chamada addRichContent com os seguintes dados:
Entrada de ferramenta:
properties: {}
type: object
Saída da ferramenta:
properties:
status:
type: string
reason:
type: string
type: object
Etapa 2: informar ao agente como usar a ferramenta
Diga ao agente como usar a ferramenta nas instruções e exemplos.
Por exemplo, adicione algo como o seguinte às suas instruções:
- 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 exemplo, crie um exemplo como este:
A sintaxe do conteúdo avançado é a mesma que você usaria se retornasse um payload personalizado em um agente virtual baseado em fluxo.
Etapa 3: definir o JavaScript
No código da página que hospeda df-messenger,
você precisa criar um código JavaScript
que defina uma função que instrui o df-messenger a renderizar o conteúdo avançado.
Você também precisa registrar essa função com df-messenger
para que ela saiba executar a função quando o agente virtual precisar dela.
Verifique se a variável dfMessenger foi declarada
e aponta para a instância de df-messenger.
Confira um exemplo de código que pode ser usado para essa finalidade:
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);