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. Open your messaging project, then 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 the Test toggle.
    4. Click outside the box to close it.
  3. Under Channels, select Web Browser.
  4. Select your message audience, then click Content in the header to move on.
    • 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.
     Note

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

  5. Enter your message Content.
    1. Enter the text that will display in your message. Below the text box is a color-coded indicator, warning when your message may be truncated on some devices.
    2. Select a Message Action from the dropdown menu. The Message Action defaults to Home — when the recipient clicks the message, it will open the Default Action URL set in your Web Notifications configuration. You can override the default URL by selecting Web Page and entering a different URL. If Web Browser was the only selected audience channel, the only other available action will be Web Page. See: Message Actions reference: Web.
    3. (Optional) Set a tag.
    4. Set Optional Features.
    5. Click Delivery in the header to move on.
  6. Select a delivery type and Optional Features, then click Review & Send in the header to move on.
     Note

    Scheduled delivery supports delivery by time zone. Delivery by time zone is an option for scheduled messages that delivers the messages according to recipient device's current time zone. For example, a push notification scheduled for 9 a.m. will arrive for users 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.

  7. 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. To make changes, click the associated step in the header. When you've made your changes, return to Review.
  8. Click Send Message or Schedule Message.