Web Push Notifications: 6 Steps to Sending Your Own

Wondering how to create web push notifications for your business? See the six steps to getting started — and tips for aligning 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 web push solution? 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.

Web Push Notifications: Six Easy Steps to Sending Your Own

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.

what-will-your-message-say-web-push-notification-message-composerStep 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.

web-push-composer-optional-features-screenshot-urban-airshipStep 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.

choose-web-push-send-time-screenshot

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!

web-push-notification-on-desktop-and-on-smartphone-example

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-notification-inspiration-guide-cover-image-urban-airship-ebook

Download our Web Notifications Inspiration Guide today to:
- See use cases you can adopt and implement
- Build smarter, more engaging campaigns
- Spark your thinking about web notification possibilities

Get your copy >>