Web Prompting & Web Push Overview Webinar

Get to know OneSignal's web push solution and learn how to use permission prompt templates to boost opt-ins and drive engagement.

OneSignal's Customer Success Manager, Sasha Reagan, goes through how you can open up new opportunities for engagement with the way you use web prompts and web push notifications. The transcript of the webinar can be found below.



Hi, everyone. I'm going to go ahead and get started here. Thank you for joining today. I'm excited to walk you guys through a little bit about web push and web push prompting. Give me a second to set up my screen. Great.

So I wanted to quickly walk through how we are going to do the setup today. First, I'm just going to give a quick overview of web push and web prompt, then we're going to actually hop into the platform for a quick demo. And then I'm going to leave a little bit of time at the end for Q and A. There should be a little Q and A box on your Zoom screen. You can keep sending me questions throughout. I'll try to get some during, but I might have to wait until the end.

I wanted to quickly introduce myself. My name is Sasha. I am a Customer Success Manager here at OneSignal. Yeah, excited to get started.

What is Web Push?

First one, I wanted to take a step back and talk about what is web push. Web push are the push notifications that are sent to your users from the browser and are delivered whenever a user has their browser open. They can appear as a pop-up on the side of the screen, as well as stored in that computer's notification center.

One thing to call out is that, web push capabilities do differ by browser and what you're able to do and what you're able to achieve. One of the great things about the OneSignal platform is you can actually go through and look at the customizations available for each different type of browser.

One of the things that I recommend doing is if you click into the analytics of a single message you've sent, you can actually scroll down and see a breakdown of how many people are using different types of browsers. Always worth making sure you're putting in that effort for whatever is the browser of choice for the largest user base.

Here, you'll see a couple of images on the left. We have what web push looks like on Chrome if you have a windows computer, and you can see, that has the capability of action buttons. Some have the ability to add images. It's just a matter of what platform you're looking at. And then the pop-ups that I discussed, you can see a preview of what that looks like on the image on the right. Great.

Different Web Push Prompts

Next, we'll talk about web push prompts. This is the requirement to get someone to become a subscriber so that you can send them those notifications. We have a few out of the box solutions and then different solutions for web push prompts. I wanted to walk through first what your options are.

First, we have a bell prompt. The bell prompt you can see in the image here on the bottom left is a small widget that lives in the bottom corner of your site. You can customize through OneSignal the size and the location of it. It helps bring up the native browser prompt. But it's designed to be small enough that it actually stays on your site at all times so people can subscribe and unsubscribe continuously and always see that little dot there. It makes it a little bit easier.

Then we have the native prompt, which we have a visual for on the bottom right. That is required for all web push subscriptions. Unfortunately, that's not customizable. It's just going to say the name of the website, wants to show you notifications with a block and allow. But what a lot of OneSignal does is allow you to control the conversation before the native prompt comes up to help people see value, see some branding or customization, which we highly recommend, because it's really important to contextualize before you're asking someone to subscribe. Cool.

Third, option. I don't have the visual for this here, but custom link, you are also able... I have a couple more web push prompts. I'm going to show you in the next slide. But if there's something missing or something that you guys wanted to do that was a little bit different from that format, we do also have the ability to have you customize your own permissions, whether that be through a link or through a button that you can place anywhere on your site.

A couple I see commonly, sometimes people like to do a bottom banner, ask, things like that that can go over really well and give you a little more freedom, especially if there's like a certain area of the site or a certain format that would work best based on what your user's doing and what their kind of web activity is. Cool.

I'm going to show you the next type of web push that we have in OneSignal at the box. The first is the slide-down prompt. That's the visual on the bottom left. This is one that I highly recommend. It allows it to display in the top-down center of the browser on desktop. We have a lot of customization capabilities here. We can customize the image, we can customize the content and the text of the buttons, as well as when you are prompting to ask for that subscriber information in the first place.

Best Practices for Web Push Prompting


One of the things that is definitely a best practice here is customizing this so that you can talk about what your value prop is, and also ability to customize when it shows. Is it showing when someone has viewed a couple of pages or been on your site for X amount of seconds? we can customize for that as well.

So if you're in a high growth phase and you are new to web push and want to get a bunch of subscribers, I think there's less need for a delay or a pageview wait. But if you are really trying to be strategic with who signs in for your web push to make sure you can get the most value out of them, sometimes people later on, once they have a larger user base, we want to have those delays and things.

And then on top of the slide-down prompt, we also have an additional capability, which is the category slide-down. This is taking all of the format, all the things I just described for slide prompt, and actually allowing you to opt-in or out of notification categories specifically.

On the backend, we are tracking these as data tags. It'll tag that device based on their interests, and it allows you to cater your messaging more specifically to someone's interests, which can often allow you to have a little more permission to send more notifications if you know it's something that someone is really directly passionate about. Great.

I am actually going to go ahead and walk through the platform now. Give me a quick second. We actually have a question.

Will this be the same approach if you want to add to your mobile app?

For your mobile app, you'll want to do in-app messaging, which we do still have. It works somewhat similarly. It's going to be set up in a different area though. I can actually start with showing you the web prompt push. We can handle that. It's not going to be exactly the same, but our in-app capabilities are really strong. You're going to have a lot of different options there. We can take that offline as well.

All right. Let me go ahead and share my screen. Sorry guys, one second. All right. I'm having a little bit of trouble. Give me one second. Here we go. Okay, great.

First, I want to show you how to set up a web push prompt permission. The first thing that you're going to do is you are going to go to the Settings section of your OneSignal dashboard. You set up all browsers, you can also set up Apple Safari, and then we are going to click into Edit to configure our web push. You can ignore this. This is just typical site setup stuff.

