Web Push Notification Tutorial

A web push notification is a message that slides into the top right or bottom left corner of your audience's web browser (depending on the browser). On a mobile device, web push notifications appear similar to a push notification.

See the Web Push Notification Reference for options and settings details.

 Note

Supported Browsers

  • Desktop and Android Mobile: Google Chrome, Mozilla Firefox, Opera, and Safari
  • Android Mobile only: Microsoft Edge

 Tip

You can save this message as a Composer Favorite — a reusable message with preset settings and content. You can use Composer Favorites instead of recreating commonly used messages. See: Use Composer Favorites.

  1. Click Create and select Message.

  2. (Optional) Add a message name and/or flag the message as a test.
    1. Click in the header.
    2. Enter the name.
    3. Enable Test.
    4. Click outside the box to close it.

    See also: Name a Message and Flag a Message as a Test.

  3. Define your message Audience.

    1. Select the Web channel. When Web is the only enabled channel, the composer is reduced to only fields and settings relevant to web push notifications.

    2. Select the group of users you want to send your message to.
      • All Users: Sends the message to your entire audience.
      • Target Specific Users: Create a recipient group based on segmentation data. See: Target Specific Users.
      • Test Users: Predefined recipient groups. After choosing Test Users, select from the Test Groups dropdown menu that appears. See: Test Groups.
       Important

      If you are using merge fields in your message, you must select Upload Users.

    3. Click Content in the header to move on.

  4. Add your message Content.

    1. Enter your message text.
    2. Select a message action. Available actions depend on the message type(s) you selected.
      • When you select only the Web channel, your available actions are Home, Adaptive Link, and Web Page.
      • When you select Web and app channels, you can select any action listed below.
        • Landing Page and Deep Link are for app users only. When they are selected, the Web Page action will also appear for configuration.

      Adaptive LinkAdaptive Link opens a mobile wallet pass. Select an Adaptive LinkA mobile wallet pass link that supports templates for both Google Pay and Apple Wallet. When a user taps the link, Airship determines the user's platform and generates the right pass for the user. from the list.

      • Adaptive links must be configured before they will appear in the actions list. See: Adaptive Links Tutorial.
      • Only adaptive links created in the dashboard will appear in the actions list.
      Deep LinkDeep Link opens a screen in your app or website. Select a deep link from the list.

      HomeHome opens your app's home screen. For web push notifications it opens your Default Action URL. You can override the default URL by selecting the Web Page action and entering a different URL.
      Landing Page

      Landing Page opens a rich pageA landing page or Message Center message in your app that can include HTML, video, etc. that appears until it is closed. Follow the steps in Create Rich Pages. See also: Rich Page Reference.

       Note

      The default behavior in the iOS SDK is to not display the landing page when the corresponding push notification is received while the app is in the foreground state. The logic behind this behavior is that you may not wish to interrupt or distract a user who is currently occupied with the app, only to ask them to visit a different part of the app.

      If you need to display a landing page while the app is in the foreground state, replace the registry predicate associated with that action with one that allows foreground execution.

      In the Airship SDK, this relative state between what the app is doing now and how the action was invoked is known as a situation, or more properly, UASituation. Other examples of situations besides foreground state include background push and app launched from push notification.

      Please see the UA Action Arguments Class Reference for more detail on the methods involved with this display behavior.

      Web PageWeb Page opens a web page or any valid-device level URL such as App Store or app protocol links. The web page opens in the device's default browser. Enter a URL.

    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. Set Optional Features.

    5. Click Delivery in the header to move on.

  5. Set Delivery options for your message.

    1. Select a delivery type.

      Send nowSend the message immediately after review.
      Schedule

      Choose an exact time of day to send the message.

      1. Enter a date in YYYY-MM-DD format and select the time and time zone.

      2. (Optional) Select Delivery By Time Zone to deliver messages at the specified time in your audience's time zone(s). For example, a push notification scheduled for 9 a.m. will arrive for people on the east coast at 9 a.m. Eastern Time, in the midwest an hour later at 9 a.m. Central Time, then on the west coast two hours after that, at 9 a.m. Pacific Time.

         Note

        A message delivered by time zone includes a Delivery by Time Zone section in its message report. See: View Message Detail.

         Tip

        The API equivalent of Delivery By Time Zone is Push to Local Time.

    2. Set Optional Features.

    3. Click Review in the header to move on.

  6. Review your message.

    1. Review the device preview and message summary.Click the arrows to page through the various previews. The browser selection dynamically updates in the dropdown menu above. You can also select a preview directly from the dropdown menu.If you would like to make changes, click the associated step in the header, make your changes, then return to Review.
    2. Click Send Message or Schedule Message.