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

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

このチュートリアルで説明する例の完全な実用版については、AIアシスタントウェブチャットのカスタム要素を参照してください。

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

カスタム要素を使用する場合、ウェブチャットが開かれたり閉じられたりした時（顧客がランチャーアイコンや最小化ボタンをクリックした時など）に、ウェブチャットの表示と非表示をコントロールすることもできます。これにより、開閉アニメーションなどの追加効果を適用することができます。メイン・ウィンドウの表示と非表示は、addClassName() 関数removeClassName()と関数で制御できます。

カスタム・エレメントを使用するには、以下の手順に従ってください：

ウェブサイトのコードで、ウェブチャットをレンダリングするカスタム要素を定義します。この方法は、使用しているフレームワークによっていろいろある。簡単な例として、IDを持つ空のHTML要素を定義します：
```
<div id="WebChatContainer"></div>
```
カスタムエレメントへの参照を取得し、ウェブチャット設定で参照できるようにします。リファレンスを取得するには、使用しているライブラリに適したメカニズムを使用する。例えば、'document.createElement()から返された参照を保存することもできるし、クエリー関数を使用してDOM内の要素を検索することもできる。この例では、割り当てたIDを使って要素を検索している：
```
const customElement = document.querySelector('#WebChatContainer');
```

ウェブチャット埋め込みスクリプトで、'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();
  }
};

メインのウェブチャットウィンドウがデフォルトで非表示になっていることを確認してください。 You can do this in the onLoad event handler, after render has been called. また、ページがロードされた後、顧客がウェブチャットを開いたり閉じたりできるように、'view:changeイベントをリッスンするハンドラを追加する必要があります。この例では、「HideWebChatCSSクラスを使ってこれを実現している（このクラスの定義については、完全な例を参照のこと）：
```
function onLoad(instance) {
  instance.render();
  instance.on({ type: 'view:change', handler: viewChangeHandler });
  instance.elements.getMainWindow().addClassName('HideWebChat');
}
```
view:changeイベントに応答して、メインのウェブチャットウィンドウを隠したり表示したりするハンドラを作成する。この例では、単に要素を表示したり隠したりしていますが、完全な例ではアニメーション効果を追加する方法を示しています。
```
function viewChangeHandler(event, instance) {
  if (event.newViewState.mainWindow) {
    instance.elements.getMainWindow().removeClassName('HideWebChat');
  } else {
    instance.elements.getMainWindow().addClassName('HideWebChat');
  }
}
```

完全な動作コードについては、AIアシスタントウェブチャットのカスタム要素の例を参照してください。