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

Compatibility

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 Mac OSX Windows PC
Chrome YES NO YES YES
Firefox YES NO YES YES
Opera YES NO NO NO


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.

Compose

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.

Screen_Shot_2017-06-08_at_10.51.34_AM.png

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

Screen_Shot_2017-06-12_at_11.38.18_AM.png

See Adding Images to Push Notifications for more information.

Personalize

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.

Segment

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 opens the web push notification.

IMPORTANT: In-app message open actions are not currently available for web push beta.

Leanplum offers the Open URL action for web push:

  • 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”.
    • Dynamic links
      You can also make your links dynamic based on a User Attribute or Parameter values.

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

           https://www.ecommerceApp.com/product/{{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.

Screen_Shot_2017-06-12_at_10.58.10_AM.png

  

Delivery

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).

For more information on Messaging in general, please visit the Messaging Section of our Product Guide.

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

Preview

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

chromemobile.png

 

Firefox on Android

firefoxmobile.png

 

Chrome on Mac OSX

chromedesktop.png

Firefox on Mac OSX

firefoxdesktop.png

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 support@leanplum.com with any questions or feedback on Web Push Beta.


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