Web Plugin

The web plugin is a small script that can be embedded to your website and serves the following purposes:

1. Handle web push messages with a service worker.
2. Provide a UI to show notifications and make basic settings.
3. Provide a UI to subscribe to individual topics.

How to integrate it

Step 1: Reference the Script

To integrate the SDK you need to reference the javascript file.

Add the following snippet to your html file:

<script src="https://app.notifo.io/notifo-sdk.js"></script>
<script>
    var notifo = window['notifo'] || (window['notifo'] = [])
    // YOUR CODE here.
</script>

Step 2: Call Init

The next step is to initialize the SDK. Usually the following code is enough:

<script<script>
    var notifo = notifo || [];
    // YOUR CODE here.
    notifo.push(['init', {
        userToken: 'YOUR_USER_API_KEY'
    });
</script>

Each user has its own API Key to ensure that a user can only access its own messages. You can find the API Key in the user details page.

You can also configure a wide range of other settings, that are usually not needed:

https://github.com/notifo-io/notifo/blob/main/frontend/src/sdk/shared/config.ts#L316

Alternatively you can also define the apiKey property. Then an new user will be created automatically. Use the WebManager API Key for that:

Step 3: Subscribe to web push

Just use the following snippet:

<script>
    notifo.push(['subscribe']);
</script>

Step 4: Show the widget button

The default widget shows notification and provides a tab for basic settings.

You can show the widget with the following code:

<div id="notifo-button"></div>
<script>
    notifo.push(['show-notifications', 'notifo-button', { style: 'notifo' }]);
</script>

With the settings you can define the style of the icon and the placement of the modal:

• style: The style of the button. Allowed values: 'message', 'chat', 'chat_filled', 'notifo'
• position: The positioning of the modal. Allowed values: 'bottom-left', 'bottom-right'

https://github.com/notifo-io/notifo/blob/main/frontend/src/sdk/shared/config.ts#L397

Step 5: Show the topic button

This widget can be used to let the user subscribe to a topic:

You can show the widget with the following code:

<div id="topic-button"></div>
<script>
    notifo.push(['show-topic', 'topic-button', 'news/general', { style: 'heart' }]);
</script>

The second parameter is the path of the topic, here news/general

With the settings you can define the style of the icon and the placement of the modal:

• style: The style of the button. Allowed values: 'star', 'heart', 'bell', 'alarm'
• position: The positioning of the modal. Allowed values: 'bottom-left', 'bottom-right'

https://github.com/notifo-io/notifo/blob/main/frontend/src/sdk/shared/config.ts#L389

Combined

Everything together

<script src="https://app.notifo.io/notifo-sdk.js"></script>
<script<script>
    var notifo = window['notifo'] || (window['notifo'] = [])
    notifo.push(['init', {
        userToken: 'YOUR_USER_API_KEY'
    });
    notifo.push(['subscribe']);
</script>

<div id="notifo-button"></div>
<script>
    notifo.push(['show-notifications', 'notifo-button', { style: 'notifo' }]);
</script>

<div id="topic-button"></div>
<script>
    notifo.push(['show-topic', 'topic-button', 'news/general', { style: 'heart' }]);
</script>