Header Ads

Let's Make Money With Desktop Notifications II

Let's Make Money With Desktop Notifications II



Setting up a desktop notification scheme on your website is not only easy, but it is entirely free.

The service we will uses is https://onesignal.com/webpush

Now, let’s create a free account so we can start sending these notifications.

Click on the “Sign Up” link at the top of the page, and then enter your email and a password. Then click “Create Account.” You’re getting real close to being setup. Can you feel THE RUSH?

Check your email inbox for a confirmation, and click the link in the message you get from OneSignal.

Once you do, log into OneSignal, and go through the basic tutorial they display immediately after logging in. This will cover some of the basic features and layouts of their platform. OS provides message templates that can be used to quickly send common notices and even automate notifications to specific user segments. Of course, they also provide some excellent tracking of click rates so you can see which templates are working best with your audience.

Not unlike an email auto-responder, this platform can send pre-defined notifications once a user signs up to receive them. For example, someone signs up for notifications from a local restaurant, and immediately receives a message to visit the website, and claim a free drink with dinner coupon.

One of the most powerful features is the targeting. You can target all paid users, or just active users within a time frame. OneSignal includes a whole bunch of filters you can use to laser-target your audience with notification that will get you a response.


Using OneSignal, we define the “robot” that handles notification signup and message sending as an “app.” So, to get started, we need to create our first One Signal Notification App.

At the end of the on-page tutorial, you can click “Add a New App” or on the OneSignal Dashboard, click “Add a New App.”

Once you do, it’s time to pick a name. I’m going to create a new notification app to alert my blog readers that a new demo or post has been made.

Once you put in a name, click “Create.”

Now we’ll choose which platform upon which we want our notifications app to work. We’ll be working with the desktop or Chrome/Safari platform, so click “Website Push.”

Once selected, we now want to configure our Website Push application. This will require:

• Your Website URL (or that of your client’s)

• A Google API Key (we’ll cover that in a second)

• Notification ICON (80 x 80 pixel icon hosted on your website)

Before we advance any further, let’s get you your Google API key that’s required to setup the notifications. This is also free. You only need a Google account and to sign into the Google APIs dashboard. Leave the OneSignal window open, and open a new tab or window and follow the steps in the next section to get the API key.


Follow these steps to get your API key, which you’ll need to setup notifications on your website using the Web Push app from OneSignal.

Step 1: Sign into the dashboard and create a new project:


Step 2: Choose a name and click “Create”

Step 3: Once created, click on your project, and click settings:

Step 4: Grab the Project Number and save it. You’ll need it later.

Step 5: Open the API console. If you have trouble finding it, you can visit this link. In the link below, replace “projectName” with the name you used in step 2:


Step 6: In the API Overview search box, type “cloud messaging.”

Step 7: Click on “Google Cloud Messaging” and select “Enable”

Now that we have Cloud Messaging enabled. We need to set some credentials for our OneSignal app to use.
Step 8: Click “Go to Credentials”

Step 9: On the left bar, click “Credentials”

Step 10: Select “Create Credentials” and choose “API Key” from the drop down

Step 11: Select “Server Key”

Step 12: On the next screen, leave the name and IP Address as they are, and click “Create”

Once you hit create, a new key will be generated for you.

Copy this key to a safe place. You’ll need it to continue the setup on OneSignal.


Now that we have our Google API key, we can finish setting up our web push notification application. Back at the Edit App screen, enter your website URL, our Google API key,and the link to a notification icon.

Next, scroll down and choose an OneSignal subdomain and add your project key.

Now click SAVE!
We’ll setup the SDK. An SDK is a “software development kit” but that isn’t important right now.
Their SDK is a method for the OneSignal network to allow web push notifications via your website.
The site I am using is a WordPress site, so this is the example we will be using the WordPress Target SDK. We’re going to cover how to setup notifications on a non-WordPress site in just a moment. This is done in much of the same way as the WordPress setup, and is actually a lot easier. First, let’s go through the WordPress setup.

Click on the WordPress icon and click Next.
Once you click “Next,” you’re all setup! On the next screen you’ll receive your credentials that you’ll enter into OneSignal’s Notification Plugin. Be sure to save them, as you’ll need them in a minute.


This section will require that you have a WordPress website. If you don’t have one, be sure to check out the Building a WordPress Website section of this guide. Now that we have both our Google API key, and our OneSignal application all configured, the next step is to setup WordPress with the notification plugin.
Download the OneSignal WordPress Plugin that you can at the link below:

Step 1: Log into your WordPress site (www.example.com/wp-admin)

Step 2: Click Plugins and then Add New

Step 3: Click Upload Plugin

Step 4: Click Choose File and browse to the OneSignal plugin you downloaded earlier. Select it and click Open.

