サポートウィジェットに独自のCSSを設定することができ、基本設定などでは難しかったカスタマイズが可能になります。アイコンのサイズなど基本設定や詳細設定から設定できるものはそちらから設定ください。

カスタムCSSの設定方法

サポートウィジェットの編集画面から「配置とデザイン」のセクションで「カスタムCSS」のタブを選択します。エディタにCSSを記述することができます。

カスタムCSSの記述方法について

• 主要な要素にカスタムCSS用に c- で始まるクラス名が付与されているので、このクラス名を利用してカスタムCSSを設定してください。(例: .c-icon)
• c- 以外のクラスセレクタにもスタイルを当てることは可能ですが、今後のアップデートでクラス名などが変更される可能性があります。
• セレクタの先頭に #rs_sw を記述してください。詳細度が高くなることで、既存のCSSを上書きすることができます。(例: #rs_sw .c-icon)

カスタムCSS用の主要なセレクタと対応箇所

• アイコン : #rs_sw .c-icon
• バナー : #rs_sw .c-banner

• ウィジェット : #rs_sw .c-widget
• ウィジェット上部 :#rs_sw .c-widgetHeader
• 検索ボックス : #rs_sw .c-searchBox
• ウィジェット上部タイトル : #rs_sw .c-widgetTitle
• ウィジェット内見出し : #rs_sw .c-sectionTitle
• トピック・選択肢 : #rs_sw .c-select

• シナリオ内見出し : #rs_sw .c-scenarioTitle

• ウィジェット内ボタン : #rs_sw .c-button
• お問い合わせノード : #rs_sw .c-contactNode
• テキストエリア : #rs_sw .c-textArea
• アンサー : #rs_sw .c-UserInputContent
• アンサー内リアクションボタン : #rs_sw .c-reactionButton

サポートウィジェットのセレクタを調べる

ブラウザの開発者ツールを使用してHTMLの要素に設定されているタグやクラスを調べることができます。Google　Chromeを使用した例を紹介します。

1. Google Chromeで右クリックメニューを開いて、一番下の「検証」を選択して開発者ツールを開きます。(F12 キーでも開くことができます)
2. 一番左の矢印アイコンをクリックして調べたい要素にカーソルを移動します。
3. Elements(要素)パネルに、選択した要素のHTMLがフォーカスされ確認できます。また、Styles(スタイル) パネルから適用されているCSSの確認も可能です。