1. Chat Widget (Float/Button) - これはユーザーがあなたのWebサイト上で見るアイコンまたはボタンです。
2. Chat Window - これは、訪問者がチャットウィジェットをクリックすると開く包括的なチャットインターフェースです。
   

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

1. SalesIQダッシュボード内の設定> Brands > Personalization > Stickersに移動すると、SalesIQチャットウィジェットのための多くのカスタマイズ設定が見つかります。
2. ただし、ウィジェットをCSSを使ってカスタマイズしたい場合は、あなたのカスタムCSSを直接あなたのWebサイトのスタイルシートに追加します。
   
3. これらの修正は、あなたのWebサイト上に表示されるウィジェットに反映されます。
   

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

チャットウィンドウ（ウィジェットがクリックされた後に開くチャットインターフェース）の外観を変更するには：

1. SalesIQダッシュボードの設定 > Brands > Personalization > Appearanceに移動すると、あなたのSalesIQチャットウィンドウのための多くのカスタマイズ設定が見つかります。
2. ただし、チャットウィンドウをカスタムCSSを使って変更するためには、あなたのCSSファイルをSalesIQのAppearanceセクションにアップロードします。
3. 一度アップロードすると、修正は自動的にチャットウィンドウに適用されます。
   

ここをクリックして、チャットウィンドウのカスタマイズのためのサンプルCSSを参照してください。

ブラウザの開発者ツールを使用したチャットウィンドウスタイルのカスタマイズ方法

Google Chrome ブラウザ

1. 有効なチャットウィジェットを開き、右クリック（または、タッチパッドをダブルタップ）してメニューを開きます。
2. Inspectをクリックしてブラウザの開発者ツールにアクセスします。これにより開発者ツールパネルが開き、ウェブページの要素とのやり取りや変更が可能になります。

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をクリックして、ブラウザの開発者ツールにアクセスします。これにより、開発者ツールパネルが開き、あなたはウェブページの要素と対話したり、変更したりすることができます。

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. フォント-size: 10px !important; – これによりフォントサイズが調整されます。
4. display: なし !important; – これにより要素が非表示になります。

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

1. 開発者ツールの右側で、Sourcesタブ内のinspect-stylesheetを見つけてクリックします。
   
2. それをクリックしてスタイルシートを開き、さらにチャットウィンドウをカスタマイズするためのCSSを追加することができます。
   

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

が次の後 변경사항을 적용한 후 최종 .css 파일을 브랜드 설정 섹션에 업로드하여 적용하십시오.

사전 정의된 CSS 템플릿

당신을 돕기 위해, 우리는 신규 버전과 기존 버전의 SalesIQ 활성 채팅용 샘플 CSS 템플릿을 제공하였습니다.

• 채팅 위젯에 적합한 버전을 선택하십시오.
• 사용자 정의 과정을 시작하려면 해당 CSS 코드를 사용하십시오.