logo

スマホ画面サポートの利用申請・事前設定をする

2025年3月14日 更新

このページでは、スマホ画面サポート機能の利用申請・事前設定を解説します。

1．スマホ画面サポート機能とは

スマホ画面サポート機能とは、ゲスト側がスマートフォンで閲覧しているWebページのHTMLを読み込み「画像」として送信し、ホスト側で表示ができる機能となります。

案内したサイトの不明点をゲストと一緒に確認することで、スムーズなサポートが可能となります。

2．申請方法

スマホ画面サポート機能には以下の開始方法があり、それぞれで機能設定変更の申請をいただく必要があります。

  • ①：通常スマホ画面サポート
  • ②：bellFace起点スマホ画面サポート

ご利用をご希望の場合は『bellFaceの設定変更申請（機能制限／解除）』ページをご確認のうえ、弊社カスタマーサクセスチーム宛（cs@bell-face.com）までご連絡ください。

補足

※ 「bellFace起点スマホ画面サポート」の利用をご希望の場合、双方をONにする必要があります

3．初期設定

3-1．通常スマホ画面サポートの初期設定

3-1-1．基本設定

STEP 1：起動ボタンの設置

管理画面メニュー ＞ ［管理者メニュー］ ＞ ［スマホ画面サポート］にアクセスし、［起動ボタンのコードを取得する］をクリックしてください。

起動ボタン貼り付けコードの表示ウィンドウにて［ソースコードをコピー］をクリックし、対象ページにコピーしたソースコードの埋め込みをおこなってください。

STEP 2：JavaScriptコードの設置

［JavaScriptコードを生成する］をクリックしてください。

「送信ボタン」と「スナックバー」の表示位置を、「右上」「右下」「左上」「左下」の4パターンから選択することができます。

任意の表示位置を選択し、［表示位置を決定］をクリックします。

貼り付け対象となるJavaScriptのコードが表示されます。

［ソースコードをコピー］をクリックし、対象ページにコピーしたソースコードの埋め込みをおこなってください。

注意点

※ Webサイト・ページへのコード設置作業は、サポート対象外です

※ パスワード入力画面など、サポートに関係しない画面への貼り付けは避けてください

  • マスキングなどの対応をおこなっていない場合に、個人情報などもキャプチャされてしまう可能性があります。
  • 設置ページの内容にご注意の上、ご検討ください。

※ 冒頭でロードされる必要性がないため、埋め込み位置はbody の閉じタグ（ ）の直後が推奨となります

  • 他のスクリプト実行との優先度や兼ね合いで適宜ご判断ください。

※ JavaScriptコードが埋め込まれていないページでは、スマホ画面サポートはご利用いただけません

  • 例）「① JS があるページ → ② JS のないページ → ③ JS のあるページ」という操作を行った場合
  • ② の画面での撮影や画面送信はできません。
  • ②から③や①に遷移した場合、 ①と③のページで継続利用することは可能です。

※ スクリプトについては、Google Tag Managerでの設置を行うことが可能です

  • 設置を行う場合、document.writeの設定を有効化のうえ、ご対応ください

※ コード設置後は、必ず動作をご確認ください

3-1-2．詳細設定

起動ボタンの設置方法は以下です。

STEP1：起動ボタンの設置

以下、詳細設定用のサンプル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

※ サンプルではタグを使用していますが、タグや<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>

注意点

※ Webサイト・ページへのコード設置作業は、サポート対象外です

※ パスワード入力画面など、サポートに関係しない画面への貼り付けは避けてください

  • マスキングなどの対応をおこなっていない場合に、個人情報などもキャプチャされてしまう可能性があります。
  • 設置ページの内容にご注意の上、ご検討ください。

※ 冒頭でロードされる必要性がないため、埋め込み位置はbody の閉じタグ（ ）の直後が推奨となります

  • 他のスクリプト実行との優先度や兼ね合いで適宜ご判断ください。

※ JavaScriptコードが埋め込まれていないページでは、スマホ画面サポートはご利用いただけません

  • 例）「① JS があるページ → ② JS のないページ → ③ JS のあるページ」という操作を行った場合
  • ② の画面での撮影や画面送信はできません。
  • ②から③や①に遷移した場合、 ①と③のページで継続利用することは可能です。

※ スクリプトについては、Google Tag Managerでの設置を行うことが可能です

  • 設置を行う場合、document.writeの設定を有効化のうえ、ご対応ください

※ コード設置後は、必ず動作をご確認ください

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 通知スナックバーを閉じるボタンのスタイルを定義する

 

3-2．bellFace起点スマホ画面サポートの初期設定

3-2-1．基本設定

STEP 1：起動ボタンの設置

管理画面メニュー ＞ ［管理者メニュー］ ＞ ［スマホ画面サポート］にアクセスし、［起動ボタンのコードを取得する］をクリックしてください。

起動ボタン貼り付けコードの表示ウィンドウにて［ソースコードをコピー］をクリックし、対象ページにコピーしたソースコードの埋め込みをおこなってください。

