1. チャットウィジェット（フロート／ボタン） - ユーザーがWebサイト上で目にするアイコンやボタンです。
2. チャットウィンドウ - チャットウィジェットをクリックした際に開く、チャット用のインターフェースです。
   

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

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

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

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

1. SalesIQダッシュボードで、設定 > ブランド > パーソナライズ > 外観に進むと、SalesIQチャットウィンドウ向けの多くのカスタマイズ設定を確認できます。
2. チャットウィンドウをカスタムCSSで編集する場合は、CSSファイルをSalesIQの外観セクションにアップロードしてください。
3. アップロード後、変更内容は自動的にチャットウィンドウへ適用されます。
   

こちらをクリックすると、チャットウィンドウカスタマイズ用のサンプルCSSを参照できます。

ブラウザ開発者ツールを使ったチャットウィンドウスタイルのカスタマイズ手順

Google Chromeブラウザ

1. 有効なchatウィジェットを開き、右クリック（またはタッチパッド上でダブルタップ）してメニューにアクセスします。
2. Inspectをクリックしてブラウザの開発者ツールにアクセスします。これにより開発者ツールのパネルが開き、ウェブページの要素を操作・編集できます。
   

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

1. chatウィジェットにカーソルを合わせ、クリックして編集したい特定の要素をハイライトします。
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を追加してchatウィンドウをカスタマイズできます。
   

以上の手順で、ブラウザから直接chatウィンドウの見た目をカスタマイズできます。

Safariブラウザ

有効なチャットウィジェットを開き、メニューにアクセスするには、右クリック（またはタッチパッド上でダブルタップ）します。

Inspectをクリックしてブラウザのデベロッパーツールを開きます。これによりデベロッパーツールパネルが表示され、ウェブページの要素を操作・編集できます。

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コードを利用してカスタマイズを始めてください。