JavaScript do Dialogflow CX Messenger

O Dialogflow CX Messenger oferece funções que pode chamar para afetar o respetivo comportamento.

renderCustomText

Esta função renderiza uma mensagem de texto simples, como se fosse do agente como resposta de texto simples ou tivesse sido introduzida pelo utilizador final.

Argumentos:

  • string: mensagem de texto
  • boolean: verdadeiro para uma mensagem do agente, falso para uma mensagem do utilizador final

Devolução:

  • void

Por exemplo:

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.renderCustomText('Custom text', true);

renderCustomCard

Esta função renderiza um cartão personalizado, como se fosse proveniente do preenchimento do Dialogflow.

Argumentos:

  • payload: uma lista de respostas de payload personalizadas, que são definidas na secção Fulfillment.

Devolução:

  • void

Por exemplo:

const dfMessenger = document.querySelector('df-messenger');
const payload = [
  {
    "type": "info",
    "title": "Info item title",
    "subtitle": "Info item subtitle",
    "image": {
      "rawUrl": "https://example.com/images/logo.png"
    },
    "anchor": {
      "href": "https://example.com",
      "target": "_blank"
    }
  }
];
dfMessenger.renderCustomCard(payload);

sendQuery

Esta função envia uma consulta para a API Dialogflow e aguarda a resposta. Isto simula efetivamente uma entrada do utilizador final que é normalmente fornecida à caixa de diálogo do agente. A resposta é processada como se fosse uma consulta de um utilizador final.

Argumentos:

  • string: consulta de texto

Devolução:

  • Promise<void>: valor devolvido para a operação assíncrona

Por exemplo:

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.sendQuery('Describe shipping costs.');

sendRequest

Esta função envia um pedido para a API Dialogflow e aguarda a resposta.

Argumentos:

  • string: tipo de pedido, suporta query (consulte também sendQuery acima) e event (consulte evento personalizado)
  • any: payload que corresponde ao tipo de pedido, que é atualmente uma string para ambos os tipos de pedidos suportados

Devolução:

  • Promise<void>: valor devolvido para a operação assíncrona

Por exemplo:

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.sendRequest('query', 'Describe shipping costs.');

setQueryParameters

Esta função define valores predefinidos para o campo queryParams do pedido detectIntent da API Dialogflow. Outros métodos do Dialogflow CX Messenger podem substituir os respetivos valores predefinidos nos parâmetros de consulta.

Argumentos:

  • object: dados JSON. Para ver o esquema dos parâmetros de consulta, consulte QueryParameters

Devolução:

  • void

Por exemplo:

const dfMessenger = document.querySelector('df-messenger');
const queryParameters = {
  parameters: {
  timeZone: "America/New_York"
  }
};
dfMessenger.setQueryParameters(queryParameters);

setContext

Esta função envia informações de personalização generativa acerca do utilizador final para o Dialogflow. Estas informações vão persistir durante o resto da sessão.

Argumentos:

  • object: dados JSON. Consulte a documentação sobre a personalização generativa

Devolução:

  • void

Por exemplo:

const dfMessenger = document.querySelector('df-messenger');
const metadata = {
  "subscription plan": "Business Premium Plus",
  "devices owned": [
    {
      model: "Google Pixel 7",
    },
    {
      model: "Google Pixel Tablet",
    },
  ],
};
dfMessenger.setContext(metadata);

clearStorage

Esta função limpa o armazenamento persistente da caixa de diálogo do agente. Também limpa o estado atual da caixa de diálogo do agente. Por predefinição, preserva o estado de autenticação do utilizador. Use o elemento args opcional para personalizar este comportamento.

Argumentos:

Nome Tipo Descrição
args object? Argumento opcional para configurar a operação de limpeza do armazenamento.
args.clearAuthentication boolean? Flag opcional para limpar o estado de autenticação. Se estiver definida como verdadeira, o estado de autenticação é limpo. Caso contrário, é mantido.

Devolução:

  • void

Por exemplo:

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.clearStorage();

clearAuthentication

Esta função limpa a autenticação da caixa de diálogo do agente.

Argumentos:

  • nenhum

Devolução:

  • void

Por exemplo:

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.clearAuthentication();

startNewSession

Esta função inicia uma nova sessão na caixa de diálogo do agente. Por predefinição, esta ação limpa o histórico de mensagens, mas preserva o estado de autenticação do utilizador. Use o elemento args opcional para personalizar este comportamento.

Argumentos:

Nome Tipo Descrição
args object? Argumento opcional para configurar a criação de novas sessões.
args.retainHistory boolean? Flag opcional para reter o histórico. Se estiver definida como verdadeira, o histórico é mantido. Caso contrário, é apagado.
args.clearAuthentication boolean? Flag opcional para limpar o estado de autenticação. Se estiver definida como verdadeira, o estado de autenticação é limpo. Caso contrário, é mantido.

Devolução:

  • void

Por exemplo:

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.startNewSession({ retainHistory: true });

openChat

Esta função abre o chat. Chame-o no elemento df-messenger-chat-bubble para abrir o chat. Não faz nada se o chat já estiver aberto.

Argumentos:

  • nenhum

Devolução:

  • void

Por exemplo

const dfMessengerBubble = document.querySelector('df-messenger-chat-bubble');
dfMessengerBubble.openChat();

closeChat

Esta função fecha o chat. Chame-o no elemento df-messenger-chat-bubble para fechar o chat. Não faz nada se o chat já estiver fechado.

Argumentos:

  • nenhum

Devolução:

  • void

Por exemplo

const dfMessengerBubble = document.querySelector('df-messenger-chat-bubble');
dfMessengerBubble.closeChat();

openMinChat

Chat minimizado do Dialogflow CX Messenger

Esta função abre a janela de chat numa versão minimizada. Chame-o no elemento df-messenger-chat-bubble para abrir o chat minimizado. Não faz nada se o chat já estiver minimizado.

Argumentos:

Nome Tipo Descrição
args object? Argumento opcional para configurar o chat minimizado
args.anchor string? Opcional anchor para configurar onde o chat minimizado está a ser aberto. A mesma lógica que o atributo anchor no elemento do balão de chat. A predefinição é left-top.
args.showActorImages boolean? Sinalização opcional para mostrar imagens de atores (se especificada no elemento df-messenger-chat-bubble). A predefinição é false.

Exemplo:

const dfMessengerChatBubble = document.querySelector('df-messenger-chat-bubble');
dfMessengerChatBubble.openMinChat({
  anchor: 'top-left'
});

closeMinChat

Fecha o chat minimizado. Chame-o no elemento df-messenger-chat-bubble para fechar o chat minimizado. Não faz nada se o chat já estiver fechado.

Exemplo:

const dfMessengerChatBubble = document.querySelector('df-messenger-chat-bubble');
dfMessengerChatBubble.closeMinChat();