教程：与主机网页互动

您可以使用自定义回复和事件，让网络聊天与出现它的网页进行交互。

例如，客户可能会使用您的助手查找填写表格所需的信息。 与其让客户手动将这些信息复制到表单中，不如让网络聊天自动完成这些信息。

如需本教程示例的完整、可运行版本，请参阅 《 AI 助手网页聊天的页面交互 》。

此示例使用自定义回复在网络聊天中呈现一个按钮，该按钮会在表单字段中填入客户的账号：

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

1. 在您的 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值都不同）。

如需完整的可运行代码，请参阅 “AI 助手网页聊天示例”中的页面交互部分。