Product
Docs
Resources
Log In

Sign Up

How-To Set Up Multi-Channel WordPress Notifications

WordPress is a well-known, PHP-based, free content management system (CMS) that is recognized as one of the most effective website builders currently available. According to W3Techs' usage statistics, WordPress powers 43 percent of all websites. WordPress is also a highly flexible CMS designed for both large and small websites and adaptable to a wide range of uses, including websites for blogging, e-commerce, business, membership, e-learning, and so on.

Some types of WordPress websites inevitably have to send notifications to their users. For example, a business owner might want to send separate notifications to existing and inactive users, or a tutor might want to send regular notifications to all registered students.

This article provides step-by-step instructions on implementing email, SMS, WhatsApp, and browser notifications on your WordPress site.

Prerequisites

To get started with this guide, you need to have:

  • Installed a recent stable version of PHP (7.2 or higher)
  • An active and functional WordPress site on a live server or your local machine
  • A Courier account with an active API key

Email Notifications Guide

The following section demonstrates how to implement email notifications on your WordPress site using Courier.

Step 1: Integrate with Your Preferred Courier Email Provider

Log in to your Courier account, go to the Channels dashboard, and integrate with your preferred email provider from the list of available providers (for example, Mailgun, Gmail, or Sendgrid). You can also integrate multiple email providers.

This email notifications tutorial uses the Gmail provider. Click the Gmail button to integrate with it:

WordPress Email Notification

Click the Sign in with Google button at the bottom left of the Live Environment Configuration section. Once you select your Google account, you'll see a dialog asking you to grant Courier permission to access your Google account. Ensure that the box for Send email on your behalf is checked:

WordPress Gmail Notification

Add a From Name to the Live Environment Configuration section, then scroll down and click the Save button.

Step 2: Create an Email Notification

Go to the Notifications dashboard by clicking Designer in the left-hand navigation.

Create a new notification and select the Email notification channel with the configured provider:

WordPress Push Notification via Email

You can change the notification channel and connect to any other desired email providers by hovering over Email in the list of channels on the left side of the page and clicking the gear icon for Channel Settings. Click the Email channel itself to customize the notification message:

WordPress Gmail Notification Provider

Now, click the Settings icon in the top right of your Courier dashboard, go to Events, and create a new event. Connect the event to any of your created email notifications, then click Save:

WordPress Push Notification Event

Step 3: Send the Email Notification

Find the code block for the part of your WordPress site where you want to add the email notification. It could be after a successful payment or after a successful membership renewal.

Write the Send API snippet below into your code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <?php $client = new Client(); $headers = [ 'Accept' => 'application/json', 'Authorization' => 'Bearer {{API_KEY}}', 'Content-Type' => 'application/json' ]; $body = '{ "message": { "to": { "email": "{{EMAIL}}" }, "template": "{{EVENT_NAME}}", "routing": { "method": "single", "channels": [ "email" ] } } }'; $request = new Request('POST', 'https://api.courier.com/send', $headers, $body); $res = $client->sendAsync($request)->wait(); $resBody = $res->getBody();

In the above code:

  • API_KEY is either your Courier test or live key, eg, pk_test_HET164R23K2MENQC1W4Y5AERZ5.
  • EVENT_NAME is the event's name created in the second step of the email notification tutorial, eg, Demo.
  • EMAIL is the recipient's email address, eg, johndoe@gmail.com.

Once the code snippet above is executed, the notification attached to the event name will be sent to the recipient's email address.

SMS Notifications Guide

This section demonstrates how to implement SMS notifications on your WordPress site using Courier.

Step 1: Integrate with Your Preferred Courier SMS Provider

