Tutorial: Interacción con la página web anfitriona

Puede utilizar respuestas y eventos personalizados para que el chat web interactúe con la página web en la que aparece.

Por ejemplo, los clientes pueden utilizar su asistente para encontrar la información que necesitan para rellenar un formulario. En lugar de esperar que el cliente copie esta información manualmente en el formulario, puede hacer que el chat web complete automáticamente la información.

Para obtener una versión completa y funcional del ejemplo de este tutorial, consulte Interacciones de página para el chat web del asistente de IA.

Este ejemplo utiliza una respuesta personalizada para mostrar un botón en el chat web que rellena un campo de formulario con el número de cuenta del cliente:

1. Crea un manejador para el evento ' customResponse '. Este manejador renderiza un botón personalizado y crea un manejador de clic para él. El controlador de clic utiliza el método ' Document.querySelector() ' para interactuar con el DOM y completar un campo de formulario con el número de cuenta del cliente.

   Este ejemplo utiliza el número de cuenta " 1234567. En un asistente de producción típico, su asistente recuperaría este valor de una variable de sesión o lo consultaría desde un sistema externo.

   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. En tu manejador de eventos ' onLoad ', utiliza el método de instancia ' on() ' para suscribirte al evento ' customResponse ', registrando el manejador como callback. Esto permite al asistente enviar una respuesta personalizada que muestra el botón para rellenar el número de cuenta.

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

   En este ejemplo, estamos comprobando la propiedad personalizada ' user_defined_type de la respuesta personalizada y llamando a la función ' accountNumberResponseHandler() ' sólo si el tipo especificado es ' fill_account_number. Se trata de una comprobación opcional que muestra cómo podría utilizar una propiedad personalizada para definir varias respuestas personalizadas diferentes (cada una con un valor diferente para ' user_defined_type).

Para obtener el código de trabajo completo, consulte el ejemplo de interacciones de página para el chat web del asistente de IA.