In this post, we will dive into how you can create your own onboarding or pre-permission functionality, making sure it fits perfectly in your website's look and feel. Although this is something our SDK offers with minimal configuration, as described in this post, sometimes you simply want to customize how you prompt the browser's native permission dialogue and increase the likelihood of a successfully opt-in.
This is an important step. Being able to allow users to get acquainted with your website and what they can benefit from web push notifications before prompting the browser's native permission dialogue is, by far, the decisive factor between acquiring a new subscriber or getting blocked altogether. For some browsers, it is even a mandatory step as prompting the browser's native permission dialogue without any user interaction is not allowed.
Before we jump into actual code examples, it is important to mention, once again, that our SDK already offers a couple of built-in features that use this technique and will allow you to provide your users a better opt-in experience without any web development.
Let's customize!
For those of you that want to provide a customized experience fully blended into your website's design while conveying context and functionality that better match your needs, this post is for you. Notificare's Web SDK provides a powerful, yet easy-to-use API, that will provide all you need to customize your website's push notifications onboarding.
If you've already followed our setup guides, the very first step you must take into account, is to initialize our library. This will contain all the information necessary to configure our SDK for push notifications and connect it with our platform.
It will look more or less like this:
document.addEventListener("DOMContentLoaded", () => {
const notificare = new Notificare();
});In some cases, if you don't want to use a standalone configuration file, this method will also you to pass along these options:
document.addEventListener("DOMContentLoaded", () => {
const notificare = new Notificare({
"appHost": "YOUR_DOMAIN_HERE",
"appVersion": "1.0",
"appKey": "YOUR_APP_KEY_HERE",
"appSecret": "YOUR_APP_SECRET_HERE",
"ignoreNonWebPushDevices": true,
"allowOnlyWebPushSupportedDevices": true,
"serviceWorker": "sw.js",
"googleMapsAPIKey": "PUT_GMAPS_KEY_HERE",
"geolocationOptions": {
"timeout": 60000,
"enableHighAccuracy": true,
"maximumAge": 100000
}
});Whatever you pick, at this point, you are ready to use our library whenever you see fit.
The constant notificare is all you need to further interact with it. Therefore the very first thing after initialization, is to actually launch it:
document.addEventListener("DOMContentLoaded", () => {
const notificare = new Notificare();
notificare.launch();
});
This will ensure that everything our library needs is launched and configured before you can actually tap into its functionality. There is the possibility that this step fails because your configuration file doesn't contain all the required properties or they are not correct. To ensure you can proceed and start tapping into all this functionality, you will need to wait for the confirmation that everything is correctly launched. This is done by implementing the following callback:
document.addEventListener("DOMContentLoaded", () => {
const notificare = new Notificare();
notificare.launch();
notificare.onReady = (application) => {
/// It's ready!
}
});
If the onReady callback method is triggered, you can expect that our library is now ready to be used.
It is now time to decide what kind of experience you will provide. There are several common patterns widely used by websites:
Banner
Modal
Sticky header
Sliding box
Bell button
Timing is also important; maybe you want to wait for the user to visit couple of pages before introducing this feature. Or perhaps you will only do this after users log in or even only when the feature is required, like after the user expressed the willingness to be alerted after a purchase.
Whatever you choose to do, it will most likely mean you will implement some markup containing a button which will trigger the functionality, as follows:
<div id="banner">
<h2>Notifications</h2>
<p>Would you like to receive notifications?</p>
<button id="btnAccept" type="button">Yes</button>
</div>In this case, you will use our library to handle the click on that button and trigger the browser's native permission dialogue. Let's take a look at how to do that:
document.addEventListener("DOMContentLoaded", () => {
let button = document.getElementById("btnAccept");
const notificare = new Notificare();
notificare.launch();
notificare.onReady = (application) => {
if (notificare.isWebPushEnabled()) {
//Remote notification are enabled already, proceed
notificare.registerForNotifications();
} else {
//Handle the button's click
button.addEventListener('click', () => {
notificare.registerForNotifications();
});
}
}
});
Let's break it down and explain what is going on. As you can see, you will first select the button in your markup:
let button = document.getElementById("btnAccept");
This will allow you to later listen to the button click event. Then you'll place the notificare.registerForNotifications() inside the onReady callback event.
After all, you will only want to handle this after our library is ready.
There are 2 different scenarios, we are handling here tho. Because push tokens might change for many reasons, you will always need to register browsers for push notifications, in order to handle that scenario, you must do the following:
if (notificare.isWebPushEnabled()) {
//Remote notification are enabled already, proceed
notificare.registerForNotifications();
}
In this bit of code, you'll handle just that. You'll check if the user has already enabled notifications and proceed to register them for notifications. If their token changes, we will automatically update it.
On the other hand, if they did not grant permission for push notifications, you will simply listen to the click in the button and only register them for notifications when they do click that button:
button.addEventListener('click', () => {
notificare.registerForNotifications();
});
Obviously, when this happens, the browser's native permission dialogue will be triggered, and if they grant access to it, we will automatically handle the registration.
And that's basically it! By using this bit of code, you are able to create your own onboarding flow or design any type of customized experience to acquire and manage web push subscribers.
Ready to try it yourself?
Web push notifications are a great way of bringing visitors back to your website. When done right, they can provide valuable interactions and convenience for your customers. It is also a channel that you no longer can ignore. Very soon, Apple is joining the game, and will be introducing web push notifications in iOS somewhere in 2023, enabling this functionality for almost a billion iPhone users.
If you would like to see all this in action, don't hesitate and create a demo app today. As always, we are available via our Support Channel for any questions you might have.