Eventos JavaScript do Dialogflow CX Messenger

O Dialogflow CX 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 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 do detalhe:

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

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 que ocorreu

Exemplo:

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

df-session-expired

A sessão com o agente expirou.

Propriedades do detalhe:

  • 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 do detalhe:

  • nenhum

df-button-clicked

O usuário clicou em um botão.

Propriedades de detalhes:

  • actionLink (string): href â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 ícone.

Propriedades de detalhes:

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

df-citation-clicked

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

Propriedades do detalhe:

  • actionLink (string): âncora href 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 do detalhe:

  • actionLink (string): href â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 de âncora da imagem, se especificado