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

Esta guía de aprendizaje muestra cómo puede cambiar el tamaño y la posición de la conversación web representándola en un elemento personalizado.

Para obtener una versión completa y funcional del ejemplo descrito en esta guía de aprendizaje, consulte Elementos personalizados para la conversación web de watsonx Assistant.

De forma predeterminada, la interfaz de conversación web en el sitio web se representa en un elemento div de host que tiene el estilo de aparecer en una ubicación fija en la página. Si desea cambiar el tamaño o la posición de la conversación web, puede especificar un elemento personalizado como ubicación de host para la conversación web. Este elemento de host se utiliza como ubicación tanto para la interfaz de conversación web principal como para el iniciador de conversación web (a menos que esté utilizando un iniciador 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 (por ejemplo, cuando el cliente pulsa el icono del lanzador o el botón de minimizar). Esto le da la oportunidad de aplicar efectos adicionales, como la apertura y el cierre de animaciones. Puede controlar la visualización y ocultación de la ventana principal utilizando las funciones addClassName () y removeClassName () .

Para utilizar un elemento personalizado, siga estos pasos:

En el código del sitio web, defina el elemento personalizado donde desea que se represente la conversación web. Hay muchas formas de hacerlo, en función de la infraestructura que esté 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 de conversación web. Para obtener una referencia, utilice cualquier mecanismo que tenga sentido para la biblioteca que está utilizando. Por ejemplo, puede guardar la referencia devuelta de 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 inclusión de conversación web, establezca la propiedad element , especificando la referencia al 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 de conversación web principal esté oculta de forma predeterminada. Puede hacerlo en el manejador de sucesos onLoad , después de que se haya llamado a render . También debe añadir manejadores para escuchar el suceso view:change para que el cliente pueda abrir y cerrar la conversación web después de que se cargue la página. En nuestro ejemplo, estamos utilizando una clase CSS denominada HideWebChat para hacerlo (consulte 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');
}
```

Cree manejadores para ocultar y mostrar la ventana de conversación web principal en respuesta al suceso 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 obtener el código de trabajo completo, consulte el ejemplo Custom elements for watsonx Assistant web chat .