Installation

installation

Note: Web push notifications require a secure connection

Your website needs a 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 free software which lets 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 a 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 a BrandFlow container

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

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

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

Because Web Push requires a HTTPS connection, we choose "HTTPS" and type the address of the website.

After this, click " save".

Then click on the button to activate the container.

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

Step 4 - Installing the BrandFlow script

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

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

The result should look 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 the code above directly to your project, because it doesn't contain a unique ID of your BrandFlow script. Use the code generated at 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 the line of code below in the BrandFlow script:


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

Then replace it with the following code:


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

When this is done, it should look like this:


<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 by using: 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 the "allow" button to confirm your subscription. We'll need it for the next lesson.

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


Rate this lesson

Previous lesson Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

User avatar
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, UI/UX designer, marketing analyst. Dancer & nerd.
Sign up to follow your progress and get additional benefits