Neste guia, explicamos como enviar conteúdo avançado para Dialogflow Messenger.
Etapa 1: criar uma ferramenta addRichContent no seu 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
Mostre ao agente como usar a ferramenta em 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 o seguinte:
A sintaxe do conteúdo avançado é a mesma que você usaria se você 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 define 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.
Verifique se a variável dfMessenger
está 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);