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 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.
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
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:
Or you can use a shortcode if you prefer:
The plugin also includes a Wordpress widget. Open Wordpress and click Appearance, Widgets and add the Pushpad button to your sidebar.
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.