Hi guys,
Today we’re going to see how you can add web push notifications
on your WordPress website.
Let’s say you have a website,
And you want to notify your visitors about any new updates on your site,
You can do that easily by watching this video,
So after watching this video,
When a visitor visits your site,
They’ll see a message like this,
Now if the visitor wants to get notifications from
your site and clicks allow,
You’ll be able to send them notifications on their browser like this.
And if your visitor opens the notification,
It’ll take them to the page you want them to visit on your site,
Okay!
By doing this you’ll be able to keep your visitors updated about your website
And possibly increase your business
so let’s get started,
I’m Bryan from website learners,
And let’s add push notifications on your site.
First, let’s look at the site where we want to add the web push notifications,
Here it is,
Now to add the push notifications.
We’re going to do 3 steps.
The first step is to create an account in OneSignal.
Now this is the website which is going to help us add the push
notifications to our site. So to create an account in one-signal,
Just click the link below this video,
And it’ll take you to this website.
Now to create the account,
Just click get started,
Now instead of filling up these details,
Let’s use the google login to create an account,
So just click google,
And then select your account,
Now here,
Enter the name of your site,
I’m going to enter “TryCasuals”
Now as we want to add push notifications,
Let’s select web push,
And then click next
Okay, so now we’ve successfully created our account in OneSignal.
Once you’ve created your account,
We can go to the next step,
Which is to add your site to this account.
So to add your site,
Just click here,
Now as we’ve created our site using WordPress.
Let’s choose WordPress.
And scroll down
Now here you need to enter your site's name
So I’m going to enter my site name, And here enter your site’s URL,
So let’s go to our site,
Now copy this URL,
And then go back,
And paste it here,
Once you’ve done that,
Next, here you need to upload a logo for your site,
The image which you upload here will appear on your
notification message like this.
So to upload the image.
Just click upload,
And then drag and drop the image you want from your computer,
Now click save,
And your image will be added.
So once you’ve added the image,
Just click save,
And your site will be successfully added to onesignal
Once you've added the site,
You can see, we’ve got these details here.
Now let’s go to step 3, which is to 'connect this account
with your WordPress website'.
Once you connect OneSignal account with your WordPress website, push notifications
will be added to your site.
So to connect the account,
We need to add these details to our website,
Now to add these details,
We need to install a plugin in WordPress,
So let’s go to our WordPress dashboard,
Now go to plugins,
And click add new,
Now here search for ‘OneSignal’
And you’ll get this plugin,
This is the plugin which is going to help us connect our
OneSignal account with WordPress. So to install the plugin,
Just click install. And then click activate.
So now we’ve successfully installed the plugin,
Once you’ve installed the plugin,
Next, let’s add these details,
So to add it,
Just click one-signal,
And then go to configuration.
Now let’s copy these details and paste it here,
First, let’s copy this one,
And paste it here,
Next, let’s copy this,
And paste it here.
Okay so once you’ve added the details,
Now to complete connecting the one signal account with our website,
Scroll down,
And here you need to select how you want your notifications
to appear to your visitors.
By default when your notification appears on the browser,
It’ll disappear automatically after a few seconds,
Now if you don’t want the notification to disappear
Just click here and select no.
And then scroll down,
Now when a visitor comes to your website,
If you want to add a message like this,
And ask them whether they want to get notifications from your site.
Just enable this option,
Now by default there will be a subscription bell on your site like this,
Where your visitors can click here
and unsubscribe,
If they want to stop receiving notifications from you.
So If you don’t want this option on your site
You can disable this option.
Once you’ve done that,
Just scroll down and then click Save.
As soon as you click save
your account will be successfully connected to your website.
And the push notifications will be added to our site.
So to check how it works,
Let’s go to our site,
Now if we click refresh,
You can see that our message has appeared here,
Now let’s say a visitor wants to get notifications from your site,
So all they have to do is,
Just click allow
and now if they again click allow,
You can see that,
We’ve got the default notification here.
So this means the visitor has subscribed to your site,
And from now on they will start receiving notifications from your site.
Okay, so this is how you can add push notifications to your wordpress site,
Next, let’s see how the notifications will appear on a mobile.
Now if we go to our site on mobile,
You can see that our message has appeared here,
Now if a visitor clicks allow, and then again click allow,
You can see that we’ve got a notification from our site.
This is how your notification will appear on a mobile phone.
Okay so now you know how to add push notifications on our site,
Once you’ve added the notifications,
Now how do you know if someone has subscribed to your notifications?
So to check the number of subscribers we have got.
Let’s go back to Onesignal,
And click ‘dashboard’
Here you can see that we have got two subscribers now,
Which means two people have clicked on allow notifications from your site.
So if more people click allow, this number will increase
Okay so once you’ve got subscribers,
How will you send notifications to these subscribers?
So next let’s go to the final part of this tutorial,
Where we see how you can send notifications to your subscribers.
To send a notification to your subscribers,
First, we need to create a notification.
So to create it,
Just click new push,
And here you can see that we have a live preview of our notification.
Now here you need to enter the title for your notification,
I’m going to enter “flat 50% off”
And as you can see the title will be changed here
Now here enter the message you want to show in your notification,
I’m going to enter my message.
Once you’ve entered that,
Here you can add an image which you want to show on your notification.
So to add the image,
Just click upload,
And then drag the image you want,
And drop it here.
Now click save,
And the image will be added here.
Once you’ve added the image,
Here you need to add the link of the page, which you want to show when
a visitor opens this notification.
So to add the link,
Let’s go to our site,
As I want to show the products page to my visitors,
I’m going to click products,
Now copy this link,
And then go back,
And paste it here,
So now we’ve created our notification,
Now to send this notification to your subscribers,
All you have to do is,
Just scroll down,
And then click confirm,
Now if you click send,
Your notification will be sent to your subscribers,
Once you have sent the notification
Now let’s see how your subscribers will receive this
notification on their browser
Let’s say a visitor who has subscribed to your notifications is
browsing the internet.
Now here You can see that,
Your visitor has got the notification which we just sent.
Now if they open this notification,
It will take them to the products page of our site,
Okay
so this is how your subscriber will receive your notifications.
Next, let’s see how your subscribers will receive the notification on their mobile,
Once you have sent the notification,
Your visitors will receive a notification from our site like this,
And if the visitor opens it,
It will take them to the products page on our site.
Okay so now you know how to send notifications to your subscribers.
Once you’ve sent the notification,
How do you know if your subscribers have opened the notification or not?
Next let’s see how you can check the performance of your notifications.
So To check the performance of your notification,
Just go to OneSignal,
And click ‘refresh’
Now here you can see how many people have received your notification,
And you can also see how many people have clicked on your notification,
Now if you scroll down,
You can see the delivery statistics of your notifications,
Okay, so this is how you can check the performance of your notification.
Now you know how you can send push notifications from your website.
Next, let’s go to the Bonus part of this tutorial,
Where we see how you can send notifications to specific subscribers.
Let’s say for example,
A visitor is checking out the products on your site
Now for some reason, the visitor leaves your site,
So after some time what if, you want to send them a notification like this,
So that if the visitor clicks it,
They can visit your site again.
Now, Let’s see how you can send notifications to specific subscribers.
To send notifications,
We’re going to do 2 steps,
The first step is to select the subscribers to whom you
want to send the notification.
So to select the subscribers,
Just go to OneSignal,
And then click new push,
Now click ‘send to particular segment’
And as you can see,
By default, all the subscribers are selected here,
So to select the subscribers you want,
First, let’s close this,
And then click add segment.
Now here you can see the different types of subscribers,
You can select the type of subscribers you want,
As we want to send the notification to those who are not visiting our site
Let’s select ‘inactive users’
Once you’ve done that,
Just click here,
Now here you need to select for which inactive users you
want to send the notification,
Let’s say you want to send the notification to those who have been
inactive for more than 48 hours.
So just enter 48.
Now if you send the notification, it’ll be sent to those who have left your
site and have been inactive for 2 days.
Okay so once you’ve select that,
Just click update,
So now we’ve successfully selected our subscribers,
Once you’ve selected the subscribers,
We can go to the final step,
Which is to send a notification to these subscribers.
So to send a notification,
First, let’s create a notification,
Just scroll down,
Now like we did before,
Let’s fill up these details
Now let’s add an image for our notification,
Just click upload,
And then drag and drop the image you want
And click save,
Next, here add the link to the page, which you want to show your visitors
when they open this notification.
So to add the link,
Let’s go to our site,
Now copy the link,
And then go back,
And paste it here.
So now we’ve created the notification.
Now to send this notification,
Just scroll down and then click confirm,
Now click send,
And the notification will be sent.
Now after 2 days,
Let’s say the same visitor is browsing the internet,
And here you can see they have got the notification from our site,
And if the visitor clicks the notification,
You can see they’re taken to our site.
Okay so that’s it guys this is how you can add push notifications
on your WordPress website,
Now if you want to learn more about WordPress, you can check out our complete WordPress course by clicking the link below this video
And also make sure you subscribe to Website Learners to get more videos like this one
Thanks for watching,
I’ll see you in the next video,
Take care, bye-bye.