How To Create Web Push Notifications

Create web push notifications in 6 easy steps with this tutorial.

Airship
4 min readApr 14, 2017

by Diana Laboy-Rush and Meghan Suslak

Wondering how to create web push notifications for your business? This post details how to get started, showing you step-by-step how to build web notifications — and align your mobile web, desktop web and app engagement strategies.

Web push notifications deliver messages to opted in users on their desktop and mobile browsers. Businesses with or without a mobile app can now engage web visitors with instant, high-value, notification-style messages to meet specific customer needs using Urban Airship Web Notify.

With use cases ranging from transactional messages (like confirming an order has shipped) to promotional messages (like highlighting the latest product or service offerings available) web push notifications are something you’ll want to add to your marketing toolkit. (See more ideas and examples in our Web Notification Inspiration Guide.)

Ready to get started with Web Notify, our solution for sending web push notifications? Get in touch and we’ll help you get your newest communication channel up and running.

In this post, we offer a tutorial for creating a web notification using our web push notifications solution in our Message Composer. You’ll see how easy it can be to create and send web push notifications that engage web visitors with relevant and timely messages.

Let’s get started.

Sending Web Push Notifications in Six Easy Steps

Step 1

To begin, create a new message in the Urban Airship Message Composer. Define the audience for your web push notification, modify the platform(s) that will receive your push notification as necessary, and choose your message type.

To send a web push notification, select “Web Browser” as the platform. (Note: For brands using Urban Airship Engage to send notifications, we’ve created a streamlined process that makes it easy to compose a message once, then send as a web notification and a mobile app push notification at the same time.)

Step 2

Next, it’s time to write your message. Because maximum notification length varies by device, we recommend writing your text in a way that makes sense for all users, including those who will receive your notification on a desktop device.

Web push notification character limits vary. If you’re sending to Chrome, we recommend keeping the character count to 180 for the best experience across desktop and mobile devices. Firefox and Opera will display up to 30 characters.

Step 3

Next, select where users will go when they tap or click on the notification. For web push notifications, you have two options. You can either:

1) Send users to the webpage you’ve designated as “Home” in your settings (usually your website home page), or

2) Send them to a different URL — a product page on your site, your Twitter or Facebook page, a form page — any URL will work. To do that, select the “Web Page” action and enter the URL.

Step 4

Now it’s time to configure the optional components of your web notification! Here are your options:

Custom Keys: Custom keys, also known as key/value pairs, allow you to pass extra data through your push notification payload for use by custom code in your website or app. One common use case is passing campaign identifiers for analytics.

Title: If you want to include a custom title with a web notification, you can add it here. (Otherwise, the title will be the default you set up — usually your company name.)

Icon: If you’d prefer to use a custom icon instead of your default logo, you can add it here.

Step 5

The next step is choosing your delivery date and time. You can send your notification right away, or schedule it to be sent later, on a specific day and time. Our Message Composer also allows you to customize send times for different timezones.

Step 6

The final step is to preview the notification on each platform with our built-in preview window, review your choices, and send or schedule the notification!

Engage More Customers with Web Notifications

Now you know how easy it is to compose a web push notification, to add it to your engagement strategy on the web. You have the tools to deliver timely, relevant messages that surprise and delight your customers — and see higher engagement rates.

Ready to begin? Contact us to get started!

Web Notifications Inspiration Guide

Download our Web Notifications Inspiration Guide today to: — See use cases you can adopt and implement.

Originally published at www.urbanairship.com.

--

--

Airship

Urban Airship is now Airship! Leading brands trust us to help them achieve digital growth. We make mobile moments magic. www.airship.com