Lernprogramm: Größe und Position des Web-Chats anpassen

Dieses Lernprogramm zeigt, wie Sie die Größe und Position des Web-Chats ändern können, indem Sie ihn in einem angepassten Element wiedergeben.

Eine vollständige, funktionsfähige Version des in diesem Lernprogramm beschriebenen Beispiels finden Sie unter Angepasste Elemente für watsonx Assistant -Web-Chat.

Standardmäßig wird die Web-Chat-Schnittstelle auf Ihrer Website in einem Hostelement div wiedergegeben, das so dargestellt wird, dass er an einer festen Position auf der Seite angezeigt wird. Wenn Sie die Größe oder Position des Web-Chats ändern möchten, können Sie ein angepasstes Element als Hostposition für den Web-Chat angeben. Dieses Hostelement wird als Position für die Haupt-Web-Chat-Schnittstelle und für das Web-Chat-Startprogramm verwendet (sofern Sie kein angepasstes Startprogramm verwenden).

Wenn Sie ein benutzerdefiniertes Element verwenden, können Sie auch steuern, ob der Web-Chat ein-oder ausgeblendet wird, wenn er geöffnet oder geschlossen wird (z. B. wenn der Kunde auf das Startsymbol oder die Schaltfläche zum Minimieren klickt). Dadurch haben Sie die Möglichkeit, zusätzliche Effekte wie das Öffnen und Schließen von Animationen anzuwenden. Sie können das Ein-und Ausblenden des Hauptfensters steuern, indem Sie die Funktionen addClassName () und removeClassName () verwenden.

Gehen Sie wie folgt vor, um ein angepasstes Element zu verwenden:

Definieren Sie im Code Ihrer Website das benutzerdefinierte Element, in dem der Web-Chat wiedergegeben werden soll. Es gibt viele Möglichkeiten, dies zu tun, abhängig von dem Framework, das Sie verwenden. Ein einfaches Beispiel ist die Definition eines leeren HTML-Elements mit einer ID:
```
<div id="WebChatContainer"></div>
```
Rufen Sie einen Verweis auf Ihr angepasstes Element ab, damit Sie in der Web-Chat-Konfiguration darauf verweisen können. Um einen Verweis abzurufen, verwenden Sie den Mechanismus, der für die verwendete Bibliothek sinnvoll ist. Sie können beispielsweise die von document.createElement()zurückgegebene Referenz speichern oder eine Abfragefunktion verwenden, um das Element im DOM zu suchen. In diesem Beispiel wird das Element anhand der ihm zugeordneten ID gesucht:
```
const customElement = document.querySelector('#WebChatContainer');
```

Legen Sie im Web-Chat-Einbettungsscript die Eigenschaft element fest und geben Sie den Verweis auf Ihr angepasstes Element an.

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

  // The important piece.
  element: customElement,

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

Stellen Sie sicher, dass das Web-Chat-Hauptfenster standardmäßig ausgeblendet ist. Sie können dies im Ereignishandler onLoad tun, nachdem render aufgerufen wurde. Sie müssen außerdem Handler hinzufügen, um das Ereignis view:change zu überwachen, damit der Kunde den Web-Chat öffnen und schließen kann, nachdem die Seite geladen wurde. In unserem Beispiel verwenden wir dazu eine CSS-Klasse mit dem Namen HideWebChat (siehe das vollständige Beispiel für die Definition dieser Klasse):
```
function onLoad(instance) {
  instance.render();
  instance.on({ type: 'view:change', handler: viewChangeHandler });
  instance.elements.getMainWindow().addClassName('HideWebChat');
}
```
Erstellen Sie Handler zum Aus-und Einblenden des Web-Chat-Hauptfensters als Reaktion auf das Ereignis view:change . In diesem Beispiel wird das Element einfach ein-und ausgeblendet. Das vollständige Beispiel zeigt, wie Animationseffekte hinzugefügt werden.
```
function viewChangeHandler(event, instance) {
  if (event.newViewState.mainWindow) {
    instance.elements.getMainWindow().removeClassName('HideWebChat');
  } else {
    instance.elements.getMainWindow().addClassName('HideWebChat');
  }
}
```

Informationen zum vollständigen Arbeitscode finden Sie im Beispiel Angepasste Elemente für watsonx Assistant -Web-Chat .