チュートリアル: Web チャットのサイズと位置のカスタマイズ

このチュートリアルでは、Web チャットをカスタム要素でレンダリングすることによって、Web チャットのサイズと位置を変更する方法について説明します。

このチュートリアルで説明されているサンプルの完全な作業バージョンについては、 watsonx Assistant Web チャットのカスタム・エレメントを参照してください。

デフォルトでは、Web サイト上の Web チャット・インターフェースは、ページ上の固定位置に表示されるようにスタイル設定されたホスト div エレメントでレンダリングされます。 Web チャットのサイズまたは位置を変更する場合は、Web チャットのホスト・ロケーションとしてカスタム・エレメントを指定できます。このホスト要素は、メイン Web チャット・インターフェースと Web チャット・ランチャーの両方の場所として使用されます (カスタム・ランチャーを使用している場合を除く)。

カスタム要素を使用すると、Web チャットを開いたり閉じたりしたとき (顧客がランチャー・アイコンや最小化ボタンをクリックしたときなど) に、Web チャットの表示と非表示を制御することもできます。これにより、アニメーションの開始や終了など、追加の効果を適用することができます。 addClassName()および removeClassName() 関数を使用して、メイン・ウィンドウの表示と非表示を制御できます。

カスタム要素を使用するには、以下の手順を実行します。

Web サイト・コードで、Web チャットをレンダリングするカスタム要素を定義します。これを行うには、使用しているフレームワークに応じてさまざまな方法があります。単純な例として、ID を使用して空の HTML エレメントを定義する場合を以下に示します。
```
<div id="WebChatContainer"></div>
```
Web チャット構成で参照できるように、カスタム要素への参照を取得します。参照を得るには、使用しているライブラリーにとって意味のあるメカニズムを使用してください。例えば、 document.createElement() から返された参照を保存したり、照会関数を使用して DOM 内のエレメントを検索したりすることができます。この例では、割り当てた ID を使用してエレメントを検索します。
```
const customElement = document.querySelector('#WebChatContainer');
```

Web チャット組み込みスクリプトで、 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();
  }
};

デフォルトでメイン Web チャット・ウィンドウが非表示になっていることを確認します。これは、 render が呼び出された後に、 onLoad イベント・ハンドラーで行うことができます。また、ページのロード後に顧客が Web チャットを開いたり閉じたりできるように、 view:change イベントを listen するハンドラーを追加する必要があります。この例では、 HideWebChat という CSS クラスを使用してこれを行います (このクラスの定義については、完全な例を参照してください)。
```
function onLoad(instance) {
  instance.render();
  instance.on({ type: 'view:change', handler: viewChangeHandler });
  instance.elements.getMainWindow().addClassName('HideWebChat');
}
```
view:change イベントへの応答としてメイン Web チャット・ウィンドウを非表示にしたり表示したりするためのハンドラーを作成します。この例では、単に要素を表示および非表示にします。完全な例は、アニメーション効果を追加する方法を示しています。
```
function viewChangeHandler(event, instance) {
  if (event.newViewState.mainWindow) {
    instance.elements.getMainWindow().removeClassName('HideWebChat');
  } else {
    instance.elements.getMainWindow().addClassName('HideWebChat');
  }
}
```

完全な作業コードについては、 watsonx Assistant Web チャットのカスタム要素の例を参照してください。