How to Setup Web Push Notifications on Your Website

Hi everyone, this is Matthew Paulsen and I am recording a tutorial video which will show you how to use two services, one Signal and Zapier, to set up push notifications on your website and then automatically send people notifications whenever you have a new blog post. So let's start with some prerequisites. First thing, I'm going to log into my website. This is American Banking News. Excuse me for the clickbaity clock on my typey keyboard. You just have to put up with that. But first thing, you need to have HTTPs or an SSL certificate set up on your website. So when you type in your website with it should work. If you don't have that set up, you'll need to get that set up. There are multiple ways to do this. You can buy a SSL certificate from somebody like RapidSSL, upload the certificate and call it good. The way I have it done is with a service called cloudflare, which is basically a DNS server with a kind of content delivery network for caching built in. It's free, so I have that and they automatically give you an SSL certificate as part of that. So that kind of makes it easy. A couple of notes with WordPress with SSL you have to first, after you set up your SSL certificate you gotta do two things. First, in your plugins folder you need to install a plugin, either WordPress SSL or a plugin called Cloudflare Flexible SSL. Otherwise your website will get caught in a redirect loop and then it won't work, which is bad. So then after you get that plugin set up, you want to go to the General tab and then you just change the URL for your WordPress address and your site address. Change that just from HTTP to HTTPs and then you go back to your website. Hopefully it will turn green. If it doesn't turn green, that means there is a problem with your probably mixed content, meaning that you're trying to serve some non secure images or scripts from your website. And if that's the case you just need to open up developer tools in Chrome or Firefox or whatever browser you use and then it'll tell you it's trying to load this non secure thing on your website and then you just have to go in and fix that by changing the URL from HTTP to HTTPs. Usually that fixes it. For some more complicated stuff you might need the help of a developer if you can't figure it out yourself. But that shouldn't take a lot of time for a developer to do so for now we're going to assume you've got a secure website set up because this is it's just a requirement of the web push notification technology to have a SSL certificate and secure website. I guess I don't really know why. I'm sure somebody smarter than me could explain that technically. But this is an application video just to show you how to do it. So got my website set up with HTTPs. Now I'm going to log into one signal. I've already got my account made. If you don't have one, you could make one. Alright. So currently I've got two projects here. I'm going to make a new one for americanbankingnews.com so we'll call that just American Banking News. We'll click Create. So now I have to specify which platforms I'm going to configure. Something to note about OneSignal is that they have support for mobile apps. So if you wanted to use OneSignal to manage like iOS application or Android application notifications, you could do that. But we are only really concerned with the website push notification technology. So that is what we are going to select then we are going to want both Chrome and Firefox and Safari at some point. Edge Internet Explorer not currently supported but it should be sometime soon. So keep checking back and see if they add that and if it does one signal or just if Edge Internet Explorer starts to support it it'll show up here and then you can configure that as well. So we'll start start out with Chrome and Firefox and we'll add Safari in a minute. Site URL. So we'll type in the URL of my website. If you don't have HTTPs support set up on your website you can do this option. It's not. It's very unideal. You'll get lower opt in rates if you use this kind of. I guess I don't really call it but it's just a non ideal way to use one signals Push notifications. Basically they create their own button that kind of looks like the browser one and then it has to open a window and then people have to click allow notifications. So I'd really encourage you if you want the highest opt in rates for your push notifications to really just set up HTTPs in your website. I'm not going to set up an image URL right now or an image for my push notifications right now because I haven't made one yet. So we'll just skip that part and we'll save it. So now let's see, we want to do Select Website, push for my target SDK, Click next. So now it'll point you to the documentation. It'll give you some stuff to download. We'll do that. So it'll send you to this website and it'll tell you all the good stuff to do. You obviously want to look at this. So if it'll give you an SDK to download. So we'll do that. I'll grab the files here, put them on my desktop and you need to edit. I think you need to edit this manifest JSON file. It's been a little while since I've done this, so I'll open up a notepad. So it will change the name from one signal example to American Banking and Market News short name, just say American Banking News. That's all you got to do with that file. And then we're going to need to be able to FTP up. So I'm going to use Filezilla to upload these files to the root directory of my website. So here I am doing that. Alright, where did I put those files? Okay, so I'm just going to upload these files in the root directory of my website. So we'll do an upload there. Okay, that should be good. And that should give me a code snippet to put on my website somewhere. Here it is. So we'll grab that and copy this. And then I'm going to go back into WordPress, going to go into the editor for the theme. I'm going to open up the header PHP file and then I'm just going to search for head right here. And then I'm going to take that code they gave me, I'm going to copy and paste it in here. And then I need to switch out the app id. So we'll do that. Now there's my app id. So we're going to save that. Going to change autoregister to true to make the thing where it asks for notifications to pop up. And then we're going to hide this notify button. Actually I'll leave that enabled for now so I can show you guys what it looks like. So now I've got the code there. I'm going to go back to the homepage of my website. I may need to clear cache. So now it says www.AmericanBankingNews wants to show notifications. So this is what people that visit your website will see. We're going to click allow on that that way we can send ourselves notifications. And then this is what the. We'll go back to the theme for a second. This notify button, that code, that's what. Come on, that's what this little thing in the corner that's not showing up right now is little red button. So if you don't want that thing and you just want the thing that's usually up here, then yeah, that thing, you can turn that off in the script, but we'll just leave that there on now for now. So now we can go back to one signal. We'll say, we'll check that and it says, congratulations, your first user, that's us using win32. Chrome has subscribed. That means it's working for Chrome and Firefox. But now we'll have to go in and turn it on for Safari. So we'll do that. So we're going to go back into one signal, we're going to go into App settings, we'll do configure, we'll type in American Banking and Market News again. You don't have to check either of these buttons. A P12 certificate, I believe that some kind of secure certificate that Apple uses to identify people. You don't have to do that. And then if you want to upload your own icon, you can do that. We're going to skip that right now. Okay, so now that should be working too for Safari. I believe there is another piece of code we're going to have to add in for Safari support. Yeah, here it is. So we're going to have to grab this little piece of code to specify the Safari web id. We'll paste that in here and then we'll grab my Safari web ID there. I'll copy and paste that in, make sure there's a comma there. So this is kind of what the code snippet looks like when all is said and done to get both Chrome, Safari and Firefox support. So now theoretically it works in Chrome, Safari and Firefox, but you might probably want to test it yourself, test your website yourself. In all three web browsers, only Safari on the Mac is supported. There is no Safari support for Windows because that is kind of an end of life web browser. So we'll leave it there for now. Theoretically your push notifications are working. So first we're going to test it out by setting myself sending myself a notification. So I say test notification. Hi, Matt, this is Matt sending you a test notification. So we'll just send it to everyone and we'll Preview it and we'll just click send. There's my notification says test notification. Hi, Matt, this is Matt sending your test notification. It works. So now we have that kind of set up. We know it works. The next step, we're going to make it so that whenever I publish a new blog post on American Banking News, it will automatically send out a new push notification to people that enable notifications. This will kind of automate the process and just make it so that you don't have to think about it on an ongoing basis. So in order to do this, I'm going to use a service called Zapier or Zappier, I guess I don't know the correct pronunciation. I already have an account, so I'm not going to make one there. I'll click login. I'm going to make a new zap. So we'll search for. Yeah, I guess I already have one signal selected. I'm going to scroll down here to where it says send one signal push notifications for new RSS items. So that way when there is a new item in the American Banking News RSS feed, it will then send out a push notification to the subscribers. So it's already got a template for this. I don't have to reinvent the wheel here. So I'll create this zap. If you don't know Zapier, it's kind of like if this then that if you've ever used that service, same kind of thing, but it basically connects a couple APIs together to make life a little bit easier for you. So basically it says whenever there's a new item in the RSS feed, that'll kind of be the trigger for this thing. So we'll just type in the RSS feed for my website. So it's just americanbankingnews.com feed that's kind of the default for WordPress. We don't need any of those advanced options. So now it's going to check the feed, make sure it works. So we'll fetch. It says test successful. We can view the most recent story in the feed, which is there. That worked out fine. So we'll click Continue and then the action. So whenever that trigger happens, it'll do this action, which is send people or send me a push notification. So we'll do that. I'm gonna have to connect one signal to Zapier here. So it'll do ask for an API key. So then we're gonna have to go back over to one signal, grab the API key. So we'll need the app ID and then the REST API key. Grab that, copy and paste those. We'll click Continue. Theoretically it should work. Okay, it says it connected it. I'm going to give this a name. That way if I add another site later, I won't get confused. Test it said it worked. That's good. Alright, so the content of the notification will be the description of the post. The title will be the title of the blog post. And then the link that you click through will be this story, I guess the link to this story. So I'll click Continue there. Now it says to test it we need to create a push notification. That's what's going to be sent. So we'll create that test and continue. So it's going to make that push notification. Oh, there it showed up. So that means it's working. So now click through that and the story should load in a minute. Play the waiting game. Alright, we'll skip that for now. There it is. So then there's the story, my newest story on a website. And that got sent out as a push notification. Okay. And then we'll click finish and then we just need to turn on the zap. I guess it turned on itself. It'll check my RSS feed every five minutes for a new item. So if I post a new blog post and people that click Enable notifications up here will automatically get that in their browser. I think that is pretty much it. That's kind of all the steps. I know I went through things kind of quickly, but you can obviously slow the video down, go back and reference it if you want to. So that is kind of my quick guide to set up push notifications using one signal and Zapier. This allows us to one, kind of build a subscriber base of push notification recipients on our website and then two, you can one, send them content directly to Zapier. So if you want them to do something, check out a specific post, you can send that to Zapier. Or if you want to just automatically send people new blog posts through web push notifications, you can use the Zapier to set that up. So I think that is pretty much it. I've had some pretty good results with push notifications. I see opt in rates kind of in that 2 to 5% range. And then for people that get the push notifications, it's kind of a 5%, 10% click through rate. So just a really good tool to get people back on your website. I think it's a great tool for marketers. It's very under appreciated right now and just encourage you to give it a shot and see if you can get some good marketing results from it. That's pretty much it. So I'm going to end this video now.