STEP 2：JavaScriptコードの設置

手順2．

送信ボタン・スナックバーの表示位置ごとに初期設定用のサンプルJavaScriptコードになります。

いずれかのコードを選択し、管理画面上で取得した「サイトキー」を以下のソースコード内の 「サイトキー」 に代入のうえ対象ページに埋め込みをおこなってください。

▼送信ボタン左下

javascript
<script id="bf-script" src="https://static.bell-face.com/bellface-img-sharing-tag/bundle.js" data-client="サイトキー" data-option="ew0KICAiY29ubmVjdGlvbk1vZGUiOiAibnVtYmVyIiwNCiAgInBvc2l0aW9uIjoiYm90dG9tLWxlZnQiLA0KICAiZGVmYXVsdENTUyI6dHJ1ZQ0KfQ==" defer></script>

▼送信ボタン右下

javascript
<script id="bf-script" src="https://static.bell-face.com/bellface-img-sharing-tag/bundle.js" data-client="サイトキー" data-option="ew0KICAiY29ubmVjdGlvbk1vZGUiOiAibnVtYmVyIiwNCiAgInBvc2l0aW9uIjoiYm90dG9tLXJpZ2h0IiwNCiAgImRlZmF1bHRDU1MiOnRydWUNCn0=" defer></script>

▼ 送信ボタン左上

javascript
<script id="bf-script" src="https://static.bell-face.com/bellface-img-sharing-tag/bundle.js" data-client="サイトキー" data-option="ew0KICAiY29ubmVjdGlvbk1vZGUiOiAibnVtYmVyIiwNCiAgInBvc2l0aW9uIjoidG9wLWxlZnQiLA0KICAiZGVmYXVsdENTUyI6dHJ1ZQ0KfQ==" defer></script>

▼ 送信ボタン右上

javascript
<script id="bf-script" src="https://static.bell-face.com/bellface-img-sharing-tag/bundle.js" data-client="サイトキー" data-option="ew0KICAiY29ubmVjdGlvbk1vZGUiOiAibnVtYmVyIiwNCiAgInBvc2l0aW9uIjoidG9wLXJpZ2h0IiwNCiAgImRlZmF1bHRDU1MiOnRydWUNCn0=" defer></script>

注意点

※ Webサイト・ページへのコード設置作業は、サポート対象外です

※ パスワード入力画面など、サポートに関係しない画面への貼り付けは避けてください

  • マスキングなどの対応をおこなっていない場合に、個人情報などもキャプチャされてしまう可能性があります。
  • 設置ページの内容にご注意の上、ご検討ください。

※ 冒頭でロードされる必要性がないため、埋め込み位置はbody の閉じタグ（ ）の直後が推奨となります

  • 他のスクリプト実行との優先度や兼ね合いで適宜ご判断ください。

※ JavaScriptコードが埋め込まれていないページでは、スマホ画面サポートはご利用いただけません

  • 例）「① JS があるページ → ② JS のないページ → ③ JS のあるページ」という操作を行った場合
  • ② の画面での撮影や画面送信はできません。
  • ②から③や①に遷移した場合、 ①と③のページで継続利用することは可能です。

※ スクリプトについては、Google Tag Managerでの設置を行うことが可能です

  • 設置を行う場合、document.writeの設定を有効化のうえ、ご対応ください

※ コード設置後は、必ず動作をご確認ください

3-2-2．詳細設定

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

※ サンプルではタグを使用していますが、タグや<a>タグや<button>タグなども利用可能です。

STEP 2：JavaScriptコードの設置

手順1．

JavaScriptコード設置のためのサイトキーを取得します。

管理者ユーザーにて、管理画面メニュー ＞ ［管理者メニュー］ ＞ ［スマホ画面サポート］にアクセスし、詳細設定欄に記載のサイトキーをコピーし、Web担当者にご共有ください。

手順2．

以下、詳細設定用のサンプルJavaScriptコードになります。

管理画面上で取得した「サイトキー」を、以下のソースコード内の 「サイトキー」 に代入のうえ、対象ページに埋め込みをおこなってください。

JS
<script id="bf-script" src="https://static.bell-face.com/bellface-img-sharing-tag/bundle.js" data-client="サイトキー" data-option="eyAiY29ubmVjdGlvbk1vZGUiOiAibnVtYmVyIiwgImRlZmF1bHRDU1MiOiBmYWxzZSB9" defer></script>

注意点

※ Webサイト・ページへのコード設置作業は、サポート対象外です

※ パスワード入力画面など、サポートに関係しない画面への貼り付けは避けてください

  • マスキングなどの対応をおこなっていない場合に、個人情報などもキャプチャされてしまう可能性があります。
  • 設置ページの内容にご注意の上、ご検討ください。

※ 冒頭でロードされる必要性がないため、埋め込み位置はbody の閉じタグ（ ）の直後が推奨となります

  • 他のスクリプト実行との優先度や兼ね合いで適宜ご判断ください。

