Tutorial: Customizing the size and position of the web chat

This tutorial shows how you can change the size and position of the web chat by rendering it in a custom element.

For a complete, working version of the example described in this tutorial, see Custom elements for watsonx Assistant web chat.

By default, the web chat interface on your website is rendered in a host div element that is styled to appear in a fixed location on the page. If you want to change the size or position of the web chat, you can specify a custom element as the host location for the web chat. This host element is used as the location for both the main web chat interface and for the web chat launcher (unless you are using a custom launcher).

When you use a custom element, you also take control of showing and hiding the web chat when it is opened or closed (such as when the customer clicks the launcher icon or the minimize button). This gives you the opportunity to apply additional effects, such as opening and closing animations. You can control showing and hiding the main window by using the addClassName() and removeClassName() functions.

To use a custom element, follow these steps:

In your website code, define the custom element where you want the web chat to be rendered. There are many ways of doing this, depending on the framework you are using. A simple example is to define an empty HTML element with an ID:
```
<div id="WebChatContainer"></div>
```
Get a reference to your custom element so you can reference it in the web chat configuration. To get a reference, use whatever mechanism makes sense for the library you are using. For example, you can save the reference returned from document.createElement(), or you can use a query function to look up the element in the DOM. This example looks up the element using the ID we assigned to it:
```
const customElement = document.querySelector('#WebChatContainer');
```

In the web chat embed script, set the element property, specifying the reference to your custom element.

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

  // The important piece.
  element: customElement,

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

Make sure that the main web chat window is hidden by default. You can do this in the onLoad event handler, after render has been called. You must also add handlers to listen for the view:change event so the customer can open and close the web chat after the page loads. In our example, we are using a CSS class called HideWebChat to do this (see the full example for the definition of this class):
```
function onLoad(instance) {
  instance.render();
  instance.on({ type: 'view:change', handler: viewChangeHandler });
  instance.elements.getMainWindow().addClassName('HideWebChat');
}
```

Create handlers to hide and show the main web chat window in response to the view:change event. This example simply shows and hides the element; the full example shows how you can add animation effects.

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

For complete working code, see the Custom elements for watsonx Assistant web chat example.