Tutorial: Anpassen der Größe und Position des Webchats

Dieses Tutorial zeigt, wie Sie die Größe und Position des Webchats ändern können, indem Sie ihn in einem benutzerdefinierten Element darstellen.

Eine vollständige, funktionsfähige Version des in diesem Tutorial beschriebenen Beispiels finden Sie unter „Benutzerdefinierte Elemente für den Web-Chat des KI-Assistenten “.

Standardmäßig wird die Web-Chat-Schnittstelle auf Ihrer Website in einem Host-Element " div gerendert, das so gestaltet ist, dass es an einer festen Stelle auf der Seite erscheint. Wenn Sie die Größe oder Position des Webchats ändern möchten, können Sie ein benutzerdefiniertes Element als Host-Speicherort für den Webchat angeben. Dieses Host-Element wird als Speicherort sowohl für die Haupt-Webchat-Oberfläche als auch für den Webchat-Starter verwendet (es sei denn, Sie verwenden einen benutzerdefinierten Starter).

Wenn Sie ein benutzerdefiniertes Element verwenden, haben Sie auch die Kontrolle über das Ein- und Ausblenden des Webchats, wenn er geöffnet oder geschlossen wird (z. B. wenn der Kunde auf das Startsymbol oder die Schaltfläche "Minimieren" klickt). So haben Sie die Möglichkeit, zusätzliche Effekte wie Öffnungs- und Schließanimationen anzuwenden. Mit den Funktionen „ addClassName( )“ und „ removeClassName( ) “ können Sie das Ein- und Ausblenden des Hauptfensters steuern.

Um ein benutzerdefiniertes Element zu verwenden, gehen Sie folgendermaßen vor:

1. Definieren Sie im Code Ihrer Website das benutzerdefinierte Element, in dem der Web-Chat dargestellt werden soll. Je nach dem von Ihnen verwendeten Framework gibt es verschiedene Möglichkeiten, dies zu tun. Ein einfaches Beispiel ist die Definition eines leeren HTML-Elements mit einer ID:

    <div id="WebChatContainer"></div>

1. Holen Sie sich einen Verweis auf Ihr benutzerdefiniertes Element, damit Sie es in der Webchat-Konfiguration referenzieren können. Um eine Referenz zu erhalten, verwenden Sie den Mechanismus, der für die von Ihnen verwendete Bibliothek sinnvoll ist. Sie können zum Beispiel den von " document.createElement() zurückgegebenen Verweis speichern oder eine Abfragefunktion verwenden, um das Element im DOM zu suchen. In diesem Beispiel wird das Element anhand der ihm zugewiesenen ID gesucht:

    const customElement = document.querySelector('#WebChatContainer');

1. Legen Sie im Skript zum Einbetten des Webchats die Eigenschaft " element fest und geben Sie den Verweis auf Ihr benutzerdefiniertes 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();
      }
    };

1. Stellen Sie sicher, dass das Hauptfenster des Webchats standardmäßig ausgeblendet ist. Sie können dies im Ereignis-Handler " onLoad tun, nachdem " render aufgerufen wurde. Sie müssen auch Handler hinzufügen, die auf das Ereignis " view:change warten, damit der Kunde den Webchat nach dem Laden der Seite öffnen und schließen kann. In unserem Beispiel verwenden wir dazu eine HideWebChat CSS-Klasse namens (die Definition dieser Klasse finden Sie im vollständigen Beispiel ):

    function onLoad(instance) {
      instance.render();
      instance.on({ type: 'view:change', handler: viewChangeHandler });
      instance.elements.getMainWindow().addClassName('HideWebChat');
    }

1. Erstellen Sie Handler zum Ein- und Ausblenden des Hauptfensters des Webchats als Reaktion auf das Ereignis " view:change. In diesem Beispiel wird das Element lediglich ein- und ausgeblendet; das vollständige Beispiel zeigt, wie Sie Animationseffekte hinzufügen können.

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

Den vollständigen Code finden Sie im Beispiel „Benutzerdefinierte Elemente für den Web-Chat des KI-Assistenten “.