ユーザーにWebプッシュ通知を購読してもらうためには、そのためのオプションを表示する必要があります。PUSHCODEの購読プロンプトは簡単にカスタマイズできるので、ユーザーエクスペリエンスに合わせて調整することができます。
Webプッシュ通知の承認を得るためのベストプラクティスは、時代とともに進化しています。ブラウザーは、ユーザーがウェブサイトに入ったときにすぐにブラウザーの承認ポップアップを表示することを推奨していません。あなたのウェブサイトが何を提供しているのか、ユーザーに理解する機会を提供した後に承認を求める方が、より良いユーザーエクスペリエンスとなります。この推奨フローは「静かな通知許可UI」と呼ばれており、詳しくはこちらをご覧ください。
ユーザーにWebプッシュ通知を購読してもらうためのさまざまなオプションについては、以下を参照してください。
「PUSHCODEが用意した通知許可ダイアログを使う」オプションに含まれるJavaScriptタグは、以下に示すようなデフォルトのフローティングプロンプトを表示します。
「許可する」ボタンをクリックすると、ブラウザの購読プロンプトが表示されます。
「許可しない」をクリックすると、ユーザーは通知を購読せずにフローティングプロンプトを閉じ、「pushcode_subscribed = -1」という名前付きの変数がブラウザのlocalStorageに保存されます。このフローティングプロンプトを再びユーザーに表示したい場合は、ブラウザのlocalStorageからこの変数をプログラムで削除する必要があります。
フローティングプロンプトのスタイルをカスタマイズするには、以下に示すデフォルトのCSSを変更して、ウェブサイトにペーストします。
pushcode-subscribe-dialog{
/*--- ダイアログデザイン ---*/
/* width */
--dialog-width: 340px;
/* background */
--dialog-background: #fff;
/* border */
--dialog-border: 1px solid #eee;
/*--- メッセージテキストデザイン ---*/
/* text-align */
--dialog-message-text-align: left;
/* color */
--dialog-message-color: #606266;
/* font-size */
--dialog-message-font-size: 16px;
/* font-family */
--dialog-message-font-family: initial;
/*--- ボタン位置 ---*/
/* justify-content */
--dialog-buttons-justify-content: flex-end;
/*--- ボタン共通デザイン ---*/
/* width */
--dialog-button-width: auto;
/* font-size */
--dialog-button-font-size: 14px;
/* font-family */
--dialog-button-font-family: initial;
/*--- 通知ONボタンデザイン ---*/
/* color */
--dialog-accept-color: #fff;
/* background */
--dialog-accept-background: #409eff;
/* border */
--dialog-accept-border: 1px solid #409eff;
/*--- 通知ONボタンデザイン hover時 ---*/
/* color */
--dialog-accept-hover-color: #fff;
/* background */
--dialog-accept-hover-background: #1989fa;
/* border */
--dialog-accept-hover-border: 1px solid #1989fa;
/*--- 通知OFFボタンデザイン ---*/
/* color */
--dialog-deny-color: #409eff;
/* background */
--dialog-deny-background: transparent;
/* border */
--dialog-deny-border: 1px solid transparent;
/*--- 通知OFFボタンデザイン hover時 ---*/
/* color */
--dialog-deny-hover-color: #606266;
/* background */
--dialog-deny-hover-background: #dcdfe6;
/* border */
--dialog-deny-hover-border: 1px solid #dcdfe6;
/*--- 閉じるボタンデザイン ---*/
/* color */
--dialog-close-color: #909399;
}
JavaScriptタグのオプションを使って、設定を変更することができます。これらのオプションは、以下のようにopenSubscribeDialog関数に渡すことで利用できます。
PushCode.components.openSubscribeDialog({
position: "top-left",
message: "サイトから有益な情報をお知らせします。",
label: {
accept: "許可する",
deny: "許可しない"
},
buttonsOrder: "deny-accept",
grayOut: {
use: true,
background: "rgba(50,50,50,.2)"
}
});
PUSHCODEでは、フローティングプロンプトの代わりに、ユーザーの購読状態によって動的に変化するトグルボタンを用意しています。ユーザーがすでに購読している場合は「購読をキャンセル」するボタン、まだ購読していない場合は「購読を承認」するボタンを表示します。
ユーザーがまだ購読していない場合に表示されるボタン
ユーザーが既に購読している場合に表示されるボタン
サイト設定ページの「サイト側が独自で用意した通知許可ボタンを使う」オプションに表示されているJavaScriptタグを追加した後、ボタンを表示したい場所に以下のHTMLタグを配置します。以下のサンプルに設定されているテキストは、任意のものに編集してください。
<pushcode-subscribe-toggle-button
subscribe-label="サイトから有益な情報をお届けします"
unsubscribe-label="通知をOFFにする"
blocked-label="通知をブロックしています">
</pushcode-subscribe-toggle-button>
トグルボタンのスタイルをカスタマイズするには、以下に示すデフォルトのCSSを変更して、自分のウェブサイトにコピーします。
pushcode-subscribe-toggle-button {
/*--- ボタン共通デザイン ---*/
/* width */
--toggle-btn-width: auto;
/* height */
--toggle-btn-height: auto;
/* font-family */
--toggle-btn-font-family: initial;
/* font-size */
--toggle-btn-font-size: initial;
/*--- 通知ONボタンデザイン ---*/
/* color */
--subscribe-btn-color: #fff;
/* background */
--subscribe-btn-background: #e57373;
/* border */
--subscribe-btn-border: 1px solid #e57373;
/*--- 通知ONボタンデザイン hover時 ---*/
/* color */
--subscribe-btn-hover-color: #fff;
/* background */
--subscribe-btn-hover-background: #bf6060;
/* border */
--subscribe-btn-hover-border: 1px solid #bf6060;
/*--- 通知OFFボタンデザイン ---*/
/* color */
--unsubscribe-btn-color: #e57373;
/* background */
--unsubscribe-btn-background: #fff;
/* border */
--unsubscribe-btn-border: 1px solid #e57373;
/*--- 通知OFFボタンデザイン hover時 ---*/
/* color */
--unsubscribe-btn-hover-color: #bf6060;
/* background */
--unsubscribe-btn-hover-background: #fff;
/* border */
--unsubscribe-btn-hover-border: 1px solid #bf6060;
/*--- ブロック時のボタンデザイン ---*/
/* color */
--disabled-btn-color: #606266;
/* background */
--disabled-btn-background: #eee;
/* border */
--disabled-btn-border: 1px solid #aaa;
}