Zoho SalesIQにおける独自のCSS

独自のCSSの概要

Zoho SalesIQでは、コードを書かなくてもチャットウィジェットやチャットウィンドウの外観を簡単にカスタマイズできます（標準的なカスタマイズは［設定］→［ブランド］→［（ブランド名）］→［カスタマイズ］に移動することで可能です）。一方で、CSSのコードを使用して、チャットウィンドウのデザインをより詳細に指定したい場合もあるでしょう。そのような場合は、独自のCSSファイルをアップロードしてデザインをカスタマイズすることもできます。CSSファイルのアップロードは、［設定］→［ブランド］→［（ブランド名）］→［カスタマイズ］→［外観］に移動し、ページの中ほどにある［独自のCSSファイル］のアップロード用ボタンから可能です。

以下では、各要素に対応するCSSのコードをご紹介します。CSSファイルに以下のコードを設定することで、要素ごとに細かくデザインを指定できます。たとえば、チャットウィンドウのヘッダーのデザインや、メッセージ入力欄の枠線や背景色、文字のサイズや色などを変更できます。

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

チャットウィンドウのヘッダーのデザインを変更するには以下のコードを使用します。

CSS：

header
{
}

例：

header {
height: 80px !important
}

組織のロゴ

チャットウィンドウのヘッダー内のロゴを変更するには以下のコードを使用します。ウィンドウに合わせてロゴの幅と高さを指定することもできます。

CSS：

.siq-company-logo
{
}

例：

.siq-company-logo {
border-radius: 15px !important
}

チャットの対応担当者の名前

対応担当者の名前欄の文字の色やフォントを変更するには以下のコードを使用します。

CSS：

.siq-chat-attender-name
{
}

例：

.siq-chat-attender-name {
color: black !important;
}

チャットの対応担当者の説明

対応担当者に関する説明欄の文字の色やフォントを変更するには以下のコードを使用します。

CSS：

.siq-about-me
{
}

例：

.siq-about-me{
color: darkgray !important;
}

チャットウィンドウの［x］（閉じる）アイコン

チャットウィンドウを閉じるためのアイコンのデザインを変更するには以下のコードを使用します。

CSS：

.siq-close-icon:before
{
}

例：

.siq-close-icon:before {
color: black !important;
}

チャットウィンドウのフッター

チャットウィンドウのフッターの背景色などのデザインを変更するには以下のコードを使用します。

CSS：

footer
{
}

例：

footer {
background-color: lightgray !important;
}

メッセージの送信ボタン

メッセージの送信ボタンの色などを変更するには以下のコードを使用します。

CSS：

.siq-send-button,
.siq-send-button:before{
}

例：

.siq-send-button,
.siq-send-button:before {
color: green !important;
}

チャットウィンドウの最小化アイコン

チャットウィンドウの最小化アイコンのデザインを変更するには以下のコードを使用します。

CSS：

.siq-minimize-icon:before
{
}

例：

.siq-minimize-icon:before {
color: black !important;
}

メールマガジンの登録欄

チャットウィジェットの下部にあるメールマガジンの登録欄のデザインを変更するには以下のコードを使用します。

CSS：

.siq-newsletter
{
}

例：

.siq-newsletter {
background: #ccc !important;
}

チェックボックス（メールマガジンの登録欄）

メールマガジンの登録欄にあるチェックボックスの色などのデザインを変更するには以下のコードを使用します。

CSS：

.siq-checkbox
{
}

例：

.siq-checkbox {
color: cadetblue !important;
}

テキスト（メールマガジンの登録欄）

メールマガジンの登録欄にあるテキストのデザインを変更するには以下のコードを使用します。

CSS：

.siq-checkbox-label em
{
}

例：

.siq-checkbox-label em {
color: red !important;
}

メッセージ欄

メッセージ欄全体のデザインを変更するには以下のコードを使用します。たとえば、文字の色や大きさ、フォントを指定することが可能です。

CSS：

.siq_content
{
}

例：

.siq_content {
background: #dedede57 !important;
}

メッセージ入力欄

メッセージ入力欄のデザインを変更するには以下のコードを使用します。

CSS：

.siq-message-textarea
{
}

例：

.siq-message-textarea {
background: #eee !important;
}

対応担当者の入力ステータス

