Tutorial: Exibindo um formulário pré-chat ou pós-chat

Este tutorial mostra como você pode exibir um formulário pré-chat antes da abertura do bate-papo na Web ou um formulário pós-chat que é aberto após o fechamento do bate-papo na Web.

Para obter uma versão completa e funcional do exemplo descrito neste tutorial, consulte Formulários pré e pós-chat para chat na web com assistente de IA.

Se quiser coletar informações de seus clientes antes de iniciar uma sessão de bate-papo, você pode exibir um formulário pré-chat antes de abrir o bate-papo na Web. Da mesma forma, talvez você queira exibir um formulário após o encerramento do bate-papo na Web (por exemplo, uma pesquisa de satisfação do cliente). Você pode usar a mesma abordagem para qualquer situação.

Quando o chat online é aberto ou fechado, ele dispara um evento ao qual você pode se inscrever. No seu manipulador de eventos, você pode usar o recurso de painéis personalizados para abrir um painel com conteúdo personalizado.

Ao retornar uma promessa que é resolvida quando o painel personalizado é fechado, você pode pausar o processo de abertura ou fechamento do bate-papo na Web até que o cliente conclua o formulário.

Este exemplo mostra como criar um formulário de pré-chat. Para criar um formulário pós-chat, siga as mesmas etapas, mas use ' !event.newViewState.mainWindow.

Para exibir um formulário de pré-chat, siga estas etapas:

1. Crie um manipulador para o view:change evento, que é acionado quando uma das visualizações do chat na web é alterada (por exemplo, quando a janela principal é aberta). Esse manipulador usa o método de instância ' customPanels.getPanel() para abrir um painel personalizado que contém o formulário pré-chat.

Seu manipulador deve retornar uma promessa que é resolvida quando o painel personalizado é fechado. Isso impede que a janela principal do bate-papo na Web seja aberta até que o formulário pré-chat seja preenchido.

    function viewChangeHandler(event, instance) {
      const mainWindowOpening = !event.oldViewState.mainWindow && event.newViewState.mainWindow;
      if (mainWindowOpening) {
        return new Promise((resolve) => {
          promiseResolve = resolve;
   
          createOpenPanel(instance);
          const customPanel = instance.customPanels.getPanel();
          customPanel.open({ hidePanelHeader: true,
                             disableAnimation: true });
        });
      }
    }

1. No seu onLoad manipulador de eventos, use o método on() de instância para se inscrever no view:change evento, registrando o manipulador como a função de retorno de chamada.

    instance.on({ type: 'view:change', handler: viewChangeHandler });

1. Crie uma função que crie o formulário pré-chat que você deseja exibir dentro do painel personalizado. Certifique-se de resolver a promessa quando o usuário fechar o painel.

    function createOpenPanel(instance) {
      const customPanel = instance.customPanels.getPanel();
      const { hostElement } = customPanel;
  
      hostElement.innerHTML = `
        <div class="PreChatForm">
          ... // Content of pre-chat form
        </div>
      `;

      const okButton = hostElement.querySelector('#PreChatForm__OkButton')
      okButton.addEventListener('click', () => {
        customPanel.close();
        promiseResolve();
      });
    }

Também está disponível uma versão deste exemplo em React.

Para obter o código completo e funcional, consulte o exemplo de formulários pré e pós-chat para chat web com assistente de IA.