background-hooknotifierbackground-hooknotifier
Last update: Feb 25, 20235 minutes read

Receive push notifications from Strapi

illuday

Emmanuel Russeil

February 25, 2023

In this article, we will see how to receive push notifications on our phone by going through Strapi's webhooks and coding for more precision.

Introduction

About Strapi

Strapi is the next-gen headless CMS, open-source, javascript, enabling content-rich experiences to be created, managed and exposed to any digital device.

Check Strapi official website

About Hook.Notifier

Hook.Notifier is a notification collector, it allows you to send, store and organize useful notifications on your phone from various services.

Check Hook.Notifier official website

The no-code way

hook notifier notification

Objective

We are going to realize a contact form system without e-mail. The goal will be to receive our contact requests directly on our phone. We consider in this tutorial that you already have Strapi configured to receive your contact form submissions.

Go to your Strapi administration interface. Here is the Contact entity that we created on our side. Of course, do what you want, ask for the information you need.

Our contact inputs
Our contact inputs

Then simply go to Settings > Webhooks in your Strapi backoffice.

  • Create a webhook, fill in the Name that suits you and in the Url field insert your HookNotifier url:

https://hooknotifier.com/api/notifications/%_YOUR_IDENTIFIER_%/%_YOUR_KEY_%?object=Someone%20contacted%20you&body=New%20contact%20from%20mywebsite.com

— Replace the parameters identifier & key by yours. You can of course add all the parameters you want to customize your notifications, see the HookNotifier documentation.

— Note that your parameters must be in an “url encoded” format to be functional, as in the example above. You can use this website to make your conversions.

  • Tick Create checkbox in front of Entry
  • Save

That’s all! You should receive a notification when a new entry is created. You can try now by creating an entry directly in your Strapi’s interface.

Our notification arrived
Our notification arrived

Strapi automatically inserts all the data from the entries inside the HookNotifier notifications. Click on your notification to see the content.

We got all our data by clicking on the notification
We got all our data by clicking on the notification

The just a bit of code way

The big concern with the above method is that we cannot distinguish the entities for which we want notifications, unfortunately Strapi’s webhooks are very rudimentary, which implies

 in the above example that we will receive notifications for all the entities created through our Strapi and not just the contacts.

With this method, we will not only be able to be more precise, but it will allow you to trigger any type of notification according to your needs.

Let’s include in our contact entity lifecycle a ping to HookNotifier to send a notification.

[[javascript]]
// /src/api/contact/content-types/contact/lifecycles.js

const axios = require('axios');

module.exports = {
  afterCreate(event) {
    const { params } = event;
    
    const hooknotifierIdentifier = ;
    const hooknotifierKey = ;
    
    // NOTE: You can use const { result } = event; here, but be careful to sanitize the output.
    axios.post(
      `https://hooknotifier.com/api/notifications/${hooknotifierIdentifier}/${hooknotifierKey}`, 
      params.data, 
      {
        params: {
          object: `${params.data.name} contacted you`,
          body: params.data.message,
        }
      }
    );
  },
};

You can note here that I have included variables in the notification parameters.

And we received our notification!
And we received our notification!

Of course, with this method, you can add calls anywhere in your Strapi API. Simple and efficient!


If you like this article, feel free to connect with us on Twitter.

If you have any questions or special requests, such as needing clarification on the terms discussed in this article, more information on a specific part, or additional articles and tutorials, please feel free to provide feedback through the widget below.

illuday

Emmanuel Russeil

February 25, 2023

What do you think of this article?

robot need an integration

You need an integration?

Let us know what you need, we will work to bring you a solution.

Fill our form

Related

get started with hook.notifier header

Get started with Hook.Notifier

This article aims to introduce you to Hook.Notifier, including its benefits, recommended introductory articles, and developer documentation.