チャットのやりとりにおいて、対応担当者がメッセージ入力欄にテキストを入力すると、訪問者のメッセージ入力欄上に、担当者がテキストを入力中であることを知らせるメッセージが表示されます。このメッセージ（入力ステータス）の表示欄のデザインを変更するには以下のコードを使用します。

CSS：

.siq-typing-message
{
}

例：

.siq-typing-message {
color: darkgray !important;
}

メッセージ入力欄の操作メニュー

メッセージ入力欄の操作メニューのデザインを変更するには以下のコードを使用します。

CSS：

.siq-menu:before
{
}

例：

.siq-menu:before {
color: gray !important;
}

チャット終了ボタン

メッセージ入力欄の右上にあるチャット終了ボタンのデザインを変更するには以下のコードを使用します。

CSS：

.siq-end-chat-button:before
{
}

例：

.siq-end-chat-button:before {
color: gray !important;
}

絵文字の選択欄

メッセージ入力欄の絵文字アイコンをクリックすると、絵文字の選択欄が表示されます。この絵文字の選択欄のデザインを変更するには以下のコードを使用します。

CSS：

.siq-smileys-section
{
}

例：

.siq-smileys-section {
background: #eee !important;
}

個別の絵文字

個別の絵文字の表示方法を変更するには以下のコードを使用します。

CSS：

.siq-smileys
{
}

例：

.siq-smileys {
background: #eee !important;
}

絵文字アイコン

メッセージ欄の絵文字アイコンの表示方法を変更するには以下のコードを使用します。

CSS：

.siq-smiley-icon
{
}

例：

.siq-smiley-icon {
box-shadow: 0 0 1px !important;
border-radius: 5px !important;
}

URLの共有に関するメッセージ欄

URLの共有に関するメッセージ欄のデザイン（文字のフォントやフォントサイズなど）を変更するには以下のコードを使用します。

CSS：

.siq-share-url
{
}

例：

.siq-share-url {
color: red !important;
}

訪問者に関する情報の入力欄

訪問者に関する情報の入力欄のデザインを変更するには以下のコードを使用します。

選択リスト（訪問者に関する情報の入力欄）

部門を選択するための選択リストのデザインを変更するには以下のコードを使用します。

CSS：

.siq-dropdown
{
}

例：

.siq-dropdown {
background-color: #d6c8c8 !important;
}

1行テキスト（訪問者に関する情報の入力欄）

1行テキストの入力欄（名前やメールアドレスといった情報を入力するための欄）のデザインを変更するには以下のコードを使用します。

CSS：

.siq-input-text-box
{
}

例：

.siq-input-text-box {
color: darkgray !important;
}

複数行テキスト（訪問者に関する情報の入力欄）

複数行テキストの入力欄（顧客が質問や要望などを入力するための欄）のデザインを変更するには以下のコードを使用します。

CSS：

.siq-message-area
{
}

例：

.siq-message-area {
border-radius: 30px !important;
overflow: hidden !important;
}

キャンセルボタン（訪問者に関する情報の入力欄）

訪問者に関する情報の入力欄に表示されるキャンセルボタンのデザインを変更するには以下のコードを使用します。

CSS：

.siq-cancel-button
{
}

例：

.siq-cancel-button {
background-color: red !important;
color: #fff !important;
}

更新ボタン（訪問者に関する情報の入力欄）

訪問者に関する情報の入力欄に表示される更新ボタンのデザインを変更するには以下のコードを使用します。

CSS：

.siq-update-button
{
}

例：

.siq-update-button {
background-color: green !important;
}

必須項目（訪問者に関する情報の入力欄）

必須項目のデザインを変更するには以下のコードを使用します。

CSS：

.siq-required
{
}

例：

.siq-required {
border-color: green !important;
}

評価とフィードバックの画面

評価とフィードバックの画面のデザインを変更するには以下のコードを使用します。

CSS：

.siq-feedback-section
{
}

例：

.siq-feedback-section {
background: #eee !important;
}

チャットの評価アイコン

チャットの評価アイコンのデザインを変更するには以下のコードを使用します。

CSS：

body .reaction_ico {}

例：

body .reaction_ico {
background-image: url (https://img.zohocdn.com/salesiq/images/reactions_36f94_.png) !important;
}
.sad_icon {
background-position: 0 0 !important;
}
.happy_icon {
background-position: -88px 0 !important;
}
.neutral_icon {
background-position: -44px 0 !important;
}