bellFace起点スマホ画面サポートの詳細設定
トップページ » スマホ画面サポート機能｜カテゴリートップ » スマホ画面サポート機能｜事前設定 » bellFace起点スマホ画面サポートの詳細設定
このページでは、bellFace起点スマホ画面サポートの詳細設定を解説します。
詳細設定では、CSSを適用することでボタンや通知バーのデザインをカスタマイズしてご利用いただけます。
デザインの必要がない場合は、デフォルトのデザイン（初期設定）でご利用ください。
＜ 目次 ＞
■ STEP 1：起動ボタンの設置
以下、詳細設定用のサンプルHTMLになります。
以下のまま、または必要に応じて加工いただき、対象ページに埋め込みをおこなってください。
htmlCopied!
<div class="bf-container"> <div class="bf-js-info-button bf-css-info-button"> <span class="bf-css-info-button-text"></span> </div></div>
※ サンプルHTMLでは、以下2つのクラスに対してJavaScriptで機能を付与しています。削除や変更をしないようご注意ください。
.bf-container
.bf-js-info-button
※ サンプルでは<span>タグを使用していますが、<a>タグや<button>タグなども使用が可能です。
■ STEP 2：JavaScriptコードの設置
手順1．
JavaScriptコード設置のためのサイトキーを取得します。
管理者ユーザーにて、管理画面メニュー ＞ ［管理者メニュー］ ＞ ［スマホ画面サポート］にアクセスし、詳細設定欄に記載のサイトキーをコピーし、Web担当者にご共有ください。
手順2．
以下、詳細設定用のサンプルJavaScriptコードになります。
管理画面上で取得した「サイトキー」を、以下のソースコード内の 「サイトキー」 に代入のうえ、対象ページに埋め込みをおこなってください。
JSCopied!
<script id="bf-script" src="https://static.bell-face.com/bellface-img-sharing-tag/bundle.js" data-client="サイトキー" data-option="eyAiY29ubmVjdGlvbk1vZGUiOiAibnVtYmVyIiwgImRlZmF1bHRDU1MiOiBmYWxzZSB9" defer></script>※ Webサイト・ページへのコード設置作業は、サポート対象外となります。
※ パスワード入力画面など、サポートに関係しない画面への貼り付けは避けてください
マスキングなどの対応をおこなっていない場合に、個人情報などもキャプチャされてしまう可能性があります。
特定の項目をキャプチャから除外することも可能です。詳細は以下をご確認ください
設置ページの内容にご注意の上、ご検討ください。
※ JavaScriptでDOM追加するため、送信ボタンおよび通知スナックバーはHTMLの編集がおこなえません
送信ボタンおよび通知スナックバーはCSSのカスタマイズのみとなります。HTMLのカスタマイズはできません。
※ 冒頭でロードされる必要性がないため、埋め込み位置はbody の閉じタグ（ </body> ）の直後が推奨となります
他のスクリプト実行との優先度や兼ね合いで適宜ご判断ください。
※ JavaScriptコードが埋め込まれていないページでは、スマホ画面サポートはご利用いただけません
例）「① JS があるページ → ② JS のないページ → ③ JS のあるページ」という操作を行った場合
② の画面での撮影や画面情報送信はできません。
②から③や①に遷移した場合、 ①と③のページで継続利用することは可能です。
※ スクリプトについては、Google Tag Managerでの設置を行うことが可能です
設置を行う場合、document.writeの設定を有効化のうえ、ご対応ください
※ コード設置後は、必ず動作をご確認ください
PCとスマートフォンをご準備のうえ、スマートフォンをゲスト側に見立てて動作確認をおこなってください。
■ STEP 3：デザインの適用
手順1．
スマホ画面サポート機能の詳細設定CSSサンプル を適用してください。
手順2．
適用したCSSやHTMLに対して、掲載するWebサイトに合わせてデザインをご設定ください。
各ボタン・スナックバーのクラス説明は、以下をご参照ください。
- 起動ボタンのクラス説明
起動ボタンは、以下のクラスを利用してスタイルを定義することができます。
| クラス名 | 説明 |
| bf-container | 必須クラス。JavaScriptで使用している |
| bf-js-info-button | 必須クラス。JavaScriptで使用している |
| bf-css-info-button | 起動ボタンのスタイルを定義する |
| bf-css-info-button-text | 起動ボタンの中のテキストスタイルを定義する |
| bf-disabled | スマホ画面サポートが起動中にボタンに追加されるクラス |
- 送信ボタンのクラス説明
送信ボタンは、以下のクラスを利用してスタイルを定義することができます。
| クラス名 | 説明 |
| bf-css-share-button | 送信ボタンのスタイルを定義する |
| bf-disabled | 送信ボタンが使用できない時に追加されるクラス |
- 通知スナックバーのクラス説明
通知スナックバーは、以下のクラスを利用してスタイルを定義することができます。
| クラス名 | 説明 |
| bf-css-snackbar-container | 通知スナックバーの大きさや表示位置を定義する |
| bf-css-snackbar | 通知スナックバーの実体となるクラス。アニメーションや透明度などを定義する |
| bf-css-snackbar-notification | 送信成功時など通常の通知時に追加されるクラス |
| bf-css-snackbar-error | 送信失敗時などエラー時に追加されるクラス |
| bf-css-snackbar-icon | 通知の種類を表現するアイコンのスタイルを定義する |
| bf-css-snackbar-title | 通知内容のテキストスタイルを定義する |
| bf-css-snackbar-close | 通知スナックバーを閉じるボタンのスタイルを定義する |
当ページの内容にご不明点がある場合は、チャットサポート または 弊社カスタマーサクセスチーム宛（cs@bell-face.com）までご連絡ください。
■ このカテゴリーのページ
bellFace起点スマホ画面サポートの詳細設定
最終更新日：2022/12/15