ウィジェットにCSSデザインを適応する方法
概要
ウィジェットの画面デザインを設定します。
操作画面
No | 項目名 | 説明 |
|---|---|---|
1 | チャットアイコンCSS（デフォルト） | チャットアイコンのデフォルトCSSのコードを表示しています。 |
2 | チャットアイコンCSS | 上書きしたいチャットアイコンCSSコードを記述します。 |
3 | チャット画面CSS（デフォルト） | チャット画面のデフォルトCSSのコードを表示しています。 |
4 | チャット画面CSS | 上書きしたいチャット画面CSSコードを記述します。 |
5 | ヘッダーを表示 | ヘッダーの表示/非表示を操作します。 |
6 | 一時的に無効にする | チャットボタンの有効/無効を操作します。 |
7 | 日付形式 | チャットルームでの送信・受信時刻の表記を設定します。 |
チャット画面に表示されるリンクの内容を非表示にする方法
概要
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"を記述している、箇所を変更します。
例： <meta name="viewport" content="width=device-width";
デバイス幅に合わせる
content="width=device-width"
端末ごとの表示に応じてフレキシブルな表示が可能です。
幅を指定する
content="width=480"
任意の幅を指定し、表示する事が可能す。
initial-scale=1.0