Tutorial: Personalización de la acción de saludo en función de la página actual

Este tutorial muestra cómo puede personalizar dinámicamente la acción de saludo que desencadena el chat web basándose en la página que el usuario está viendo en ese momento.

Para obtener una versión completa y funcional del ejemplo descrito en este tutorial, consulte Seleccionar acción de saludo para el chat web del asistente AI.

Si no tienes activada la pantalla de inicio, el comportamiento por defecto cuando se abre el chat web es enviar un mensaje vacío al asistente para iniciar la conversación. Este mensaje vacío activa la acción Saludar al cliente, que normalmente envía un mensaje de bienvenida.

En lugar de iniciar la conversación con un saludo genérico, es posible que desee que sus usuarios vean un mensaje específico de la página que están viendo. Por ejemplo, si un usuario ya ha navegado a una página sobre tarjetas de crédito y luego abre el chat web, es posible que desee iniciar la conversación con un mensaje específico sobre tarjetas de crédito.

Aunque este ejemplo muestra cómo adaptar el texto en función de la página actual, puede utilizar el mismo enfoque básico para adaptar el texto en función de cualquier condición del cliente (como la hora del día o la ubicación geográfica del usuario).

Para cambiar la acción de saludo en función de la página que esté viendo el usuario, siga estos pasos:

Determina qué página está viendo actualmente el usuario. Dependiendo del diseño de su aplicación, hay varias maneras de hacer esto, pero un mecanismo simple es comprobar el valor de un parámetro de consulta URL (en este ejemplo, ' page):
```
const page = new URLSearchParams(window.location.search).get('page');
```
Crea un manejador para el evento ' pre:send ', que se dispara antes de enviar un mensaje al asistente. Este manejador comienza comprobando la propiedad ' is_welcome_request ' para determinar si el mensaje que se está enviando es el mensaje vacío que inicia la conversación disparando la acción de saludar al cliente.

En caso afirmativo, el controlador comprueba la página mostrada en ese momento y sustituye el mensaje vacío saliente por un mensaje que desencadenará una acción específica para la página. (Este ejemplo sólo muestra la configuración del mensaje para ' Credit Cards, pero las condiciones adicionales ' if ' podrían personalizar el mensaje para otras páginas)
```
function preSendHandler(event) {
  if (event.data.history && event.data.history.is_welcome_request) {
    if (page === 'cards') {
      event.data.input.text = 'Credit Cards';
    }
  }
}
```
En tu manejador de eventos ' onLoad ', utiliza el método de instancia ' once() ' para suscribirte al evento ' pre:send ', registrando la función ' preSendHandler() ' como callback. (Podemos utilizar ' once() en lugar de ' on() porque este manejador necesita ser llamado sólo para el primer mensaje de la sesión)
```
instance.once({ type: 'pre:send', handler: preSendHandler});
```

Para ver el código de trabajo completo, consulte el ejemplo Seleccionar acción de saludo para el chat web del asistente de IA.