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を使用して、チャット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 WorkDrive Resources




                Zoho Desk Resources

                • Desk Community Learning Series


                • Digest


                • Functions


                • Meetups


                • Kbase


                • Resources


                • Glossary


                • Desk Marketplace


                • MVP Corner


                • Word of the Day






                        Latest Feature Updates



                                • Related Articles

                                • WordPress

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

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

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

                                • Androidアプリ通知のトラブルシューティング

                                  Zoho SalesIQによる通知の送受信が、特定のAndroidデバイスまたはその他のアプリによってブロックされる場合があります。この問題を解決するための一般的なトラブルシューティングを紹介します。サポートが必要な場合は、support@zohosalesiq.comにご連絡ください。 以下のいずれかのデバイスを利用している場合、こちらでトラブルシューティングの手順を確認できます： Samsung OnePlus Xiaomi Oppo Vivo ...

                                • 個人プロフィールの設定

                                  担当者の情報をより多く入力しておくことで、訪問者はより安心してサポートを受けることができます。担当者のプロフィール情報が充実している場合、担当者に対して訪問者が親近感や専門性を感じやすくなり、連絡してみようという気持ちが起きやすくなります。  プロフィール画像の設定： 訪問者が担当者とチャットする際、まず目につくのがプロフィール写真です。必ずプロフィール写真を追加しておきましょう。 画面右上のプロフィール画像のアイコンをクリックすると、ダッシュボードが表示されます。 ...

                                • Microsoft SharePoint

                                  Microsoft SharePointとZoho SalesIQの連携（チャットと訪問者追跡の機能の追加） Microsoft SharePointとは？ Microsoft SharePointは、ドキュメント管理や情報共有を目的とした企業向けサービスです。さまざまなコンテンツやファイルを管理して共有するのに役立ちます。SharePointを使用してWebサイトを作成することもできます。組織やチームで必要な情報を保管、共有し、さまざまな端末からアクセスすることが可能です。 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.