Tutorial: Interacting with the host web page

You can use custom responses and events to enable the web chat to interact with the web page where it appears.

For example, customers might use your assistant to find information they need to complete a form. Rather than expecting the customer to then copy this information manually to the form, you can have the web chat automatically complete the information.

For a complete, working version of the example in this tutorial, see Page interactions for AI assistant web chat.

This example uses a custom response to render a button in the web chat that populates a form field with the customer's account number:

  1. Create a handler for the customResponse event. This handler renders a custom button and creates a click handler for it. The click handler uses the Document.querySelector() method to interact with the DOM and complete a form field with the customer's account number.

    This example uses the hardcoded account number 1234567. In a typical production assistant, your assistant would retrieve this value from a session variable or query it from an external system.

    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. In your onLoad event handler, use the on() instance method to subscribe to the customResponse event, registering the handler as the callback. This enables the assistant to send a custom response that displays the button for filling in the account number.

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

    In this example, we are checking the custom user_defined_type property of the custom response and calling the accountNumberResponseHandler() function only if the specified type is fill_account_number. This is an optional check that shows how you might use a custom property to define multiple different custom responses (each with a different value for user_defined_type).

For complete working code, see the Page interactions for AI assistant web chat example.