JavaScript do Dialogflow CX Messenger

O Dialogflow CX Messenger oferece funções que podem ser chamadas para afetar o comportamento dele.

renderCustomText

Essa função renderiza uma mensagem de texto, como se ela tivesse sido enviada pelo agente ou inserida pelo usuário.

Argumentos:

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

Retorna:

  • void

Exemplo:

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

renderCustomCard

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

Argumentos:

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

Retorna:

  • 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 para a API Dialogflow CX e aguarda a resposta. Isso simula uma entrada do usuário final que normalmente é fornecida à caixa de diálogo do agente. O sistema processa a resposta como qualquer consulta do usuário final.

Argumentos:

  • string: consulta de texto

Retorna:

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

Exemplo:

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

sendRequest

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

Argumentos:

  • string: tipo de solicitação, compatível com query (consulte também sendQuery anterior) e event (consulte evento personalizado)
  • any: payload que corresponde ao tipo de solicitação, que é uma string para os dois tipos de solicitação compatíveis.

Retorna:

  • Promise<void>: valor de retorno da 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 campo queryParams da solicitação detectIntent da API Dialogflow CX. Outros métodos do Dialogflow CX Messenger podem substituir os respectivos valores padrão nos parâmetros de consulta.

Argumentos:

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

Retorna:

  • 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 do usuário final para o Dialogflow CX. Essas informações permanecem pelo restante da sessão.

Argumentos:

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

Retorna:

  • 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. Ele também limpa o estado atual da caixa de diálogo do agente. Por padrão, ele 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 limpeza do armazenamento.
args.clearAuthentication boolean? Flag opcional para limpar o status de autenticação. Se definido como verdadeiro, o status de autenticação será apagado. Caso contrário, ele será mantido.

Retorna:

  • 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

Retorna:

  • 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, ele limpa o histórico de mensagens, mas preserva o status de autenticação do usuário. Personalize esse comportamento usando o parâmetro opcional args.

Argumentos:

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

Retorna:

  • void

Exemplo:

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

openChat

Chame essa função no elemento df-messenger-chat-bubble para abrir o chat. Ele não faz nada se o chat já estiver aberto.

Argumentos:

  • nenhum

Retorna:

  • void

Exemplo:

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

closeChat

Essa 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

Retorna:

  • void

Exemplo:

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

openMinChat

Chat minimizado do Dialogflow CX Messenger

É possível abrir a janela de chat em uma versão minimizada chamando essa função no elemento df-messenger-chat-bubble. Essa função 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 do balão do chat. O padrão é left-top.
args.showActorImages boolean? Sinalização opcional para mostrar imagens de atores (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

Chame essa funçã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();