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 ...

                                • FreshserviceとZoho SalesIQの統合

                                  お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。 Freshservice & Zoho SalesIQ Freshserviceは、ITサービスマネジメント（ITSM）ソリューションで、サポートチケットの管理や資産管理、インシデントの解決を効率化します。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.