【OK SKY】ウィジェットデザイン例（CSS設定など）

OK SKY

ウィジェットにCSSデザインを適応する方法

ウィジェットの画面デザインを設定します。

接客管理画面（OK SKY）左下歯車マークを押下＞「ウィジェット」を押下
＞デザインを設定したいウィジェットを選択＞「画面デザイン設定」を押下＞タブ「V1」を押下

タブ「V2」のウィジェットはCSSでデザイン変更できません。
CSSでデザイン変更したい場合はタブ「V1」を選択ください。

No	項目名	説明

No	項目名	説明
1	デフォルトCSS ※タブ：チャットアイコン	チャットアイコンのデフォルトCSSのコードを表示しています。
2	編集用CSS ※タブ：チャットアイコン	上書きしたいチャットアイコンCSSコードを記述します。
3	デフォルトCSS ※タブ：チャット画面	チャット画面のデフォルトCSSのコードを表示しています。
4	編集用CSS ※タブ：チャット画面	上書きしたいチャット画面CSSコードを記述します。
5	ヘッダーを表示	ヘッダーの表示/非表示を操作します。
6	日付形式	チャットルームでの送信・受信時刻の表記を設定します。

CSSを編集し、チャットウィジェットでのメッセージ吹き出し内のリンクを、部分的に非表示にする

1.管理画面の設定を選択します。

2.チャット管理画面を選択し、任意の管理画面を選択します。

3.画面デザイン変更から、編集用CSSを編集します。

リンクのタイトルを非表示

.speech .link-type-message-title {
  font-size: 0px;
}

リンク説明文を非表示

.speech .link-type-message-description {
  font-size: 0px;
}

リンク画像を非表示

.user-name-header + a {
  display: none;
}

スマホでサイトを閲覧した時の、チャット画面の横幅を設定します。

サイトのHTMLを表示し、name="viewport"を記述している、箇所を変更します。

デバイス幅に合わせる
content="width=device-width"
端末ごとの表示に応じてフレキシブルな表示が可能です。

幅を指定する
content="width=480"
任意の幅を指定し、表示する事が可能です。