教程: 与主机 Web 页面交互

您可以使用定制响应和事件来启用 Web 交谈，以便与显示该响应和事件的 Web 页面进行交互。

例如，客户可以使用您的助手来查找他们完成表单所需的信息。 您可以让 Web 聊天自动完成这些信息，而不是期望客户手动将这些信息复制到表单中。

有关本教程中示例的完整工作版本，请参阅 watsonx Assistant Web 聊天的页面交互。

此示例使用定制响应来呈现 Web 聊天中的按钮，该按钮使用客户的帐号填充表单字段:

1. 为 customResponse 事件创建处理程序。 此处理程序呈现定制按钮并为其创建单击处理程序。 单击处理程序使用 Document.querySelector() 方法与 DOM 进行交互，并使用客户的帐号填写表单字段。

   此示例使用硬编码帐号 1234567。 在典型的生产助手中，助手将从会话变量中检索此值，或者从外部系统中查询此值。

   function customResponseHandler(event) {
     const { element } = event.data;
   
     const button = document.createElement('button');
     button.type = 'button';
     button.innerHTML = 'Enter account number';
     button.addEventListener('click', () => {
       // Look for the account number element in the document, and enter the account number.
       document.querySelector('#account-number').value = '1234567';
     });
   
     element.appendChild(button);
   }
   

2. 在 onLoad 事件处理程序中，使用 on() 实例方法来预订 customResponse 事件，并将该处理程序注册为回调。 这使助手能够发送定制响应，该响应显示用于填写帐号的按钮。

   instance.on({
     type: 'customResponse',
     handler: (event, instance) => {
       const { message } = event.data;
       if (message.user_defined &&
           message.user_defined.user_defined_type === 'fill_account_number') {
             accountNumberResponseHandler(event, instance);
           }
     },
   });
   

   在此示例中，我们将检查定制响应的定制 user_defined_type 属性，并仅在指定类型为 fill_account_number 时调用 accountNumberResponseHandler() 函数。 这是一个可选检查，用于显示如何使用定制属性来定义多个不同的定制响应 (对于 user_defined_type，每个响应具有不同的值)。

有关完整的工作代码，请参阅 watsonx Assistant Web 聊天的页面交互 示例。