1. Home
  2. /Guides
  3. /Messaging
  4. /User guide
  5. /Creating Messages
  6. /Content
  7. /Web content

Web content

Reach your web channel on desktop and mobile browsers.

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 on:

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

Appearance and behavior

Web content

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. Learn more below.

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

    • iOS Notification Center
    • Android and Amazon 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.

Buttons

You can add buttons to Web notifications to direct users to take specific actions. Web notifications support one or two buttons, e.g., a single Opt in button, or a Yes/No pair, and you associate each button with an ActionA configurable behavior that occurs when a user interacts with your message, e.g., opening a web page.. You can also add or remove TagsMetadata that you can associate with channels or named users for audience segmentation. Generally, they are descriptive terms indicating user preferences or other categorizations, e.g., wine_enthusiast or weather_alerts_los_angeles. Tags are case-sensitive. or opt a user in to or out of a Subscription ListAn audience list of users who are opted in to messaging about a specific topic. Users can manage their opt-in status per list using a preference center. when they tap a button.

Airship records button clicks to help you track how your audience engages with your messages. Airship records them as Custom EventsEvents that indicate that a user performed a predefined action, such as adding an item to a shopping cart, viewing a screen, or clicking an Unsubscribe button. Custom events can trigger automation, including Sequences, Scenes, and Surveys. You can code them into your app or website, or send them to Airship from an external source using the custom event API. Custom events contain properties that you can use to personalize messages. with the name button--<BUTTON_ID>, where BUTTON_ID is either the button’s label or ID (when using the API). These events are included in Message Reports, Event Tracking, and Real-Time Data StreamingA service that delivers engagement events in real time via the Data Streaming API or an Airship partner integration..

Airship provides 30+ predefined buttons, which have preset labels and actions. Some buttons support changing their associated actions.

You can also create custom buttons when you create a message, or within your project so you can reuse them for other messages. Custom buttons can be associated with Airship actions, or they can be associated with custom actions.

See Interactive Notifications for more information about buttons. See Custom Web Notification Buttons to add reusable buttons to your project.

Users must opt in to receiving notifications, and you must install install the Airship JavaScript SDK and add the channel to your messaging project. See: Web: Getting Started.

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:

Web content

Now you can configure the body of the message:

Web content

  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 enable Preview Data to test how they 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 Set a tag.
    2. Select Add or Remove, then search for tags that exist in the system, or create a new tag.
    3. (Optional) Click Set another tag 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:

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