チャットボットを全画面で公開したい – DialogPlay - TIS株式会社

チャットウインドウを以下2通りの方法で全画面表示することができます。
※公開先が「Web」の場合のみ表示可能です。

①リンククリック後の遷移先でチャットボットを全画面表示する

②チャット呼び出しボタンをクリック後、チャットボットを全画面表示する

アプリケーション公開画面『チャット画面のカスタマイズ』の『表示位置』から「フレーム埋め込み」を選択し、"保存と埋め込みタグ生成"ボタンをクリック後、生成された『埋め込みチャットタグ』から「src=”https:// ～ "」に記載されているURLをコピーしてください。
チャット画面へのリンクを追加したいWEBサイト（htmlファイル）に、コピーしたURLでリンクタグを作成してください。
ブラウザー上で全画面表示されることを確認してください。

対象のアプリケーション公開画面『チャット画面のカスタマイズ』の『表示位置』を「右寄せ」、『チャット呼び出しボタン』を任意の呼び出しボタンに設定してください。
※レイアウト崩れ防止の為、『表示位置』は「右寄せ」固定としてください。
チャットボットを全画面表示するためのスタイルを作成し、WEBサイト（htmlファイル）内の</script>の後に追記してください。
『チャット呼び出しボタン』で選択した項目により設定名が変わるため、赤文字部分を設定名に置き換えて作成してください。

チャット呼び出しボタン選択項目設定名

タイトルバー title-header

吹き出しアイコン balloon-button

カスタム画像 custom-image

[吹き出しアイコン設定例]
```
<style>
 /* full screen */
 div.dm.balloon-button div.dm-chat {
 right: 0px;
 }
 div.dm.balloon-button div.dm-chat.is-open {
 bottom: 0px;
 height: 100%;
 }
 div.dm.balloon-button div.dm-chat.is-open iframe {
 width: 100%;
 }
</style>
```
ブラウザー上で全画面表示されることを確認してください。