Overview
Building a Web Push Notification is similar to building other types of messages in Localytics. By now, you should have chosen a Goal and selected your Audience.
At the Creative stage, you'll be able to build the message in Localytics. Like with App Push Notifications, many parts of the builder are optional—so feel free to pick and choose which elements are important to your campaign.
Parts of a Web Push
While there is variance between browsers and operating systems (check out this FAQ for more), a few parts of your web push notification are consistent across different browsers. We'll go over these parts below, but for a quick definition of each, check out the image below.
Keep in mind, as indicated in the above screenshot—some parts of the web push are set by the browser/OS, and cannot be changed.
Message Preview
On the right side of your builder, you'll see the message preview. This will give you an idea of what your message will look like—but keep in mind it will vary from browser to browser. For more information on browser support, check out this FAQ.
You'll also see the option the preview the message a specific user. This is helpful to confirm that your Liquid language (also known as personalization) is formatted properly.
Optional Name and Title
The first thing you'll see in the Creative Builder is an optional name for your message. This helps differentiate the creatives should you employ A/B testing!
Under the optional name is the title. The title of the message will appear at the top of the web push, usually in bold. It's supported across all browsers and platforms (though it will look different depending on the specifications). It isn't required, but is a great way to grab a user's attention.
Chrome 76, Mac OS Mojave (dark mode)
Message
After the title is the actual content you're messaging about! This is only part of a web push notification that is required in order to send the message. Again, depending on the browser and platform the end user is using, it will appear differently.
Chrome 76, Mac OS Mojave (dark mode)
Message and Title Character Limits
You might be wondering about how long your message can be. This will vary by browsers, but it's best practice to fit all browsers and operating systems is 40 character title limit and 80 character body. For exact specifications for each browser, see the chart below.
| Chrome (Android) | Chrome (Desktop) | Firefox | Mac OS (All Supported Browsers) | |
|---|---|---|---|---|
| Title Character Limit | 30 | 50 | 40 | 40 |
| Body Text Limit | None | 150 | 140 - 190 | 80 |
Notification Icon
For most messages, you'll want to set the icon for the web push message at the app-level. This is done in the settings section of your account.
For some messages though, it might be helpful to set a specific icon for a single message. This could be good for breaking news or to target systems that don't support rich messaging.
To add an icon, toggle the Add Notification Icon option in the message builder.
Paste the URL of your custom web icon, and you're good to go.
Add Rich Media Content
Some browsers and operating systems can display an image with your web push message. (See this FAQ for specs). For browsers and operating systems that support rich media, you can either embed standard rich media content or personalize rich media content dynamically with Movable Ink.
Standard Media
Toggle the Add Rich Media Content switch on your message builder. With the Standard Media toggle button highlighted, paste the URL and specify the file type.
Image recommendations are 360x180 or a 2:1 aspect ratio, PNG and JPG are supported. For browsers or operating systems that don't support images (like Mac OS), Localytics will simply send the message without the image.
Dynamic Media
We've partnered with Movable Ink to help you deliver dynamic visual experiences directly within your push message. For more details on how to personalize images, visit Movable Ink.
Dynamic Media supports the Movable Ink Creative Tag. To find the Creative Tag, follow the step-by-step instruction below:
- Login to your Movable Ink Account
- Select the appropriate campaign from your Campaigns List
- Navigate to the Code tab
- From the sub-navigation, select In-App Messaging
- Copy the Creative Tag
Toggle the Add Rich Media Content switch on your message builder. With the Dynamic Media toggle button highlighted, paste the URL and specify the file type.
Deep Linking
Make your notifications even more valuable by dropping the user on the exact page they need to be to take action. A deep link will trigger when the user clicks the push message—so make sure to bring them to the right place on your website.
To add a deep link, toggle the Deep Linking option on the Message builder. Paste in your link, and you're all set.
Key/Value Pairs
The last thing you can add to your Web Push message is a Key/Value Pair.
Key/Value Pairs are a robust feature, so be sure to check out our article on them before getting started.
A/B Test Setup
You also have the option to set up A/B Testing for your web push message. An A/B test allows you to send multiple creatives to your end users and specify how you want the creatives distributed.
To add another creative click the + Add Creative button. Add up to 10 creatives to an A/B test. For more about A/B testing,check out our help article.
Next Steps
After you've finished building your creative, you'll want to head to the scheduling phase. Scheduling a Web Push is exactly the same as scheduling an app push message—so head over to those docs for more information.