SalesIQライブチャット用サンプルCSS【新機能】

SalesIQライブチャット用サンプルCSS【新機能】

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

カスタム CSS の概要

SalesIQ ダッシュボードから設定 > ブランド > パーソナライズに移動すると、コードを 1 行も書かずに SalesIQ チャットウィジェットやチャットウィンドウを細かくカスタマイズできます。 ただし、開発者の方であれば、カスタムデザインコントロールを使う代わりに独自の CSS を記述したい場合もあるでしょう。その場合は、ブランド設定でカスタム CSS ファイルをアップロードできます。SalesIQ ダッシュボードから設定 > ブランド > 対象のブランドを選択 > パーソナライズ > チャットウィンドウ > カスタム CSS をアップロード >「新規」を選択し、CSS ファイルをアップロードします。アップロードした CSS はチャットウィンドウに適用されます。

ここでは、タブの構造要素をすべて分解し、それぞれの要素名と対応する CSS をまとめています。これを利用して、タブ内の個々のパーツに CSS を適用できます。たとえば、この CSS を使ってヘッダーのみにカスタム CSS を適用したり、チャットウィンドウ内に独自のフッターを作成したりできます。
Warning
メモ: 以下のサンプル CSS は新しい SalesIQ 有効チャット用です。

ホームページ

画像やパターンを追加して、ホームページの色を変更できます。

例


会話ページ

会話ページに既定の画像を設定できます。

例
  1. .widget_offline, .widget_online {
  2. width: 360px;
  3. height: 260px;
  4. background-画像: url(https://img.freepik.com/premium-vector/free-shipping-all-orders-tag-banner-design-template-store-marketing-background-modern-graphic_624773-45.jpg);
  5. background-繰り返し: いいえ-繰り返し;
  6. background-size: cover;
  7. }



チャットウィンドウヘッダー

チャットウィンドウヘッダーの見た目やデザインを変更できます。

例:

  1. .siqcw-header {
  2. --header-height: 100px !important;
  3. }

この CSS を使用して、チャットウィンドウヘッダーに自社のロゴを表示できます。チャットウィンドウに合わせてロゴの高さや幅をカスタマイズすることも可能です。

例:

  1. .embed-prof-cont {
  2. border-radius: 15px !important;
  3. }

チャット担当者名

この CSS を使用して、チャット担当者名の表示形式、フォント、色を変更できます。

例:

  1. [data-zsqa='header_title'] {
  2.   color: #eba845 !important;
  3. }

チャット担当者の説明

この CSS を使用して、チャット担当者の説明文の表示形式、フォント、色を変更できます。

例:

  1. [data-zsqa='header_desc'] {
  2. color: #eba845 !important;
  3. }


チャットウィンドウ - 閉じるアイコン

この CSS を使用して、チャットウィンドウの閉じるアイコンの見た目やデザインを変更できます。

例:

  1. .chat-win-閉じる:が次の前 {
  2. color: #eba845 !important;
  3. }

この CSS を使用して、チャットウィンドウフッターのスタイル、外観、色を変更できます。

例:

  1. .footer-タブ {
  2. background-color: #eba845 !important;
  3. }

メッセージ送信ボタン

この CSS を使用して、自社 Web サイトのデザインや要件に合わせてメッセージ送信ボタンをカスタマイズできます。

例:

  1. .siqico-送信する {
  2.     background-color: #eba845 !important;
  3. }

ニュースレター購読セクション

チャットウィジェットでニュースレター購読用の「サブスクリプション管理」チェックボックスを設定するセクションをカスタマイズできます。

例:

  1. [data-zsqa='Newsletter サブスクリプション'] {
  2. background-color: #eba845 !important;
  3. color: #fff !important;
  4. }

メッセージエリア

チャットウィンドウ内のメッセージエリアを変更できます。テキストの見た目を変更したり、テキストに色を追加したり、フォント、フォントサイズ、その他の要素をこの CSS でカスタマイズできます。

例:

  1. [data-zsqa='message_window'] {
  2. background-color: #eba845 !important;
  3. }



訪問者テキストメッセージ入力エリア

この CSS を使用して、チャットウィンドウ内の訪問者テキスト入力エリアを変更できます。

例:

  1. .scroll-txtarea {
  2. background-color: #eba845 !important;
  3. }

メッセージエリア - メニュー

この CSS を使用して、チャットウィンドウ内のメッセージエリアのメニューの見た目を変更できます。

例:

  1. .siqcw-drpdwn-list {
  2.     background-color: #eba845 !important;
  3. }

訪問者チャット終了ボタン

この CSS を使用して、メッセージエリア内の訪問者チャット終了ボタンを変更できます。

例:

  1. [data-zsqa='endchat'] {
  2.     background-color: #eba845 !important;
  3. }

絵文字セクション

この CSS を使用して、チャットウィンドウのテキストメッセージエリアにある絵文字・スマイリーセクションを変更できます。

例:

  1. .emoji_wrapper {
  2. background-color: #eba845 !important;
  3. }


絵文字アイコン

この CSS を使用して、チャットウィンドウのメッセージエリアにある絵文字アイコンの見た目を変更できます。

例:

  1. .siqsy-cont {
  2. 箱-shadow: 0 0 1px !important;
  3. border-radius: 5px !important;
  4. }


訪問者入力エリア

ここでは、訪問者入力エリアや、ドロップダウン、テキストボックスなどのコンポーネントを変更できます。

テキストボックス - 訪問者入力エリア

この CSS を使用して、訪問者入力エリア内のテキストボックス項目の見た目を変更できます。

例:
  1. .siqcw-input-cont {
  2. background-color: #eba845 !important;
  3. }