And then here we have the permission prompt setup. We have a couple set up here. We have slide prompt and custom link. You are able to have more than one prompt active at once if you'd like. But one of the things that you're able to do is you can click Add a Prompt here if you want to do subscription bell or native prompt, which we don't really recommend because it's pretty helpful to give someone a little more context and a little more flexibility with their opt-ins and opt-outs. It's a good way to set you apart and make it look like it's coming from the brand rather than from the browser itself, if that makes sense to you.

For Subscription Bell, you can customize the size and the location, as well as all of its colors. You can also hide the bell if the user is subscribed and customize the bell's text.

We have additional advanced options if you want to move it around on the page, if it's interfering with something.

Native prompt, it's pretty out of the box and automatic. We can change when it prompts, but we don't have that many other customization capabilities. You can preview what it looks like here.

I'm actually going to go in and show you a little more about slide prompt and custom link. Here we have slide prompt. If you want to customize the text, you can basically toggle on to start editing that feature. If you want it to change, you can see it'll go ahead and render on the image on the right side.

You have somewhere around a hundred characters, so you don't have unlimited space to explain to someone why you need them to opt-in. But it's worth these little tweaks that make it custom to you. Like when I worked with the news team, I'll say, "We want to be the first to give you breaking news," things like that. That can just set the difference of knowing what to expect. So you can get a little more creative than the out of the box. We'd like to show you notifications for the latest news and updates. You can also customize the button text.


Auto-prompt, this is your ability to customize based on timing. If you want to be really selective with who you are asking and what subscribers you're bringing in and want to communicate with.

And then this is the category toggle. If you toggle it on, you're able to make those categories. Like I said, we are creating it as a data tag and assigning it to a user. We have a two-part system here where you will have what it'll be tagged on in the backend for us to use, for our reference. And then the label, which you can see on the right here is just what it looks like externally facing for the customer. Great.

I am going to very quickly go through custom link, but I do want to say this is a lot of customization we're able to do here. A lot of this is what we've seen before. Your ability to do with the buttons, the links, some of it's familiar from the subscription bell, some of it's familiar from side prompt. You also have your code section right here. Great.

And now I want to quickly go through web push, and then I am going to go ahead and start taking questions. To send a web push, you're going to want to go to Messages. You're going to want to click New Push. And then from there, you're going to start crafting your message. First, you're going to select an audience. It's going to default to all subscribers, anyone who is subscribed and has a web push token. But you can also choose a particular segment to send to.

There’s some things that we track out of the box that you can use for segmentation. You can also use important context, additional context like those data tags we talked about. If you're sending out into different categories, you could make a segment for each category and select it from the drop-downs. This is your existing list of segments. We actually did a webinar in segments last week. You can also look into that if you want to know more about segments.

But I'm going to get to the content of the message itself. Because we are sending web push specifically today, we are going to make it default and show you what it would look like on that device. You have multiple options of the image that renders on the right-hand side here.

I am just showing you how it's looking for these different things. This is not, of course, texts I would recommend. But you can see how it's going to render in different devices by using the dropdown on the right-hand side. You have the ability to add an image. And then of course, for launch URL to link when they click on that push to a certain thing.

If you are promoting a new item, you'd want to link to that items page. If you are giving the article headline, you'd want to link to that article on the site, things like that, just to make the user journey easier. If something compelled them about that message, you're directing them to the right place.

Scrolling down. I'm going to go ahead and get rid of these because these are mobile customizations. These are different things that you can do to customize on. It's a mobile message you're sending, but we're going to focus on web push for now.

You can see, like I said before, there are certain things that you can do for different browser platforms. For Google, you can actually mouse over if you want to get a visual idea of what these items are talking about - customizing the icon, the image, and the badge. The right-hand side also directs you to our support docs. Any time you have a question or you're running into something, it's a great way to go directly to the source. Other customizations here.

Here we have the option to assign a key value pair when someone opens one of those web push notifications. You can have web push topics. If not, when you're just sending web push, it's going to default to having the newest messages first. You can also categorize them so that you can have the newest of a certain category. We have additional docs to go into that a little bit further.

You can choose priority of a message. We default to normal, and we do recommend normal. But if you're someone who has some really critical breaking news, you can also switch to high priority. But we really recommend it for rare circumstances.


Time To Live, this is how long this web push is going to live on the browser. For example, if I don't have a browser open, this happened this morning and I opened my laptop, those messages had a time to live past the time that I had gone to sleep. So when I woke up, I was still able to receive those notifications on the right-hand side. That notification lives on for the amount of time that you set. It defaults to three days.

Next, you have the ability to schedule those messaging. I won't go into too much detail about that now. We are a little over time, so I am going to stop here and answer any questions that you have.

Okay. It seems like we don't have any new questions for now. Anything that you guys are particularly working on or anything that you saw that you had any additional questions about in terms of how to set it up in your dashboard or anything else? If not, I am going to... oh, we got one here.

Can you share the video, your recording of this presentation?

Yes, of course. We will send this out publicly after the webinar today. You should be able to receive that in a few days. No problem.

All right. Well, thank you guys, and have a great rest of your day. Thank you for joining today. I definitely recommend reaching out to support@onesignal.com if you have any questions. You could also click in your platform, you'll see in the bottom right-hand corner, there's a little message button. You can reach our support team that way as well if you have any questions as you're doing set up. If you're interested in looking at the difference between web browsers and best practices, we have a lot of good resources on our blog as well. So I highly recommend checking that out.

Have a great rest of your day. We really appreciate you tuning in.