Esercitazione: personalizzazione della dimensione e della posizione della chat web

Questa esercitazione mostra come è possibile modificare la dimensione e la posizione della chat web eseguendo il rendering in un elemento personalizzato.

Per una versione completa e funzionante dell'esempio descritto in questa esercitazione, vedi Elementi personalizzati per watsonx Assistant web chat.

Per impostazione predefinita, il rendering dell'interfaccia della chat Web sul proprio sito Web viene eseguito in un elemento div host con stile che viene visualizzato in una posizione fissa nella pagina. Se si desidera modificare la dimensione o la posizione della chat Web, è possibile specificare un elemento personalizzato come ubicazione host per la chat Web. Questo elemento host viene utilizzato come ubicazione sia per l'interfaccia della chat web principale che per il programma di avvio della chat web (a meno che non si stia utilizzando un programma di avvio personalizzato).

Quando si utilizza un elemento personalizzato, si prende anche il controllo di mostrare e nascondere la chat web quando viene aperta o chiusa (ad esempio quando il cliente fa clic sull'icona del programma di avvio o sul pulsante di riduzione a icona). Questo ti dà l'opportunità di applicare ulteriori effetti, come le animazioni di apertura e chiusura. È possibile controllare la visualizzazione e nascondere la finestra principale utilizzando le funzioni addClassName () e removeClassName () .

Per utilizzare un elemento personalizzato, attenersi alla seguente procedura:

Nel codice del sito Web, definire l'elemento personalizzato in cui si desidera eseguire il rendering della chat Web. Ci sono molti modi per farlo, a seconda del framework che si sta utilizzando. Un esempio semplice è quello di definire un elemento HTML vuoto con un ID:
```
<div id="WebChatContainer"></div>
```
Ottenere un riferimento all'elemento personalizzato in modo da potervi fare riferimento nella configurazione della chat web. Per ottenere un riferimento, utilizzare il meccanismo appropriato per la libreria che si sta utilizzando. Ad esempio, è possibile salvare il riferimento restituito da document.createElement()oppure utilizzare una funzione di query per ricercare l'elemento nel DOM. Questo esempio ricerca l'elemento utilizzando l'ID ad esso assegnato:
```
const customElement = document.querySelector('#WebChatContainer');
```

Nello script di incorporazione della chat Web, impostare la proprietà element , specificando il riferimento all'elemento personalizzato.

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

  // The important piece.
  element: customElement,

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

Assicurarsi che la finestra di chat web principale sia nascosta per impostazione predefinita. È possibile eseguire questa operazione nel gestore eventi onLoad , dopo che è stato richiamato render . Devi anche aggiungere i gestori per ascoltare l'evento view:change in modo che il cliente possa aprire e chiudere la chat web dopo il caricamento della pagina. In questo esempio, viene utilizzata una classe CSS denominata HideWebChat per eseguire questa operazione (consultare l' esempio completo per la definizione di questa classe):
```
function onLoad(instance) {
  instance.render();
  instance.on({ type: 'view:change', handler: viewChangeHandler });
  instance.elements.getMainWindow().addClassName('HideWebChat');
}
```
Creare gestori per nascondere e mostrare la finestra di conversazione Web principale in risposta all'evento view:change . Questo esempio mostra e nasconde semplicemente l'elemento; l' esempio completo mostra come è possibile aggiungere effetti di animazione.
```
function viewChangeHandler(event, instance) {
  if (event.newViewState.mainWindow) {
    instance.elements.getMainWindow().removeClassName('HideWebChat');
  } else {
    instance.elements.getMainWindow().addClassName('HideWebChat');
  }
}
```

Per un codice di lavoro completo, vedi l'esempio Elementi personalizzati per la chat web watsonx Assistant .