教程：显示聊天前或聊天后表单

本教程展示了如何在网络聊天打开前显示聊天前表单，或在网络聊天关闭后显示聊天后表单。

如需本教程中所述示例的完整、可运行版本，请参阅 《AI 助手网页聊天的聊天前和聊天后表单 》。

如果您想在开始聊天会话前收集客户信息，可以在打开网络聊天前显示预聊天表单。 同样，您可能想在网络聊天关闭后显示一个表单（例如客户满意度调查）。 在这两种情况下，您都可以使用相同的方法。

当网页聊天窗口打开或关闭时，会触发一个事件 ，您可以订阅该事件。 在事件处理程序中，您可以使用自定义面板功能来打开一个包含自定义内容的面板。

通过返回一个在自定义面板关闭时解决的承诺，您可以暂停打开或关闭网络聊天的过程，直到客户完成表单。

本示例展示了如何创建预聊天表单。 要创建聊天后表单，请按照相同步骤操作，但要使用 "!event.newViewState.mainWindow。

要显示预聊天表单，请按照以下步骤操作：

1. 为 事件创建一个处理程序，该 view:change 事件在 Web 聊天中的某个视图发生变化时触发（例如主窗口打开时）。 此处理程序使用 "customPanels.getPanel()实例方法打开包含预聊天表单的自定义面板。

处理程序应返回一个承诺，在自定义面板关闭时进行解析。 这样，网络聊天主窗口就不会打开，直到完成预聊天表单后才会打开。

    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. 在您的 onLoad 事件处理程序中，使用实例 on() 方法订阅该 view:change 事件，并将处理程序注册为回调。

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

1. 创建一个函数，用于创建要在自定义面板内显示的聊天前表单。 确保在用户关闭面板时解决承诺问题。

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

此示例还提供了一个 React 版本。

完整的可运行代码，请参见 “AI 助手网页聊天示例：聊天前和聊天后表单”。