JavaScript do Dialogflow CX Messenger

O Dialogflow CX Messenger fornece funções que você pode chamar para afetar o comportamento dele.

renderCustomText

Essa função renderiza uma mensagem de texto simples, como se ela viesse do agente na forma de uma simples resposta de texto ou tivesse sido inserida pelo usuário final.

Argumentos:

  • string: mensagem de texto
  • boolean: verdadeiro para uma mensagem do agente, falso para o usuário final

Retorno:

  • void

Exemplo:

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

renderCustomCard

Essa função renderiza um cartão personalizado, como se ele viesse do fulfillment do Dialogflow CX.

Argumentos:

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

Retorno:

  • void

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

Essa função envia uma consulta à API CX do Dialogflow e aguarda a resposta. Isso simula uma entrada do usuário final que normalmente é fornecida à caixa de diálogo do agente. A resposta será processada como qualquer consulta do usuário final.

Argumentos:

  • string: consulta de texto

Retorno:

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

Exemplo:

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

sendRequest

Essa função envia uma solicitação à API CX do Dialogflow e aguarda a resposta.

Argumentos:

  • string: tipo de solicitação, oferece suporte a query (consulte também sendQuery acima) e event (consulte evento personalizado)
  • any: payload que corresponde ao tipo de solicitação, que atualmente é uma string para os dois tipos de solicitação com suporte

Retorno:

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

Exemplo:

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

setQueryParameters

Essa função define valores padrão para o queryParams campo da solicitação detectIntent da API CX do Dialogflow. Outros métodos do Dialogflow CX Messenger podem substituir os respectivos valores padrão nos parâmetros de consulta.

Argumentos:

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

Retorno:

  • void

Exemplo:

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

setContext

Essa função envia informações de personalização generativa sobre o usuário final para o Dialogflow CX. Essas informações vão persistir durante o restante da sessão.

Argumentos:

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

Retorno:

  • void

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

Essa função limpa o armazenamento persistente da caixa de diálogo do agente. Ela também limpa o estado atual da caixa de diálogo do agente. Por padrão, ela preserva o status de autenticação do usuário. Use o args opcional para personalizar esse comportamento.

Argumentos:

Nome Tipo Descrição
args object? Argumento opcional para configurar a operação de armazenamento limpo.
args.clearAuthentication boolean? Flag opcional para limpar o status de autenticação. Se definido como verdadeiro, o status de autenticação será limpo. Caso contrário, ele será mantido.

Retorno:

  • void

Exemplo:

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

clearAuthentication

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

Argumentos:

  • nenhum

Retorno:

  • void

Exemplo:

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

startNewSession

Essa função inicia uma nova sessão na caixa de diálogo do agente. Por padrão, ela limpa o histórico de mensagens, mas preserva o status de autenticação do usuário. Use o args opcional para personalizar esse comportamento.

Argumentos:

Nome Tipo Descrição
args object? Argumento opcional para configurar a criação de uma nova sessão.
args.retainHistory boolean? Flag opcional para manter o histórico. Se definido como verdadeiro, o histórico será mantido. Caso contrário, ele será apagado.
args.clearAuthentication boolean? Flag opcional para limpar o status de autenticação. Se definido como verdadeiro, o status de autenticação será limpo. Caso contrário, ele será mantido.

Retorno:

  • void

Exemplo:

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

openChat

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

Argumentos:

  • nenhum

Retorno:

  • void

Por exemplo:

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

closeChat

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

Argumentos:

  • nenhum

Retorno:

  • void

Por exemplo:

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

openMinChat

Chat minimizado do Dialogflow CX Messenger

Essa função abre a janela de chat em uma versão minimizada. Chame-a 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? anchor opcional para configurar onde o chat minimizado está sendo aberto. Mesma lógica do atributo anchor no elemento de balão de chat. O padrão é left-top.
args.showActorImages boolean? Flag opcional para mostrar imagens de ator (se especificado no elemento df-messenger-chat-bubble). O padrão é "falso".

Exemplo:

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

closeMinChat

Fecha o chat minimizado. Chame-a 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();