スマホ画面サポート|詳細設定

スマホ画面サポート|詳細設定

このページでは、スマホ画面サポートの詳細設定を解説します。

※ スマホ画面サポートの設定をおこなうには、ホームページに所定のタグを埋め込む必要があります。Web担当者・サイト管理ご担当者に当ページをご案内ください。


スマホ画面サポートは「詳細設定」をおこなうことで、自社ホームページや組込み先のWebページに最適なデザインに設定することが可能です。
以降の手順を参照のうえ、ご設定ください。

デザインの必要がない場合は、デフォルトのデザイン(初期設定)でご利用ください。


< 目次 >
■ STEP 1:起動ボタンの設置
■ STEP 2:JavaScriptコードの設置
 -サイトキーの取得方法
■ STEP 3:デザインの適用
 - 起動ボタンのクラス説明
 - 送信ボタンのクラス説明
 - 通知スナックバーのクラス説明


■ STEP 1:起動ボタンの設置
以下、詳細設定用のサンプルHTMLになります。
以下のまま、または必要に応じて加工いただき、対象ページに埋め込みをおこなってください。

html
<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コードになります。
管理画面上で取得した「サイトキー」を、以下のソースコード内の 「{site-key}」 に代入のうえ、対象ページに埋め込みをおこなってください。

JS
<script id="bf-script" src="https://static.bell-face.com/bellface-img-sharing-tag/bundle.js" data-client="{site-key}" data-option="eyJkZWZhdWx0Q1NTIjpmYWxzZX0=" defer></script>

※ パスワード入力画面など、サポートに関係しない画面への貼り付けは避けてください。
※ JavaScriptでDOM追加するため、送信ボタンおよび通知スナックバーはHTMLの編集がおこなえません。
※ 埋め込み位置は、冒頭でロードされる必要性がないためbody の閉じタグ( </body> )の直後が推奨となります
他のスクリプト実行との優先度や兼ね合いで適宜ご判断ください。
※ JavaScriptコードが埋め込まれていないページでは、スマホ画面サポートはご利用いただけません
例)「① JS があるページ → ② JS のないページ → ③ JS のあるページ」という操作を行った場合
② の画面での撮影や画面情報送信はできません。
②から③や①に遷移した場合、 ①と③のページで継続利用することは可能です。
※ スクリプトについては、Google Tag Managerでの設置を行うことが可能です
設置を行う場合、document.writeの設定を有効化のうえ、ご対応ください
※ 設置後は、必ず動作確認いただきますようよろしくお願い致します




■ STEP 3:デザインの適用
手順1.

手順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)までご連絡ください。
■ このカテゴリーのページ
スマホ画面サポート|詳細設定

最終更新日:2022/08/18