How to add web push notifications to Wordpress

You can add push notifications to your website or blog using the Pushpad plugin or you can install Pushpad from scratch. This guide show you how to install the Pushpad plugin, collect subscribers and send web push notifications from your website.

Creating a new project

First of all you need to sign up to Pushpad and create a new project for your website.

Installing the plugin

From the Wordpress dashboard, click Plugins, Add new, search Pushpad and click Install now.

Configuring the plugin

Activate the plugin and then click Settings, Pushpad in the admin navigation to configure the plugin.

You need to add the following information:

• Auth Token: an access token that allows the plugin to interact with your account. In order to generate it, go to your Pushpad account, click Access tokens and create a new token.
• Project ID: the ID of your Pushpad project. You can find it in the project settings from the Pushpad dashboard.

Collecting subscriptions

The plugin adds the Pushpad widget to your website.

The widget offers multiple ways to collect subscribers:

• prompt: a custom prompt that asks users to subscribe to notifications
• bell: a floating action button that allows users to subscribe to notifications
• button: a customizable button that can be placed anywhere on your website to allow users to subscribe or unsubscribe from notifications

The prompt and bell are enabled by default, but you can turn them off from the Pushpad dashboard if you want.

If you want to display the button, you can simply add this markup to your page:

<div id="pushpad-subscribe"></div>

Or you can use a shortcode if you prefer:

[pushpad-button]

The plugin also includes a Wordpress widget. Open Wordpress and click Appearance, Widgets and add the Pushpad button to your sidebar.

Widget configuration

You can configure the appearance and behavior of the Pushpad widget from the Pushpad dashboard. Login to Pushpad, open your project, click Settings and then Widget settings. There are tens of options available to adapt the widget to your needs.

Sending web push notifications

When you create a post on Wordpress, there is a Pushpad section in the sidebar: select Send push notifications in order to send the notifications automatically when the post is published.

You can also use the Pushpad dashboard to send notifications at any time.