SalesIQライブチャットのカスタムCSS入門

SalesIQライブチャットのカスタムCSS入門

お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

各ブランドには固有のブランド・アイデンティティがあり、特定の色、フォント、レイアウトに反映されています。一貫性を保ち、顧客体験を向上させるために、SalesIQ のライブチャットウィジェットの CSS をカスタマイズして、自社ブランドのテーマに完全に合わせることができます。

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

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

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

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

ウィジェットをクリックしたあとに開くチャットウィンドウ（チャット画面）の見た目をカスタマイズするには：
  1. SalesIQ ダッシュボードで［設定］>［ブランド］>［パーソナライズ］>［外観］に移動すると、SalesIQ チャットウィンドウ用のさまざまなカスタマイズ設定が表示されます。
  2. チャットウィンドウをカスタム CSS で編集するには、SalesIQ の［外観］セクションに CSS ファイルをアップロードします。
  3. アップロードが完了すると、変更内容は自動的にチャットウィンドウに適用されます。
Idea
サンプル CSS を参照してチャットウィンドウをカスタマイズするには、こちらをクリックしてください。


ブラウザーのデベロッパーツールを使うと、カスタム CSS を簡単に変更・追加してプレビューできます。その後、内容を .css ファイルとして保存し、ブランド設定にアップロードして適用します。

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

ブラウザーごとに、CSS を編集／カスタマイズするためのデベロッパーツールが用意されています。ここでは、Google Chrome と Safari でカスタム 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; – 要素を非表示にします。
Alertメモ: カスタムスタイルで既存のスタイルを確実に上書きするために、必ず `!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; – 要素を非表示にします。
    Alertメモ: カスタムスタイルで既存のスタイルを確実に上書きするために、必ず `!important` を使用してください。

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

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

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

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

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

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