How to integrate webpush notification

  • Add your website in settings.
  • Contact Support for enabling web-push for your website.
  • Once done support team will share the website ID and the domain using which you need to add the below scripts to the head of your website’s `index.html`.

<!-- Start FTreal -->
<script type="application/javascript" async>
(function () {
let a = document.createElement("script");
let m = document.getElementsByTagName("script")[0];
a.async = true;
a.src = "https://s3.us-west-2.amazonaws.com/g1-tracker.factoreal.com/ftreal.min.js";
a.onload = function () {
let ftreal = (window.ftreal = window.ftreal || {});
ftreal.init("{Website_id}", true);
};
m.parentNode?.insertBefore(a, m);
})();
</script>
<!-- End FTreal -->
<!-- Start WebPush -->
<script type="text/javascript" async>
var _at = {};
var u = "https://webpush-fat-globalcdn.s3.us-west-2.amazonaws.com/";
_at.domain = '{Domain}';
_at.idSite = '{Website_id}';
_at.promptOnLoad = true; // Optional. If set to false the Notification Permission prompt will shown.
(function () {
var d = document,
g = d.createElement("script"),
s = d.getElementsByTagName("script")[0];
g.type = "text/javascript";
g.async = true;
g.src = u + "fsw.min.js";
s.parentNode.insertBefore(g, s);
})();
</script>
<!-- End WebPush -->

  • Add a new file named `sw-factoreal.js` in the same folder as `index.html` with the below mentioned content.

importScripts("https://webpush-fat-globalcdn.s3.us-west-2.amazonaws.com/sw-factoreal.js");

  • To send webpush to contacts, you have to pass the user’s email/phone number when they login to your site.
  • This will help in creating audiences and sending customised push notifications.

<script>
async function oauthCallback(user) {
// handle login...
if (user.email) {
await window.ftrealWP?.setUserId(user.email);
} else if (user.phone) {
// phone number should be in E.164 format
// https://www.twilio.com/docs/glossary/what-e164
await window.ftrealWP?.setUserId(user.phone);
}
}
</script>

  • If you have set `_at.promptOnLoad = false;`, then you can use `await window.ftrealWP?.requestPermission()` to
    create notification permission prompt when the customer has agreed to receive notifications on a confirmation
    prompt. This is consider a good practice, read more about it
    here.

<script>
async function formSubmission(formData) {
// handle formData processing...
if (formData.notificationConsent === 'granted'){
try {
await window.ftrealWP?.requestPermission()
} catch (e){
// handle errors.
}
}
// handle formData submissions
// any page navigation should be done
// after the window.ftrealWP?.requestPermission() is resolved.
}
</script>

What are your Feelings