1. チャットウィジェット（フロート／ボタン） - Web サイト上に表示されるアイコンまたはボタン。
2. チャットウィンドウ - 訪問者がチャットウィジェットをクリックしたときに開く、フル機能のチャット画面。
   

チャットウィジェットの CSS をカスタマイズする

1. SalesIQ ダッシュボードで、［設定］>［ブランド］>［パーソナライズ］>［ステッカー］に移動すると、SalesIQ チャットウィジェット用のさまざまなカスタマイズ設定が表示されます。
2. ただし、CSS でウィジェットをカスタマイズしたい場合は、Web サイトのスタイルシートに直接カスタム CSS を追加してください。
   
3. これらの変更は、Web サイト上に表示されるウィジェットに適用されます。
   

チャットウィンドウの CSS をカスタマイズする

ウィジェットをクリックしたあとに開くチャットウィンドウ（チャット画面）の見た目をカスタマイズするには：

1. SalesIQ ダッシュボードで［設定］>［ブランド］>［パーソナライズ］>［外観］に移動すると、SalesIQ チャットウィンドウ用のさまざまなカスタマイズ設定が表示されます。
2. チャットウィンドウをカスタム CSS で編集するには、SalesIQ の［外観］セクションに CSS ファイルをアップロードします。
3. アップロードが完了すると、変更内容は自動的にチャットウィンドウに適用されます。
   

サンプル CSS を参照してチャットウィンドウをカスタマイズするには、こちらをクリックしてください。

ブラウザーのデベロッパーツールを使ってチャットウィンドウのスタイルをカスタマイズする手順

Google Chrome ブラウザー

1. ライブチャットウィジェットを開き、右クリック（またはタッチパッドをダブルタップ）してメニューを表示します。
2. Inspect をクリックしてブラウザーのデベロッパーツールを開きます。デベロッパーツールパネルが開き、Web ページの要素を操作・変更できるようになります。
   

1. デベロッパーツールバーで、マウスポインターのアイコンをクリックして、要素選択モードを有効にします。
   

1. チャットウィジェットの上にカーソルを合わせ、変更したい特定の要素をクリックしてハイライトします。
2. 要素を選択すると、その要素の属性（data-zsqa='elementname' など）、クラス（class='...styling'）、ID（id='...functionality'）が表示されます。
   

1. カスタムスタイルで使用するために、属性（data-zsqa='elementname'）またはクラスをコピーします。
   
2. ［Styles］タブで、プラス（＋）アイコンをクリックして新しいスタイルルールを作成します。
   

1. 初期設定のスタイルを、前の手順でコピーした属性またはクラスに置き換え、カスタム CSS を記述します。以下は色などを変更する際によく使用される CSS の例です。
1. background-color: red !important; – 背景色を変更します。
2. color: red !important; – 文字色を変更します。
3. font-size: 10px !important; – フォントサイズを調整します。
4. display: none !important; – 要素を非表示にします。

メモ: カスタムスタイルで既存のスタイルを確実に上書きするために、必ず `!important` を使用してください。

1. デベロッパーツール右側の［Sources］タブで、inspect-stylesheet を探してクリックします。
   
2. クリックしてスタイルシートを開き、チャットウィンドウをさらにカスタマイズするための CSS を追加します。
   

これらの手順に従うことで、ブラウザー上から直接チャットウィンドウの見た目を自由にカスタマイズできます。

Safari ブラウザー

ライブチャットウィジェットを開き、右クリック（またはタッチパッドをダブルタップ）してメニューを表示します。

Inspect をクリックしてブラウザーのデベロッパーツールを開きます。デベロッパーツールパネルが開き、Web ページの要素を操作・変更できるようになります。

1. デベロッパーツールバーで、マウスポインターのアイコンをクリックして、要素選択モードを有効にします。
   

1. チャットウィジェットの上にカーソルを合わせ、変更したい特定の要素をクリックしてハイライトします。
2. 要素を選択すると、その要素の属性（data-zsqa='elementname' など）、クラス（class='...styling'）、ID（id='...functionality'）が表示されます。
   

1. カスタムスタイルで使用するために、属性（data-zsqa='elementname'）またはクラスをコピーします。
   
2. 画面下部のプラス（＋）アイコンをクリックして、新しいスタイルルールを作成します。
   

1. 初期設定のスタイルを、前の手順でコピーした属性またはクラスに置き換え、カスタム CSS を記述します。以下は色などを変更する際によく使用される CSS の例です。
1. background-color: red !important; – 背景色を変更します。
2. color: red !important; – 文字色を変更します。
3. font-size: 10px !important; – フォントサイズを調整します。
4. display: none !important; – 要素を非表示にします。

メモ: カスタムスタイルで既存のスタイルを確実に上書きするために、必ず `!important` を使用してください。

1. デベロッパーツール右側の［Sources］タブで、inspect-stylesheet を探してクリックします。
   
2. クリックしてスタイルシートを開き、チャットウィンドウをさらにカスタマイズするための CSS を追加します。
   

これらの手順に従うことで、ブラウザー上から直接チャットウィンドウの見た目を自由にカスタマイズできます。

変更が完了したら、最終的な .css ファイルをブランド設定セクションにアップロードして適用します。

あらかじめ用意された CSS テンプレート

スムーズに作業を開始できるように、SalesIQ ライブチャットの新しいバージョンと従来バージョンの両方に対応したサンプル CSS テンプレートを用意しています。

• ご利用中のチャットウィジェットに合ったバージョンを必ず選択してください。
• 対応する CSS コードを使用して、カスタマイズ作業を開始してください。