PCサイト向け/モバイルサイト向けでチャットボタンの表示を切り替えることができます。
初期設定ではPCサイト向けに最適化されたボタンの設定となりますので、モバイルサイト向けに対応する場合は以下の方法があります。
■LiveAgentのチャットボタン表示設定
「設定」‐「チャット」‐「チャットボタン」‐（該当ボタン名をクリックして）「オンラインボタン」
このページに「モバイル環境での外観」を設定する項目があります。
下記は設定時の表示見本です。
左が「変更なし」、中央が「スケールダウン」を選択した場合のスマートフォンにおける表示サイズの違いの例です。右は「スケールダウン」を選択した上でテキスト部分のみ表示したものです。上の見本では「バブル型」というプリメイドのチャットボタンデザインを使用しています。吹き出しのような画像部分を「×」で閉じると以後はテキスト部分だけが表示されるようになり、サイト閲覧を邪魔しない形でボタンを表示します。
ボタンはオリジナルの画像を使用することもできますので、チャットボタンを設置するサイトデザインに合わせて、デザインや表示方法、位置、サイズなどを調整してみてください。
■PC/モバイルサイトでのボタンの出し分け設定
ブラウザの画面幅を認識することにより、表示するボタンを出し分けする設定例をご案内します。
チャットボタン用の画像を2種類作成し、Webページに両方を配置します。
◇ブラウザの画面幅がスマホサイズの時は…
⇒スマホ用のチャットウインドウを表示、PC用のチャットウインドウを非表示
◇ブラウザの画面幅がPCサイズの時は…
⇒スマホ用のチャットウインドウを非表示、PC用のチャットウインドウを表示
htmlに読み込ませているCSSに下記の記述を入れて表示を設定します。
-----------------
＜設定方法＞
1.
LiveAgent上で、PC用のチャットボタン設定に加えて、スマホ用に小さいチャットボタン画像を作成し、スマホ用チャットボタン設定を追加登録
（PC用とスマホ用の２種類のチャットボタンを用意する形）
2.
PC用ソースコードとスマホ用ソースコードを御社webサイトのhtmlに貼り付け
3.
htmlに読み込ませているCSSに、PC用チャットボタンとスマホ用チャットボタン用の２種類のclassまたはidを設定、出し分け設定を記述
※以下はclassで「livechat_pc」「livechat_mobile」をそれぞれ設定した場合です。
⚫︎スマホ用画面サイズ(@media only screen and (min-width: 679px) 以下等)
.livechat_pc{
display:none;
}
.livechat_mobile{
display:block;
}
⚫︎タブレットサイズ以上用(@media only screen and (min-width: 679px)以上 用)
.livechat_pc{
display:block;
}
.livechat_mobile{
display:none;
}
4.
htmlに貼り付けたPC用とスマホ用ライブチャットボタンのソースコードをそれぞれdivで囲み、上記で設定したclass名、またはid名を記述する
⚫︎PC用ライブチャットボタン
<div class="livechat_pc">
<script type="text/javascript">
〜御社のPC用チャットボタンソースコード入ル〜
</script>
</div>
⚫︎スマホ用ライブチャットボタン
<div class="livechat_mobile">
<script type="text/javascript">
〜御社のスマホ用チャットボタンソースコード入ル〜
</script>
</div>
-----------------
