New Beta Feature: Send a Web Push Notification

We're excited to announce beta support for Web Push Notifications. Leverage all of the same targeting and triggering capabilities you've come to expect from Leanplum, to send push notifications to mobile web users via our HTML5 SDK.

Initial Setup


Web Push is currently in beta and available for select browsers. Note that iOS does not support web push for any browser.

Browser Android iPhone MacOS X Windows PC
Chrome v52+ YES NO YES YES
Firefox v46+ YES NO YES YES
Opera v46+ YES NO NO NO
Safari NO NO NO NO
Samsung Internet Browser NO NO  NO  NO 


Note: macOS only supports icons, but does not support images. The push notification will still display, but the image will be ignored. See here for more.

Before you can send your first web push notification, there's a few things you'll need to do. Be sure to follow the steps outlined below when integrating our HTML5 SDK to set up web push notifications.

New Methods

Four public methods have been added to the HTML5 SDK to support web push.

method description
isWebPushSupported Determines if web push is supported by the user's browser. Returns a boolean of True or False.
isWebPushSubscribed Determines if the user is subscribed for web push. Returns a boolean of True or False.
registerForWebPush Registers the user's browser for web push.
unregisterFromWebPush Unregisters the user's browser for web push.

These can be used to prompt the user to register for web push. We have provided a sample implementation where a toggle registers and unregisters a user for web push. Specifically, see implementation for toggle initialization and toggle switching.

Create your first web push message

To get started, go to the Messaging dashboard and click Create Message to start a new message. Select push notification as the message type.


Under Compose, in the Message section, type in the message you would like to use, like "We just added new content, come check it out!"

Click Show All to reveal additional Web options including Icon and Title.

Require interaction determines whether the Push will disappear on its own. If Require interaction is set to True, the notification will stay on the screen unless the user either selects or dismisses it. If it is False, the notification will disappear on its own. 


The image field can be used to add images to web push notifications


Note: macOS only supports icons, but does not support images. The push notification will still display, but the image will be ignored. See here for more.

See Adding Images to Push Notifications for more information.


In the Message Composer, you can insert dynamic Leanplum values, like User Attributes, Event values, and other data tracked in Leanplum. This data is specific to each user, and will be inserted dynamically by Leanplum when we send the push notification.

You can use the Insert Value tool in the Message Composer (the {{ button), or manually type in variables using the Jinja templating language, which uses the handlebars-standard double curly braces {{ to indicate and enclose a dynamic element.

Hey {{ "first_name" value }}, it's time for your next workout!

Learn more about how to personalize your message with dynamic content here.


Important: If your iOS or Android native apps are integrated into the same Leanplum dashboard, you will have to apply targets in order to send only to web users. To send only to web users, apply a target of Technology > Browser version and choose 'is set'. By default, pushes will be set to users who meet the targeting requirements, regardless of platform.

Most of the options for push notifications can be segmented within the overall targeting of the message.  This means that you can target the message to a group of users A using targeting, and within that group, segment content and other options to sub-groups A-1, A-2, A-3, etc.  

For message content, you can add segments so different users receive slightly different messages based on criteria you set for each segment.  For example, you can create a segment whose language is "Spanish", and localize the greeting. You could also segment the sound of the push notification, or the Open Action.  You can also set data variables (above) to different values based on a segment.

Segments are essential to personalizing content of a message in Leanplum.

Learn more about that here

Choose an Open Action

The Open Action is what will occur when the user selects the web push notification. For web push, the Open URL action for web push is currently the only open action. In-app message open actions are not currently available for web push beta. 

  • Open URL — The user will be led to the URL you enter. URLs can also be personalized using event parameters or user attributes using the processed outlined in “dynamically customizing text.”

  • Default website — If you don't use a custom URL as your open action, users who select the web push notification will go to the Default website you set up in your App settings. To set a default website, click your name in the upper right-hand corner to get to App settings, then select Keys & Settings for your app. 


IMPORTANT: Make sure you have a Default website set up before sending web push notifications. The Default website setting is located in the Push notifications tab.


  • Using dynamic links in your open action
    You can also make your open-url links dynamic based on User Attribute or Parameter values.

    Using Leanplum’s Insert Value functionality, you can populate the productID dynamically, but you must send the product ID as a parameter value of the event which triggers the push notification. For the example above, you might want to send the user to a product they have previously viewed. You would put in a deeplink that looks like this:
{{Parameter “productID"}}

    You now have a message that will always lead a user to the product they were recently viewing, resulting in a highly personalized experience.




When configuring a message, one of the most important things is deciding when to have it delivered to your users. Leanplum provides a variety of methods for message delivery, and each for different objectives.

Let’s go through the delivery options based on the most common goals. Keep in mind that regardless of the delivery type, each message will only be delivered to users that fit the target you’ve set.

  • Immediate: “I want to send a push notification right away”
  • Scheduled: “I want to send a push notification on October 2nd, 2016”
    • Optimal time
      This uses a Leanplum algorithm to send the message to each user during the time of day that they have been most active, increasing the likelihood of engaging with the notification. Read our case study on the benefits of using Optimal time for your scheduled push notifications.
    • User’s timezone
      This delivers the notification at the same time, relative to each user's timezone.
    • Your local timezone (relative to GMT)
      For example, Pacific daylight savings time is shown as “GMT-7 time”.
    • UTC 
      This delivers the notification at the exact same time, all over the world.
  • Triggered: “I want to send users a push notification after they do something specific in the app”
  • Manual: “I want to bypass Leanplum’s automated delivery options and use a server-to-server call to trigger a push notification”

Note: If you have set Quiet Hours and the message delivery time falls into those hours, the message will be sent as soon as the Quiet Hours period has ended (i.e., if your Quiet Hours end at 6 am and a message was scheduled for 5:45 am, it will be sent at 6:01 am).

More options

Advanced Options

Web Push beta does not currently support Data or Mute Inside App advanced options. Please contact us if you have a use case that would benefit by support of these advanced options.

Preview and Send


We recommend previewing on your development device prior to sending to users.

What does Web Push look like on different browsers?

Web push styling varies by browser. On Android for example, web push is stylistically identical to native push. Below are some examples of what web push looks like across different browsers.

Chrome on Android



Firefox on Android



Chrome on Mac OSX


Firefox on Mac OSX


Getting the Most Out of Web Push

A few common and impactful campaign ideas might include:

Note that cross-channel use cases require setting the same user id across platforms.

  • Shopping Cart Abandonment: Use web push to remind potential customers of unpurchased items. Coordinate these web push reminders with other channels including traditional push notifications (for users who also use your app) or email.
  • Targeted Promotions: Promote special offers or deals to users based on their previous actions or interests. Send a web push to users when specific items become available or go on sale.
  • Re-engagement: Haven’t seen someone for a while? Stay of mind with a web push and bring them back with a targeted message encouraging to come back to your app or website.
  • App Promotion: App users are often more loyal than web users. If someone has made a couple of purchases from your brand maybe now is the time to use a web push with an app store download link to encourage them to download your app. It will increase the odds they’ll buy from you and not your competitors in the future.

Please contact with any questions or feedback on Web Push Beta.

Was this article helpful?
Have more questions? Submit a request