Eventos JavaScript do Dialogflow CX Messenger

O Dialogflow CX Messenger aciona uma variedade de eventos para os quais pode criar ouvintes 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

Por exemplo:

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

df-chat-open-changed

O chat está aberto ou fechado.

Propriedades de detalhes:

  • isOpen (boolean): novo estado do chat

Por exemplo:

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

df-user-input-entered

O utilizador introduziu texto.

Propriedades de detalhes:

  • input (string): valor introduzido pelo utilizador

Por exemplo:

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

df-request-sent

Um pedido enviado para o back-end do Dialogflow.

Propriedades de detalhes:

  • data (object): contentor de dados
  • data.requestBody (object): pedido que foi enviado

Por 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

Chegou uma resposta à caixa de diálogo do agente.

Propriedades de detalhes:

Por 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 ao back-end falha.

Propriedades de detalhes:

  • error (object): erro ocorrido

Por 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

Por 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

Por 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 sugeridos

Por exemplo:

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

df-accordion-clicked

O utilizador clicou no acordeão.

Propriedades de detalhes:

  • nenhum

df-button-clicked

O utilizador clicou num 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 utilizador clicou num chip.

Propriedades de detalhes:

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

df-citation-clicked

O utilizador clicou numa 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 utilizador clicou num cartão de informações.

Propriedades de detalhes:

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

df-list-element-clicked

O utilizador clicou num elemento de lista.

Propriedades de detalhes:

  • actionLink (string): href da âncora do elemento da lista, se especificado
  • event (string): event 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 utilizador clicou numa imagem.

Propriedades de detalhes:

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