Step 5: Click Install Now

If the file size of the plugin is too big for your web host, you’ll need to install the plugin in another way. We will do this by using the File Manager of your webhost.

When you first signed up for your webhost, you’ll get an email with credentials that allow you to manage your hosting package. Log into your webhost’s cpanel account and select the File Manager.

Once you open the File Manager, double click the “Public Html” Folder and browse to the folder that contains your WordPress installation. Look for the “WP-CONTENT” folder and double click the folder icon next to the name.

*Then look for the “PLUGINS” folder and double click the icon next to the plugins folder.

*Now, click on UPLOAD in the top navigation.

*Next click Choose File, and select the OneSignal Notification Plugin zip file.

*Once it finishes, go back to the PLUGINS folder, and you’ll see

“onesignalfree- web-push notifications.zip” in the folder.

*Right click and choose “extract” and on the prompt, choose “extract contents”

*Now you’ll have a folder called “onesignal-free-web-push-notifications” and you can delete the file called “onesignal-free-web-push-notifications.zip” The plugin is now installed on your WordPress website.


Return to your WordPress admin panel, and click on the “Plugins” menu item to refresh the page. You should now see “OneSignal Push Notifications” listed in your installed plugin list. Click on “Activate”
Now you have the plugin installed and activated. The next step is to configure the plugin with the credentials we setup in earlier steps.


In the WordPress admin panel, click on the “OneSignal Push” menu item;

Now we can setup our OneSignal account using the credentials provided by Google APIs and OneSignal:

Fill in this information. There are also tons of other configurable options available to you.
I recommend you read the documentation and experiment with them. You can customize this system in so many ways.

To complete the setup, you only need to populate the following:

• Google Project Number

• App ID


• OneSignal Subdomain

• Safari Web ID

Note: for the Safari Web ID, we only need to format our website in the correct format. In this example the format is :

“web.com.lutherlandro” – so your format might be “web.com.yourDomainName”

To allow Apple users to sign up and receive notifications, follow the instructions in the OneSignal dashboard, or see the section called “Safari

Push” located in the WP-Admin panel > OneSignal Push > Setup > Safari Push.

Once all that information is entered correctly, click SAVE at the bottom of the page.

Now the Notification icon is displayed in the bottom right corner. When you click the icon, it prompts the user to sign up for notifications:

You should now see the prompt, and the notification icon we selected earlier. The visitor will now click continue and will be subscribed to your web notification messages. By default, a new notification pops up to thank the user for subscribing, confirming that our notification system is working.

Be sure to subscribe to notifications yourself for your test. Now back in the OneSignal Dashboard, and click on “Check Subscriber Status” and then “Check Notification Status.” OneSignal will send a test notice to you.

Click the notification and it will take you to congratulations screen confirming that all is working well.


The difference is setting up the Non-WP or (HTML) version of the notification software is simply a matter of putting in a small snippet of code in the index.html file of the website upon which you want to enable notifications.
First, in the App Configuration – Select SDK screen, choose “Website Push”

This will then take you to a screen that will present your API key. Once you click “Website Push,” you’ll be given your APP ID:

When you click “Read the Documentation” you’ll get the same code snippet for using notifications on your HTML website. I highly recommend you read that stuff, but you don’t need to do so in order to setup the notifications.
The code you use is:

Notice the two sections called “APPID” and “SUBDOMAINNAME?
Remember that OneSignal provides you with the APP ID and Subdomain Name after you complete the App Setup.
Using a text editor, simply replace “Your_App_ID” with the API key provided, and do the same for “SUBDOMAIN_NAME

Once you populate the code with your APP ID and Subdomain, it should now look something like this:

Now that this is code snippet is ready, we simply put the code in the HEAD section of our index.html or homepage of our non-WordPress website.
For Example:



There is a slightly different setup for notifications for Apple users. After you configure your application and test is successfully, go to the OneSignal dashboard, select your application from the dropdown, and choose “App Settings”

Scroll down, and find “Web Platforms” and select CONFIGURE for “Apple Safari” Enter the name of your site, and then enter the web address. You can safely ignore the p12 and icon checkboxes unless you want to have a custom setup. Now click “save.” 

Take note of your Safari Web ID. We’ll need this address in a moment.You now need to add a small change to our <head> section again by

 Now, remember that block of code we used to install the Chrome/Firefox notifications? Here it is again:

Simply add your “safari web id” under the “subdomainName:” line

And you’re all set!

there are other provides out there you can use. I just happen to have an affinity for OneSignal because I found it the easiest to setup and use. Still, I encourage you to explore the other platforms as you might find them helpful or more suitable for a particular project or client.

No comments:

Powered by Blogger.