If you've completed the steps described in the Setup guides, you are now ready to implement our HTML 5 library in your WordPress website. Our library supports Chrome 59 and higher (desktop) and Chrome 61 (Android) and higher, Opera 47 (desktop & Android) and higher, Firefox 54 (desktop & Android) and higher and Safari on MacOS 10.9 and higher.

If you are upgrading from an older version of our library, it's always a good idea to read our Upgrade file.

WordPress Plugin

Our WordPress plugin is published in the WordPress plugin directory and can be found here. You can install it via the admin interface of your WordPress website. If you have access to it proceed to the next section to install our plugin.

Installing the Plugin

In WordPress, if you have an administrative role, you can quickly add new plugins to your WordPress website via the Plugins area in your admin navigation. Select Plugins > Add New and search for the Notificare plugin. Once found, it should look like this:

install v2 plugin

Then go ahead and select Activate and wait for the plugin to be fully installed before proceeding to the configuration step below.


Once installed, you will have to provide some configuration settings for our plugin. Go ahead and select Settings > Notificare from you admin navigation menu:

wordpress notificare settings

That will show the Notificare Settings page:

notificare settings header

Then you start by given a name to your website:

notificare settings app name

After that make sure you provide the host name (must be the same host as your WordPress website):

notificare settings app host

You should also add a version of your website, we will use this when registering a token for your visitors. Adding a version will allow you to later target different versions of your website if needed:

notificare settings app version

If you wish to use play sounds when a notification is received, you should provide the path to the folder where those .mp3 files are located. You can then use those when sending remote notifications:

notificare settings sounds

Then you should provide the Application Keys for the Notificare app you've previously created (as described here) and grab the Application Key and Application Secret:

notificare settings app keys

This file will be included automatically when installing the plugin in /public/js/push-worker.js so if you change its location you should provide the new path in the Service Worker File field. The Service Worker Scope will determine which subset of your content the service worker should control. Usually if you would like to gove the service worker access to all your website, you should provide / as the value of this field:

notificare settings service worker v2

If your website does not contain a manifest.json file yet, you can use the option below to add one:

notificare settings manifest

Make sure you add the gcm_sender_id which you generated previously as described in the Setup guides.

fcm cloud messaging keys

If you already have one, then you should add the the Sender ID in the gcm_sender_id property of your manifest.json file:

    "name": "Your Website Name",
    "short_name": "Your Website Short Name",
    "display": "standalone",
    "gcm_sender_id": "SENDER_ID_HERE",
    "gcm_user_visible_only": true

If you intend to use the geo-location capabilities of our plugin you will need to provide us a valid Google Maps server key. We will use this key to perform geo-queries required to make location based messages work:

notificare settings gmaps key

Finally you can also tweak the geo-location settings in the fields below:

notificare settings geolocation

Initializing the Plugin

Now let's initialize the plugin, in your web pages make sure you add a javascript snippet like this, just before the closing body element:

    document.addEventListener("DOMContentLoaded", () => {

        //This instantiates the library
        const notificare = new Notificare();

        ... more code
Please note that our examples use Javascript's ES6 syntax. This is not supported by all browsers. If you are targeting older browsers (specially Internet Explorer) you will want to use the ES 5th Edition syntax to make sure this code does not generate errors.

After this point, you have instantiated the Notificare library and consequently you can use the notificare instance to further interact with the library. Keep reading our Implementation guides to dive deeper into all the features included in this library.