教程: 显示预交谈或后交谈表单

本教程说明了如何在 Web 交谈打开之前显示预交谈表单，或在 Web 交谈关闭之后打开的后交谈表单。

有关本教程中描述的示例的完整工作版本，请参阅 watsonx Assistant Web 聊天的预和后聊天表单。

如果要在开始交谈会话之前从客户收集信息，那么可以在打开 Web 交谈之前显示预交谈表单。 类似地，您可能希望在 Web 交谈关闭后显示表单 (例如，客户满意度调查)。 您可以对任一情况使用相同的方法。

当打开或关闭 Web 聊天时，它会触发您可以预订的 事件。 在事件处理程序中，可以使用 定制面板 功能打开具有定制内容的面板。

通过返回在定制面板关闭时解析的承诺，您可以暂停打开或关闭 Web 交谈的过程，直到客户完成表单为止。

此示例显示如何创建预交谈表单。 要创建交谈后表单，请执行相同的步骤，但使用 !event.newViewState.mainWindow。

要显示预交谈表单，请执行以下步骤:

1. 为 view:change 事件创建处理程序，在 Web 交谈中的某个视图发生更改时 (例如，主窗口打开时) 触发此处理程序。 此处理程序使用 customPanels.getPanel() 实例方法来打开包含预交谈表单的定制面板。

   处理程序应返回在关闭定制面板时解析的 promise。 这将阻止 Web 聊天主窗口打开，直到预聊天表单完成为止。

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

2. 在 onLoad 事件处理程序中，使用 on() 实例方法来预订 view:change 事件，并将该处理程序注册为回调。

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

3. 创建用于创建要在定制面板中显示的预交谈表单的函数。 请确保在用户关闭面板时解析承诺。

   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 版本 也可用。

有关完整的工作代码，请参阅 watsonx Assistant Web chat 的预和后交谈表单 示例。