Eventos JavaScript do Dialogflow CX Messenger

É possível criar listeners de eventos para vários eventos que o Dialogflow CX Messenger aciona. Para mais informações, consulte Listeners de eventos. Alguns eventos têm um campo de objeto detail, que fornece mais informações sobre o evento.

df-messenger-loaded

Ocorre quando a caixa de diálogo do agente é carregada pela primeira vez.

Propriedades de detalhes:

  • nenhum

Exemplo:

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

df-chat-open-changed

Ocorre quando você abre ou fecha o chat.

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

Ocorre quando você digita texto no chat.

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

Ocorre quando você envia uma solicitação ao back-end do Dialogflow CX.

Propriedades de detalhes:

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

Exemplo:

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

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

  // Send request yourself.
});

df-response-received

Ocorre quando uma resposta é recebida da caixa de diálogo do agente.

Propriedades de detalhes:

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(); // 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

Ocorre quando uma solicitação ao back-end falha.

Propriedades de detalhes:

  • error (object): erro que ocorreu.

Exemplo:

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

df-session-expired

Ocorre quando a sessão com o agente expira.

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

Ocorre quando a sessão termina.

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

Ocorre quando URLs de recursos sugeridos são fornecidos.

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

Ocorre quando você clica em um acordeão.

Propriedades de detalhes:

  • actionLink (string): href fixo do acordeão, se especificado

df-button-clicked

Ocorre quando você clica em um botão.

Propriedades de detalhes:

  • actionLink (string): href de âncora do botão clicado, se especificado.
  • event (string): evento do botão clicado, se especificado.
  • languageCode (string): código de idioma do evento, se especificado. Caso contrário, o código de idioma principal.
  • text (string): texto do botão clicado.
window.addEventListener('df-button-clicked', (event) => {
  event.preventDefault(); // Messenger won't send the "event" request.

  // Handle "event" yourself.
});

df-chip-clicked

Ocorre quando você clica em um ícone.

Propriedades de detalhes:

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

df-citation-clicked

Ocorre quando você clica em uma citação.

Propriedades de detalhes:

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

df-info-card-clicked

Ocorre quando você clica em um card de informação.

Propriedades de detalhes:

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

df-list-element-clicked

Ocorre quando você clica em um elemento da lista.

Propriedades de detalhes:

  • actionLink (string): href de âncora do elemento de lista, se especificado.
  • event (string): evento do elemento da lista clicado, se especificado.
  • languageCode (string): código de idioma do evento, se especificado. Caso contrário, o código de idioma principal.
  • title (string): título do elemento da lista.
window.addEventListener('df-list-element-clicked', (event) => {
  event.preventDefault(); // Messenger won't send the "event" request.

  // Handle "event" yourself.
});

df-image-clicked

Ocorre quando você clica em uma imagem.

Propriedades de detalhes:

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