※ JavaScriptコードが埋め込まれていないページでは、スマホ画面サポートはご利用いただけません

  • 例）「① JS があるページ → ② JS のないページ → ③ JS のあるページ」という操作を行った場合
  • ② の画面での撮影や画面送信はできません。
  • ②から③や①に遷移した場合、 ①と③のページで継続利用することは可能です。

※ スクリプトについては、Google Tag Managerでの設置を行うことが可能です

  • 設置を行う場合、document.writeの設定を有効化のうえ、ご対応ください

※ コード設置後は、必ず動作をご確認ください

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 通知スナックバーを閉じるボタンのスタイルを定義する

4．スマホ画面サポート機能の詳細設定CSSサンプル

スマホ画面サポート機能の詳細設定CSSのサンプルは以下となります。

.bf-css-info-button {
  position: relative;
  width: 292px;
  height: 48px;
  margin: 0 auto;
  text-align: center;
  padding: 12px 12px 12px 24px;
  background: #ffffff;
  border: 2px solid #0065a9;
  box-sizing: border-box;
  border-radius: 300px;
  cursor: pointer;
  line-height: 20px;
}
.bf-css-info-button.bf-disabled {
  background: #bdbdbd;
  border: 2px solid #bdbdbd;
}
.bf-css-info-button.bf-disabled .bf-css-info-button-text {
  color: #fff;
}
.bf-css-info-button.bf-disabled
  .bf-css-info-button-text::before {
  background-image: url("https://static.bell-face.com/bellface-img-sharing-tag/action-button-disabled-icon.svg");
  left: 28px;
}
.bf-css-info-button-text {
  position: static;
  width: 230px;
  height: 16px;
  font-family: 'Hiragino Kaku Gothic Pro', Meiryo, sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 16px;
  letter-spacing: normal;
  font-feature-settings: "palt" on;
  color: #0065a9;
  margin: 0 4px 0 19px;
}
.bf-css-info-button-text::before {
  width: 20px;
  height: 18px;
  background-image: url("https://static.bell-face.com/bellface-img-sharing-tag/action-button-icon.svg");
  content: "";
  position: absolute;
  top: 13px;
  left: 20px;
}
.bf-css-info-button .bf-css-info-button-text::after {
  content: "スマホ画面サポートを利用する";
}
.bf-css-info-button.bf-disabled
  .bf-css-info-button-text::after {
  content: "スマホ画面サポート起動中...";
}
.bf-css-share-button {
  position: fixed;
  width: 56px;
  height: 56px;
  z-index: 1000;
  background: #0065a9 url("https://static.bell-face.com/bellface-img-sharing-tag/share-btn.svg") no-repeat 18px 12px;
  box-shadow: 0px 0px 13px -3px rgba(0, 0, 0, 0.7);
  border-radius: 1200px;
	bottom:16px;
	left:8px;
}
.bf-css-share-button.bf-disabled {
  opacity: 0.7;
	bottom:16px;
	left:8px;
}
.bf-css-snackbar-container {
  position: fixed;
  width: 295px;
  height: 50px;
  z-index: 1000;
	bottom:21px;
	left:72px;
}
.bf-css-snackbar {
  position: relative;
  width: inherit;
  height: inherit;
  border-radius: 4px;
  opacity: 0;
  position: absolute;
}
.bf-css-snackbar-slide {
  animation-name: snackbar-slidein-slideout;
  animation-duration: 5s;
}
.bf-css-snackbar-notification {
  background: #4caf50;
}
.bf-css-snackbar-error {
  background: #e98c00;
}
.bf-css-snackbar-icon,
.bf-css-snackbar-title,
.bf-css-snackbar-close {
  float: left;
}
.bf-css-snackbar-title {
  display: table;
  width: 235px;
  height: inherit;
  font-family: 'Hiragino Kaku Gothic Pro', Meiryo, sans-serif;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  margin: 0 auto;
  padding: 0;
}
.bf-css-snackbar-title > p {
  display: table-cell;
  vertical-align: middle;
}
.bf-css-snackbar-title > p > span {
  display: block;
  font-size: 10px;
  font-weight: 400;
}
.bf-css-snackbar-icon {
  width: 24px;
  height: inherit;
  padding-top: 13px;
  margin: 0 5px 0 8px;
}
.bf-css-snackbar-close {
  width: 16px;
  height: inherit;
  padding-top: 17px;
}
.bf-css-snackbar-close::after {
  clear: both;
}
@media screen and (max-width: 376px) {
 .bf-css-snackbar-container {
    width: calc(100% - 80px);
  }
.bf-css-snackbar {
    width: 100%;
  }
.bf-css-snackbar-title {
    width: calc(
      100% - (24px + 18px + 16px)
    );
  }
}
@keyframes snackbar-slidein-slideout {
  0% {
    opacity: 0;
    left: -70px;
  }
  20% {
    opacity: 1;
    left: 0;
  }
  50% {
    opacity: 1;
    left: 0;
  }
  75% {
    opacity: 1;
    left: 0;
  }
  100% {
    opacity: 0;
    left: -70px;
  }
}
役に立ちましたか？
サポートサイトトップへ戻る