Web content

About web push notifications

A web push notification is similar to an app Push NotificationA message that can appear on any screen on a mobile device. Push notifications appear as banners. except that the target device for a web notification is a user’s web browser.

A benefit of reaching users on the web is that you don’t need to develop an app; any user with access to a web browser can receive your notifications. If you do have an app, however, web is an additional channel that you can use to engage your audience.

Airship supports web push notifications and Scenes on:

• Desktop: Google Chrome, Mozilla Firefox, Microsoft Edge, Opera, and Safari (v16 and above)
• Android Mobile: Google Chrome, Mozilla Firefox, Opera
• iOS and iPadOS Mobile: Safari (iOS and iPadOS 16.4 and above, as a standalone web app)

See also Embedded ContentAn alternative Scene format that can be displayed on any app or web screen in a view defined by an app developer. It can also be presented in Story format..

Appearance and behavior

A web push appears as a toast notification, sliding into the top right or bottom left corner of your audience’s web browser (depending on the browser). Depending on the operating system, notifications may also be delivered to the OS Notification Center. For example, on macOS all web notifications are visible from within the Notification Center, regardless of which browser they come from. They are displayed upon receipt as long as the browser is open. Safari web notifications are handled by macOS, so they may also be handled by Notification Center preferences.

On a mobile device, web push notifications appear and behave similarly to a mobile push notification.

Every web push notification requires text, and you can also add optional features:

• Buttons — You can add one or two buttons .

• Title — A heading that appears above the notification text in:

  • iOS Notification Center
  • Android and Fire OS Notification Area/Drawer

  You define a default title for all of your project’s web messages when configuring the web channel for your project , and you can override the title per message.

• Media — Add an image that will appear in web messages in Chrome and Opera browsers on Windows and Android platforms. See: Media guidelines .

• Icon — This image is included in all web messages. You define a default icon for all of your project’s web messages when configuring the web channel for your project , and you can override the icon per message.

Creating content

You configure the appearance of the message in the Content step of a composer; in the Delivery step you can configure content-related features that do not affect the appearance of the message.

In the Content step, click Web Notification:

Now you can configure the body of the message:

1. Enter the message text. If you are using HandlebarsHandlebars is Airship’s templating language for personalization. Handlebars expressions use double curly braces wrapped around a content template, ranging from a simple variable, e.g., {{first_name}}, to complex evaluations of personalization data., you can test how the content will appear. See Previewing personalized content.

2. Select an ActionA configurable behavior that occurs when a user interacts with your message, e.g., opening a web page.:

   • Home
   • Web Page
   • Adaptive Link

3. (Optional) Set and/or remove tags when the user interacts with your message.

   1. Click Configure options.
   2. Select Add tag or Remove tag, then search for tags that exist in the system, or create a new tag.

      

   3. (Optional) Click Configure another option and repeat the previous step.
    Tip

   Setting one or more tags when a user interacts with a message can help you track user interactions for follow-on retargeting campaigns. For example, if you set a tag responded-campaign1, you can target users bearing the responded-campaign1 tag with another message at a later date, knowing that they are active users. Alternatively, you can re-engage users with this tag using an automated message if they are inactive for a period of time.

4. Configure optional features:

   • Buttons
   • Icon
   • Media
   • Title

Now you are ready to complete the remaining steps in the composer.

Icon

Enter a URL to add an icon to your web push notification, overriding the default icon specified in your Web Notifications configuration. Safari is not supported. See also Media guidelines.

If your Airship plan includes CDN support, you can also upload media or select from previously uploaded media:

1. Select Upload and then Insert Media.
2. (To use an existing file) Select a file row.
3. (To upload media) Select Choose files and then and select one or more files to upload.
4. (Optional for uploaded media) Select each uploaded file and add or edit keywords to help organize your media. Enter text in the search field below the preview, and then select from returned matches or select Add keyword: [entered text]. Select the X icon to remove a keyword. Changes are applied immediately.
5. (Required for uploaded media) Select the file you want use, then Insert selected media.

For additional information, see Media library.

Media

Enter a URL to add media to your notifications. See also Media guidelines.

If using a personalized media URL for an App push notification, you must specify the media type after entering the URL:

If your Airship plan includes CDN support, you can also upload media or select from previously uploaded media:

1. Select Upload and click Insert Media.
2. (To use an existing file) Select a file row.
3. (To upload media) Select Choose files and then and select one or more files to upload.
4. (Optional for uploaded media) Select each uploaded file and add or edit keywords to help organize your media. Enter text in the search field below the preview, and then select from returned matches or select Add keyword: [entered text]. Select the X icon to remove a keyword. Changes are applied immediately.
5. (Required for uploaded media) Select the file you want use, then Insert selected media.

For additional information, see Media library.

Title

Enter a title to create a heading that appears above the notification text. The title set here will override the default title configured for your web notifications.