How to Create Web Push Notifications

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 Airship Web Notifications.

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 is a channel 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 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 notifications solution in our Message Composer. You’ll see how easy it can be to create and send web notifications that engage web visitors with relevant and timely messages.

Let’s get started.

Web Notifications: Six Steps to Sending Your Own

Step 1

To begin, create a new message in the Airship Message Composer. We recommend giving your message a name to make it easier to find later in Messages Overview. To do so, click the gear icon in the top navigation bar. 

To send a web notification, select “Web” as the channel. (Note: If you want to send a notification to multiple channels at once, such as Web, App, and Email, enable all your channels on this step). 

Define the audience for your web notification. If you want to send your web notification in multiple languages, you can enable Localization in this step. You can also enable “Generate retargeting segments”, which will automatically create segments that can be used to easily retarget users who did or did not interact with your web notification. 

Next, choose your message type. If you are sending your message to multiple channels, you’ll notice you have a separate tab for each channel, allowing you to customize the content of your message by channel. 

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 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.

Remember, you can include handlebars in your message to personalize the content your user receives. You can also create your message using a stored template.

Step 3

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

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.

3) Send them to an adaptive link to open a Mobile Wallet pass (for mobile web users).  

Step 4

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

Buttons: If you want to add some interactivity to your web notification, you can add up to two buttons. We provide some button pairs out of the box such as “Yes/No”, “Buy Now”, and “Follow”; or, you can create your own custom button(s) on the fly! 

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.)

Media: Make your web notifications richer and engaging by adding a large image. Note: Image support varies by browser and OS. See documentation for details. 

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, schedule it to be sent later on a specific day and time, or set up a recurring message that repeats on a specific cadence (such as, once a week on Friday at 4pm). Our Message Composer also allows you to customize send times for different time zones.

You can also specify certain delivery options on this step as well, such as campaign categories for reporting, ignoring any channel message limits that may be set, requiring interaction on your notification, and more. 

Step 6

The final step is to preview the notification on each channel  with our built-in preview window, review your selections , and send or schedule the notification! If you are sending your message to a subset of your audience, such as a specific segment or attribute, you can also generate the audience count for your message on this step. 

Engage More Customers with Web Notifications

Now you know how easy it is to compose a web 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!