Installation


Note: Web push require secure connection

Your website needs HTTPS (SSL / secure) connection to use Web Push notifications. Otherwise, it will not work.


To install web push notifications you need to follow 5 simple steps:

Step 1 - BrandFlow account

BrandFlow is a free software which let you manage your web push notifications

Go to BrandFlow.net/app/ and create a free account.

You can sign up by using your Google account or by regular email registration.


Step 2 - Web push installation

You have to put the file brandflow-push-sw.js into the ftp root directory of your website.

Click the button below to download brandflow-push-sw.js file

Download

Then unzip it and place it in the root directory of your website:

Step 3 - Creating BrandFlow container

To create our first push notifications we have to first activate and install BrandFlow script in out project. That means we need to create a container.

This process is very similar to Google Analytics or Google Tag manager installation.

Go to brandflow.net/app/containers and click button .

Because Web Push requre HTTPS connections, we choose " HTTPS" and type the address of the website.

After all, click " save".

Then click on button to activate the container.

The last thing we have to do is refreshing the website and clicking on Publish Changes button in the top right corner.

Step 4 - Installing BrandFlow script

Go to brandflow.net/app/brandflow-script and copy generated BrandFlow script.

Then place BrandFlow script in the head section of your project.

At the end it should looks like this:


<!-- BrandFlow script -->
<script>
    (function () {

        var scripts = ["/static/general/bf-core.js", "/static/containers/yourUniqueID.js"];
        for (var i = 0; i < scripts.length; i++) {
            var script = document.createElement("script");
            script.src = "//test.brandflow.net" + scripts[i] + "?ts=" + Date.now() + "#";
            script.async = false;
            document.head.appendChild(script);
        }
    })();
</script>
<!-- BrandFlow script  -->
                                                            

Important - container ID

Do not copy directly the code above to your project, because it doesn't contain a unique ID of your BrandFlow script. Use the code generated in brandflow.net/app/brandflow-script.

Step 5 - Enabling web push

To enable web push notifications we have to make a small modification within the BrandFlow script.

In your project, find that line of code in the BrandFlow script:


var scripts = ["/static/general/bf-core.js", "/static/containers/yourUniqueID.js"];
              

Then replace it with the following:


var scripts = ["/static/general/bf-core.min.js", "/static/containers/yourUniqueID.js", "/static/general/push-init-code.js"]
              

At the end it should look like that:


<script>
  (function(){

    var scripts = ["/static/general/bf-core.min.js", "/static/containers/yourUniqueID.js", "/static/general/push-init-code.js"]
    for(var i = 0; i < scripts.length; i++) {
        var script   = document.createElement("script");
        script.src   = "//brandflow.net" + scripts[i] + "?ts=" + Date.now() + "#";
        script.async = false;
        document.head.appendChild(script);
    }
})();
</script>
              

Remember

Do not copy directly the code above to your project, because it doesn't contain a unique ID of your BrandFlow script. You have to replace the element yourUniqueID with your unique ID generated in: brandflow.net/app/brandflow-script.

Step 6 - Test

After saving the file and placing it in the root folder of your project, open the website in the browser.

If you see an alert with the subscription question - that means everything works as expected. Well done!

In the alert pop-up click "allow" button to confirm subscription. We'll need it in the next lesson.

Proceed to the next lesson to create and send your first web push notifications.


Previous post Next post

Spreed the word: Add comment
About author
Author avatar
Michal Szymanski

Co-founder of MDBootstrap and BrandFlow. Entrepreneur, web developer, UI / UX designer, marketer. Dancer and nerd at the same time.

Leave a reply

Sign up to follow your progress and get additional benefits