Integrate Webpush Notifications

Steps

Add Your Website
- Navigate to the settings section in the Marketing Engine and add your website.
Request Web Push Activation
- Reach out to the Marketing Engine support team at me-support@satisfilabs.com to enable web push notifications for your website.
Receive Website Credentials
- Once web push is enabled, the support team will provide you with a unique website ID and domain.
Update Your Website
- Use the provided website ID and domain to add the required scripts to the <head> section of your website’s index.html file.

<!-- 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}';
  // Sample: _at.domain = 'combifam.com' (for regular websites) or 
  // 'combifam.myshopify.com' (for Shopify website)
  _at.idSite = '{Website_id}';
  // Sample: 514cc670-a384-11ed-87ce-41eeaf703333
  (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 customized push notifications.

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

Last updated 15 hours ago

<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>   <script type="text/javascript" async> var _at = {}; var u = "https://webpush-fat-globalcdn.s3.us-west-2.amazonaws.com/"; _at.domain = '{Domain}'; // Sample: _at.domain = 'combifam.com' (for regular websites) or // 'combifam.myshopify.com' (for Shopify website) _at.idSite = '{Website_id}'; // Sample: 514cc670-a384-11ed-87ce-41eeaf703333 (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>

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