Log in to your Courier account, go to the Channels dashboard, and integrate with your preferred SMS provider from the list of providers available (for example, Twilio, MessageBird, or Africa's Talking SMS). You can also integrate multiple SMS providers.

This SMS notifications tutorial uses the Twilio provider. Click the Twilio button to integrate with it:

WordPress Twilio Integration

Register a Twilio account or log in to get your account SID, auth token, and messaging service SID. For more clarification on how to get your Twilio IDs, watch this short video. Then, fill out the fields below in Courier:

WordPress Twilio Setup

Ensure that your Twilio messaging service SID has one or more sender numbers. Follow this link to learn how to buy a Twilio phone number.

Step 2: Create an SMS Notification

Go to the Notifications dashboard by clicking Designer in the left-hand navigation.

Create a new notification and select the SMS notification channel with the configured provider:

WordPress Create SMS Notification

You can change the notification channel and connect to any other desired SMS providers by hovering over SMS in the list of channels on the left side of the page and clicking the gear icon for Channel Settings. Click the SMS channel itself to customize the notification message:

WordPress Create New SMS Notification

Create a new event under Settings > Events, then connect the event to any of your created SMS notifications and click Save:

WordPress SMS Notification Event

Step 3: Send the SMS Notification

Find the code block for the part of your WordPress site where you want to add the SMS notification. It could be after a successful sign-up or after a successful order purchase.

Write the Send API snippet below into your code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <?php $client = new Client(); $headers = [ 'Accept' => 'application/json', 'Authorization' => 'Bearer {{API_KEY}}', 'Content-Type' => 'application/json' ]; $body = '{ "message": { "routing": { "method": "single", "channels": [ "sms" ] }, "to": { "phone_number": "{{PHONE_NUMBER}}" }, "template": "{{EVENT_NAME}}" } }'; $request = new Request('POST', 'https://api.courier.com/send', $headers, $body); $res = $client->sendAsync($request)->wait(); $resBody = $res->getBody();

In the above code:

  • API_KEY is either your Courier test or live key, eg, pk_test_HET164R23K2MENQC1W4Y5AERZ5.
  • EVENT_NAME is the event's name created in the second step of the SMS notification tutorial, eg, Demo_2.
  • PHONE_NUMBER is the recipient's phone number, which must include the country code.

The sample code snippet above sends an SMS notification. Once it's executed, the notification attached to the event name will be sent to the recipient's phone number.

WhatsApp Notifications Guide

This section demonstrates how to implement WhatsApp notifications on your WordPress site using Courier.

Step 1: Integrate with Your Preferred Courier Chat Provider

This tutorial uses WhatsApp, though you can integrate with one or more of your preferred chat providers. Log in to your Courier account, go to the Channels dashboard, and click the WhatsApp button to integrate with the WhatsApp chat provider:

WordPress WhatsApp Notification Integration

To use the WhatsApp provider, you need an active Twilio account that's enabled for WhatsApp. Copy your Twilio account SID and auth token as well as the WhatsApp number connected to Twilio. You can learn more about setting up the Twilio API for WhatsApp here.

In Courier, paste the retrieved values into the appropriate input fields and click the Install Provider button at the bottom of the page:

WordPress WhatsApp Setup

Step 2: Create a WhatsApp Notification

Go to the Notifications dashboard by clicking Designer in the left-hand navigation.

Create a new notification and select the Chat notification channel with the configured provider:

WordPress Chat Notification

As before, you can click the channel on the left side of the page to customize the notification message:

WordPress Customize WhatsApp Notification

You can also connect to your desired chat providers by accessing Channel Settings like you did for the other notification types. If it's not already selected, make sure to add the WhatsApp provider.

Create a new event under Settings > Events, then connect the event to any of your created chat notifications and click Save:

WordPress Chat Notification Event

Step 3: Send the WhatsApp Notification

Find the code block for the part of your WordPress site where you want to add the WhatsApp notification. It could be after a successful order purchase or after a new membership renewal.

Write the Send API snippet below into your code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <?php $client = new Client(); $headers = [ 'Accept' => 'application/json', 'Authorization' => 'Bearer {{API_KEY}}', 'Content-Type' => 'application/json' ]; $body = '{ "message": { "routing": { "method": "single", "channels": [ "direct_message" ] }, "to": { "phone_number": "{{PHONE_NUMBER}}" }, "template": "{{EVENT_NAME}}" } }'; $request = new Request('POST', 'https://api.courier.com/send', $headers, $body); $res = $client->sendAsync($request)->wait(); $resBody = $res->getBody();

In the above code:

  • API_KEY is either your Courier test or live key, eg, pk_test_HET164R23K2MENQC1W4Y5AERZ5.
  • EVENT_NAME is the event's name created in the second step of the WhatsApp notification tutorial, eg, Demo_3.
  • PHONE_NUMBER is the recipient's WhatsApp number, which should include the country code.

The sample code snippet above sends a WhatsApp notification. Once it's executed, the notification attached to the event name will be sent to the recipient's WhatsApp number.

Browser Notifications Guide

This section demonstrates how to implement browser (push) notifications on your WordPress site using Courier.

Step 1: Integrate with Your Preferred Courier Push Provider

Log in to your Courier account, go to the Channels dashboard, and integrate with your preferred push provider from the list of providers available. It's also possible to integrate with multiple push providers.

This tutorial uses the OneSignal (P) provider. Click the OneSignal (P) button to integrate with it:

WordPress OneSignal Integration

Register a OneSignal account or log in and follow the quick start guide to set up a Web Push Platform with the Custom Code option.

When prompted, download the OneSignal SDK file and upload it to the root folder of your site, then copy the code snippet provided by OneSignal:

WordPress OneSignal SDK

In your WordPress admin area, go to Plugins, click Add New, search for WPCode – Insert Headers and Footers + Custom Code Snippets – WordPress Code Manager, and install the plugin. You can read more about the WPCode plugin here.

After it's installed and activated, go to the WordPress Code Manager, then Code Snippets, click Header & Footer, add the OneSignal code snippet you copied earlier to the header, and save.

If you are new to OneSignal, you'll then be required to add your first user. To do that, visit your site to view the OneSignal Bell Prompt. Click it and subscribe to push notifications. Check out the official documentation for more information on how to complete your OneSignal account setup.

Finally, copy the generated OneSignal app ID and REST API key. If needed, follow these instructions for more information on getting your ID and key. Paste the values into Courier:

WordPress OneSignal Setup

Step 2: Create a Browser Notification

Go to the Notifications dashboard by clicking Designer in the left-hand navigation.

Create a new notification and select the Push notification channel with the configured provider:

WordPress Browser Notification

Once again, click the channel on the left side of the page to customize the message of the notification however you like:

WordPress Browser Notification Design

You can change the notification channel and connect to other available push providers under Channel Settings by hovering over the channel name and clicking the gear icon.

Create a new event under Settings > Events, then connect the event to any of your created push notifications and click Save:

WordPress Web Notification Event

Step 3: Send the Browser Notification

Find the code block for the part of your WordPress site where you want to add the browser (push) notification. It could be after a successful newsletter subscription.

Write the following Send API snippet into your code, noting that the snippet will only work for notifications connected to the OneSignal (P) provider:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <?php $client = new Client(); $headers = [ 'Accept' => 'application/json', 'Authorization' => 'Bearer {{API_KEY}}', 'Content-Type' => 'application/json' ]; $body = '{ "message": { "routing": { "method": "single", "channels": [ "push" ] }, "to": { "oneSignalPlayerID": "{{ONE_SIGNAL_PLAYER_ID}}" }, "template": "{{EVENT_NAME}}" } }'; $request = new Request('POST', 'https://api.courier.com/send', $headers, $body); $res = $client->sendAsync($request)->wait(); $resBody = $res->getBody();

In the above code:

  • API_KEY is either your Courier test or live key, eg, pk_test_HET164R23K2MENQC1W4Y5AERZ5.
  • EVENT_NAME is the event's name created in the second step of the browser notification tutorial, eg, Demo_4.
  • ONE_SIGNAL_PLAYER_ID is the OneSignal Player ID, a UUID that OneSignal creates per user device, eg, f1aaabc2-9a17-4237-adda-38319ea2de45.

Read the OneSignal API reference to learn more about getting all device details, including the Player ID, via API.

Extras: Sending Dynamic Content

This section demonstrates how to include dynamic content in any of the created notifications.

Step 1: Create Variable(s) in Your Notification

While designing your notification, all dynamic content should be contained in single curly braces. For example, the message in the screenshot below has two dynamic pieces of content, name and place:

WordPress Notification Dynamic Content

Step 2: Add the Created Variable(s) to the Send API

Add a data object containing each variable as a child to the message object:

1 2 3 4 "data": { "name": "John Doe", "place": "Paradise" },

Your raw data structure should now look like the code snippet below:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 { "message": { "to": { "email": "{{EMAIL}}" }, "template": "{{EVENT_NAME}}", "data": { "name": "John Doe", "place": "Paradise" }, "routing": { "method": "single", "channels": [ "email" ] } } }

Conclusion

This article described how your WordPress site can use Courier to send email, SMS, WhatsApp, and browser (push) notifications. Any PHP-powered website can also send notifications by following the instructions in this article. Additionally, Courier includes support and SDKs for some of the most well-known programming languages, including Python, JavaScript, PHP, and Ruby.

Courier provides a great way to implement feature requests that require notifications. It's a robust notification management solution that enables you to design and send notifications through push (browser and mobile) notifications, direct messages like Slack and WhatsApp, SMS, and email using any programming language of your choice.

View More Guides

Build your first notification in minutes

Send up to 10,000 notifications every month, for free.

Get started for free

Email & push notification

Build your first notification in minutes

Send up to 10,000 notifications every month, for free.

Get started for free

Email & push notification

Product

Pricing

Providers

Developers

Documentation

API

Libraries

Status

© 2022 Courier. All rights reserved.