PC/モバイルサイトでのチャットボタンの出し分けについて

チャットボタンの表示設定概要 link

チャットボタンは、PCサイトとモバイルサイトで異なる設定が可能です。デバイスに最適化された表示を実現するための方法を説明します。

LiveAgentのチャットボタン表示設定 link

モバイル環境での外観設定 link

「設定」‐「チャット」‐「チャットボタン」‐（該当ボタン名をクリックして）「オンラインボタン」ページで、モバイル環境での表示をカスタマイズできます。

表示サイズの調整例 link

• 「変更なし」
• 「スケールダウン」
• テキスト部分のみ表示

デザインのカスタマイズ link

• オリジナル画像の使用
• サイトデザインに合わせた調整可能
  • デザイン
  • 表示方法
  • 位置
  • サイズ

PC/モバイルサイトでのボタン出し分け方法 link

実装手順 link

1. LiveAgentでボタン設定

   • PC用チャットボタン
   • スマホ用チャットボタン

2. Webサイトへのソースコード貼り付け

CSSによる表示制御 link

スマートフォンサイズ時の設定 link

• PC用チャットボタンを非表示
• モバイル用チャットボタンを表示

タブレット/PC サイズ時の設定 link

• PC用チャットボタンを表示
• モバイル用チャットボタンを非表示

実装コード例 link

HTMLでのクラス指定 link

<div class="livechat_pc">
  <!-- PC用チャットボタンソースコード -->
</div>

<div class="livechat_mobile">
  <!-- モバイル用チャットボタンソースコード -->
</div>

CSSでの表示制御 link

@media only screen and (max-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; }
}