アイコンの基本設定
チャットを設置した際のアイコンのカスタマイズが可能です。
チャットデザインへ移動#
サイドメニューよりチャット画面デザインをクリックして移動します。
基本設定#
本画面ではチャットアイコンの設置位置やサイズ、設置方式などを選択することができます。
各項目の設定内容は下記の通りです。
| 項目 | サブ項目 | 内容 |
|---|---|---|
| 全般設定 | 方式 | チャットの設置位置を埋め込み、左詰めアイコン、右詰めアイコンから選択可能です。 |
| 全般設定 | 埋め込み先ID | 埋め込み先ホームページの、チャットボットを埋め込む要素のIDを入力してください。 例) container 埋め込みHP側の要素は、通常DIV要素で作成します。 HP側の例) <div id="container"></div> 方式が「埋め込み」の場合のみ選択できます。 |
| 全般設定 | アイコン | アップロードボタンから、任意のアイコンを選択してください。 ファイル形式は(png、jpg、jepg、gif)が選択可能です。 方式が「埋め込み」の場合は選択できません。 |
| アイコンのサイズ（高さ） | PC / スマホ等 | アイコンの高さが設定できます。設定値には、px等の単位を入力する必要があります。 例)100px 方式が「埋め込み」の場合は選択できません。 |
| アイコンの位置 | 左右スペース (PC / スマホ等) | アイコンの表示位置を右もしくは左からスペース調整できます。設定値には、px等の単位を入力する必要があります。 例)100px 方式が「埋め込み」の場合は選択できません。 |
| アイコンの位置 | 下スペース (PC / スマホ等) | アイコンの表示位置を下からスペース調整できます。設定値には、px等の単位を入力する必要があります。 例)100px 方式が「埋め込み」の場合は選択できません。 |
| 吹き出しアニメーション | 吹き出し表示間隔 (ミリ秒) | 各吹き出しを表示する際の表示間隔を設定できます。 |
| 吹き出しアニメーション | ローディングアニメーション | 各吹き出しを表示する際の間に表示されるローディングアニメーションのGIFを設定することができます。 |
| 文字アニメーション | 文字表示間隔 (ミリ秒) | 文字アニメーションを表示する場合の1文字ごとの表示間隔をミリ秒で設定できます。文字アニメーションを使用しない場合は0ミリ秒を指定してください。 |
| チャット設置用のコード | 設置タグ | ホームページにチャットを設置する際に使用するコードです。 |
| チャット専用ページ | QRコード | チャット専用ページ（チャット単体のみのページ）にアクセスするためのQRコードです。 |
| チャット専用ページ | 実際のURL | チャット専用ページ（チャット単体のみのページ）にアクセスするためのURLです。 |
ローディングアニメーション#
吹き出しを表示する際に挿入されるアニメーションです。
吹き出しの表示間隔を設定することで表示されるようになります。
※吹き出しの表示間隔が0の状態では表示されません。
本番環境に反映#
変更した内容を本番環境に反映するには以下の手順が必要です。
保存#
保存ボタンをクリックすると変更した内容を保存することができます。本番環境には反映されません。
デプロイ#
デプロイボタンをクリックすると保存された内容が本番環境へ反映されます。
チャットプレビュー画面#
注意
チャットプレビューではiframeを使用してサイト情報を表示しているため、参照先のホームページがiframeの読み込みを許可していない場合、表示することができないのでご注意ください。
チャットプレビュー画面ではリアルタイムに変更された内容を確認することができます。
URLを設定#
チャットを設置したいホームページのURLをペーストすると、擬似的にチャットアイコンを設置した際のプレビューが可能です。
デバイスの選択（スマホ・PC）#
スマホとPCでプレビュー画面を切り替えることができます。
note
チャットプレビュー画面でのテストは、集計には影響しません。