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:
-
Create a handler for the
customResponse
event. This handler renders a custom button and creates a click handler for it. The click handler uses theDocument.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); }
-
In your
onLoad
event handler, use theon()
instance method to subscribe to thecustomResponse
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 theaccountNumberResponseHandler()
function only if the specified type isfill_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 foruser_defined_type
).
For complete working code, see the Page interactions for AI assistant web chat example.