SalesIQライブチャットのサンプルCSS [新規]

SalesIQライブチャットのサンプルCSS [新規]

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

カスタム CSS の概要

あなたの SalesIQ ダッシュボードから、設定 > ブランド > 個別化へ移動すると、SalesIQチャットウィジェットやウィンドウのたくさんのカスタマイズ設定が見つかります、全てコードを一行も書かずに。開発者であるならば、私たちのカスタムデザインコントロールを使用するのではなく、自分でCSSを書きたいかもしれません。その場合、ブランド設定であなたのカスタムCSSファイルをアップロードできます。あなたのSalesIQダッシュボードから設定 > ブランド > ブランドを選択 > 個別化 > チャットウィンドウ > カスタム 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/プレミアム-vector/無料-shipping-すべて-注文-tag-banner-design-テンプレート-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. }

Chat attender 説明

このCSSを使用して、chat attender説明の表示、フォント、および色を変更できます。

例:

  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: +10、-10 +10、-10 1px !important;
  3. border-radius: 5px !important;
  4. }


訪問者入力エリア

ここでは、選択リスト、テキストボックス、その他など、訪問者入力エリアまたはその要素を変更できます。

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

このCSSは、訪問者入力エリアのテキストボックス項目の見た目を変更することができます。

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




    Zoho CRM 管理者向けトレーニング

    「導入したばかりで基本操作や設定に不安がある」、「短期間で集中的に運用開始できる状態にしたい」、「運用を開始しているが再度学び直したい」 といった課題を抱えられているユーザーさまに向けた少人数制のオンライントレーニングです。

    日々の営業活動を効率的に管理し、導入効果を高めるための方法を学びましょう。

    Zoho CRM Training



              Zoho Campaigns Resources

                Zoho WorkDrive Resources




                  • Desk Community Learning Series


                  • Digest


                  • Functions


                  • Meetups


                  • Kbase


                  • Resources


                  • Glossary


                  • Desk Marketplace


                  • MVP Corner


                  • Word of the Day


                  • Ask the Experts






                          Latest Feature Updates



                                  • Related Articles

                                  • SalesIQ for Zohoフォーム

                                    お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。 Zoho Formsは、ビジュアル的に魅力的なフォームを簡単に作成できる、いいえ-コードのオンラインフォームビルダーで、すべてのデータコレクションニーズに対応するソフトウェアソリューションです。Zoho SalesIQとZoho ...

                                  • SalesIQとのWhatsAppチャネルの統合

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

                                  • BiginアカウントとZoho SalesIQの統合

                                    お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。 SalesIQでのBigin Zoho SalesIQ向けBigin連携を利用することで、Webサイト訪問者に関するBiginの情報をSalesIQオペレーターチャットウィンドウに表示し、ホットな見込み客の特定や商談成立をより迅速に行えます。 主な特長 ...

                                  • 新しいパーソナライズウィジェット（ベータ版）でSalesIQチャットウィンドウをカスタマイズしよう

                                    お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。 メモ: この機能は現在ベータ バージョンです。必要に応じて、ウィジェットのさらなる改善のためにJS APIコードや形式に変更が加えられる場合があります。 また、ウィジェットのJS ...

                                  • WordPress

                                    WordPressとは？ WordPressは、MySQLデータベースを使用したオープンソースのWebサイト作成プラットフォームです。 Zoho SalesIQとWordPressの連携（チャットと訪問者追跡の機能の追加） WordPressにはたくさんのファンがいて、さまざまなところで利用されています。WordPressは設定が簡単で、ニーズに合わせて簡単に利用できます。Zoho SalesIQはWordPressのサイトにピッタリです。Zoho ...

                                  Resources

                                  Videos

                                  Watch comprehensive videos on features and other important topics that will help you master Zoho CRM.



                                  eBooks

                                  Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho CRM.



                                  Webinars

                                  Sign up for our webinars and learn the Zoho CRM basics, from customization to sales force automation and more.



                                  CRM Tips

                                  Make the most of Zoho CRM with these useful tips.