Eventos em JavaScript do Dialogflow Messenger

O Dialogflow Messenger aciona uma variedade de eventos para os quais você pode criar listeners de eventos. Alguns eventos têm um campo de objeto detail, que fornece mais informações sobre eles.

df-messenger-loaded

A caixa de diálogo do agente é carregada primeiro.

Propriedades de detalhes:

• nenhum

Exemplo:

window.addEventListener('df-messenger-loaded', () => {
  // Messenger is now ready.
});

df-chat-open-changed

O chat foi aberto ou fechado.

Observação: o recurso será ativado somente se o df-messenger-chat-bubble for usado.

Propriedades de detalhes:

• isOpen (boolean): novo estado do chat.

Exemplo:

window.addEventListener('df-chat-open-changed', (event) => {
  console.log(`Chat is ${event.detail.isOpen ? 'open' : 'closed'}`);
});

df-user-input-entered

O usuário digitou o texto.

Propriedades de detalhes:

• input (string): valor inserido pelo usuário

Exemplo:

window.addEventListener('df-user-input-entered', (event) => {
  console.log(event.detail.input);
});

df-request-sent

Uma solicitação enviada ao back-end do Dialogflow.

Observação :a solicitação pode ser manipulada. As alterações são refletidas na solicitação enviada. Se o padrão do evento for impedido, a solicitação não será enviada.

Propriedades de detalhes:

• data (object): contêiner de dados
• data.requestBody (object): solicitação enviada

Exemplo:

window.addEventListener('df-request-sent', (event) => {
  console.log('Request', event.detail.data.requestBody);
});

window.addEventListener('df-request-sent', (event) => {
  event.preventDefault(); // Dialogflow Messenger won't send the request.

  // Send request yourself.
});

df-response-received

Uma resposta chegou na caixa de diálogo do agente.

Observação: as mensagens podem ser manipuladas. As alterações serão refletidas no processamento de respostas do agente. Se o padrão do evento for impedido, o agente não processará a resposta.

Propriedades de detalhes:

• data (object): contêiner de dados
• data.messages (object[]): lista de mensagens de resposta analisadas
• raw (object): resposta literal recebida

Exemplo:

window.addEventListener('df-response-received', (event) => {
  // Remove all non-text messages.
  event.detail.data.messages = event.detail.data.messages.filter(message => {
    return message.type === 'text';
  });
});

window.addEventListener('df-response-received', (event) => {
  event.preventDefault(); // Dialogflow Messenger won't handle the response.

  const messenger = document.querySelector('df-messenger');
  event.detail.data.messages.forEach(message => {
    if (message.type === 'text') {
      messenger.renderCustomText(message.text);
    }
  });
});

df-messenger-error

Uma solicitação para o back-end falha.

Propriedades de detalhes:

• error (object): erro ocorrido

Exemplo:

window.addEventListener('df-messenger-error', (event) => {
  console.log(event.detail.error);
});

df-session-expired

A sessão com o agente expirou.

Propriedades de detalhes:

• nenhum

Exemplo:

window.addEventListener('df-session-expired', () => {
  const messenger = document.querySelector('df-messenger');
  messenger.renderCustomText(`*Session expired*`, /* isBot= */ true);
  messenger.startNewSession({ retainHistory: true });
});

df-session-ended

A sessão foi encerrada.

Propriedades de detalhes:

• nenhum

Exemplo:

window.addEventListener('df-session-ended', () => {
  const messenger = document.querySelector('df-messenger');
  messenger.renderCustomText(`*Session ended*`, /* isBot= */ true);
  messenger.startNewSession({ retainHistory: true });
});

df-url-suggested

URLs dos recursos sugeridos.

Propriedades de detalhes:

• suggestedUrls (string[]): lista de URLs sugeridos

Exemplo:

window.addEventListener('df-url-suggested', (event) => {
  if (event.detail.suggestedUrls.length === 1) {
    window.location.href = event.detail.suggestedUrls[0];
  }
});

df-accordion-clicked

O usuário clicou no acordeão.

Propriedades de detalhes:

• nenhum

df-button-clicked

O usuário clicou em um botão.

Propriedades de detalhes:

• actionLink (string): href da âncora do botão clicado, se especificado
• event (string): evento do botão clicado, se especificado
• languageCode (string): código do idioma do evento, se especificado. Caso contrário, o código do idioma principal.
• text (string): texto do botão clicado

window.addEventListener('df-button-clicked', (event) => {
  event.preventDefault(); // Dialogflow Messenger won't send the "event" request.

  // Handle "event" yourself.
});

df-chip-clicked

O usuário clicou em um ícone.

Propriedades de detalhes:

• actionLink (string): href da âncora do ícone clicado, se especificado
• text (string): texto do ícone clicado

df-citation-clicked

O usuário clicou em uma citação.

Propriedades de detalhes:

• actionLink (string): href da âncora da citação
• title (string): título da citação

df-info-card-clicked

O usuário clicou em um card de informações.

Propriedades de detalhes:

• actionLink (string): href âncora do card de informações
• title (string): título do card de informações

df-list-element-clicked

O usuário clicou em um elemento de lista.

Propriedades de detalhes:

• actionLink (string): href da âncora do elemento da lista, se especificado
• event (string): evento do elemento da lista que recebeu o clique, se especificado
• languageCode (string): código do idioma do evento, se especificado. Caso contrário, o código do idioma principal.
• title (string): título do elemento da lista.

window.addEventListener('df-list-element-clicked', (event) => {
  event.preventDefault(); // Dialogflow Messenger won't send the "event" request.

  // Handle "event" yourself.
});

df-image-clicked

O usuário clicou em uma imagem.

Propriedades de detalhes:

• actionLink (string): href da imagem, se especificado