Eventos JavaScript do Dialogflow CX Messenger

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

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 é aberto ou fechado.

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 inseriu 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 para o back-end do Dialogflow CX.

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(); // Messenger won't send the request.

  // Send request yourself.
});

df-response-received

Uma resposta chegou à 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

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 terminou.

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 de recursos sugeridos.

Propriedades de detalhes:

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

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(); // Messenger won't send the "event" request.

  // Handle "event" yourself.
});

df-chip-clicked

O usuário clicou em um chip.

Propriedades de detalhes:

  • actionLink (string): href da âncora do chip clicado, se especificado
  • text (string): texto do chip 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 cartão de informações.

Propriedades de detalhes:

  • actionLink (string): href da âncora do cartão de informações
  • title (string): título do cartão de informações

df-list-element-clicked

O usuário clicou em um elemento da lista.

Propriedades de detalhes:

  • actionLink (string): href da âncora do elemento da lista, se especificado
  • event (string): evento do elemento da lista clicado, 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(); // 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 âncora da imagem, se especificado