Tutorial: Personalizar el tamaño y la posición del chat web

Este tutorial muestra cómo puede cambiar el tamaño y la posición del chat web renderizándolo en un elemento personalizado.

Para obtener una versión completa y funcional del ejemplo descrito en este tutorial, consulte Elementos personalizados para el chat web del asistente de IA.

Por defecto, la interfaz de chat web de su sitio web se muestra en un elemento host ' div ' que está diseñado para aparecer en una ubicación fija de la página. Si desea cambiar el tamaño o la posición del chat web, puede especificar un elemento personalizado como ubicación del host para el chat web. Este elemento host se utiliza como ubicación tanto para la interfaz de chat web principal como para el lanzador de chat web (a menos que utilices un lanzador personalizado).

Cuando se utiliza un elemento personalizado, también se toma el control de mostrar y ocultar el chat web cuando se abre o se cierra (como cuando el cliente hace clic en el icono del lanzador o en el botón de minimizar). Esto te da la oportunidad de aplicar efectos adicionales, como animaciones de apertura y cierre. Puede controlar el mostrar y ocultar la ventana principal usando las funciones addClassName() y removeClassName().

Para utilizar un elemento personalizado, siga estos pasos:

En el código de su sitio web, defina el elemento personalizado en el que desea que se muestre el chat web. Hay muchas maneras de hacerlo, dependiendo del framework que estés utilizando. Un ejemplo sencillo es definir un elemento HTML vacío con un ID:
```
<div id="WebChatContainer"></div>
```
Obtenga una referencia a su elemento personalizado para que pueda hacer referencia a él en la configuración del chat web. Para obtener una referencia, utilice cualquier mecanismo que tenga sentido para la biblioteca que esté utilizando. Por ejemplo, puede guardar la referencia devuelta por ' document.createElement(), o puede utilizar una función de consulta para buscar el elemento en el DOM. Este ejemplo busca el elemento utilizando el ID que le hemos asignado:
```
const customElement = document.querySelector('#WebChatContainer');
```

En el script de incrustación del chat web, establece la propiedad ' element ', especificando la referencia a tu elemento personalizado.

window.watsonAssistantChatOptions = {
  integrationID: "YOUR_INTEGRATION_ID",
  region: "YOUR_REGION",
  serviceInstanceID: "YOUR_SERVICE_INSTANCE_ID",

  // The important piece.
  element: customElement,

  onLoad: function(instance) {
    instance.render();
  }
};

Asegúrese de que la ventana principal del chat web está oculta por defecto. Puedes hacerlo en el manejador del evento ' onLoad ', después de que ' render ' haya sido llamado. También debe añadir manejadores para escuchar el evento ' view:change ' para que el cliente pueda abrir y cerrar el chat web después de que se cargue la página. En nuestro ejemplo, estamos utilizando una clase CSS llamada ' HideWebChat para hacer esto (ver el ejemplo completo para la definición de esta clase):
```
function onLoad(instance) {
  instance.render();
  instance.on({ type: 'view:change', handler: viewChangeHandler });
  instance.elements.getMainWindow().addClassName('HideWebChat');
}
```

Crear manejadores para ocultar y mostrar la ventana principal del chat web en respuesta al evento ' view:change. Este ejemplo simplemente muestra y oculta el elemento; el ejemplo completo muestra cómo puede añadir efectos de animación.

function viewChangeHandler(event, instance) {
  if (event.newViewState.mainWindow) {
    instance.elements.getMainWindow().removeClassName('HideWebChat');
  } else {
    instance.elements.getMainWindow().addClassName('HideWebChat');
  }
}

Para ver el código de trabajo completo, consulte el ejemplo Elementos personalizados para el chat web del asistente de IA.