Web push notification templates are reusable message blueprints that you can select in campaigns and journeys to send your users as web push notifications. They can contain text, links, and images, and you can customize them with user profile data, event data, data feeds, and Catalog data.
These messages can appear on desktop and mobile devices if your user has allowed them.
TIP
Need a refresher on templates or web push? Check out these articles:
# In this article
# Permissions
To create and edit templates, you'll need the Create and Manage Templates permission.
# Creating a web push template
To create a web push notification template you can reuse for a single or multiple web push campaigns:
Go to Content > Templates.
Click New Template > Web Push.
Give your template a name that will make it easy to find when you (or your teammates) are setting up campaigns or journeys. This field has a 150-character limit.
-
Click Create Template.
There are other ways to create templates, too: as you're setting up a new campaign, and by using Iterable's API. For more info, read Working with Templates.
# Web push template details
To update template details such as message type, title, body, icon etc., open it up and configure the options in the Details area.
To update these options, click Edit Details. As you make changes, the template design (on the right side of the page) will update. When you're done editing, click Save or Cancel.
Below are descriptions of the settings in the Details area.
# Template name
The name of your template, which you can use to identify the template in Iterable. This is for internal use and displays in Iterable's template list.
# Message type
The category to associate with your template, which affects who receives campaigns. A user needs to be subscribed in order to receive a web push notification. For more details, see Message Channels and Message and Message Types Overview.
# Title
The title that appears on the web push notification. The title is the first thing users see, so make it engaging!
Titles may be truncated in the notification if they are too long. When a title is too long, the operating system will truncate it and add an ellipsis as shown in the example below:
Character limits for truncation vary by operating system, but you should aim for under 40 characters if you want to avoid it for all users.
Title truncation limits:
| Operating System | Title limit |
|---|---|
| Windows | 50 characters |
| macOS | 40 characters |
| Android | 40 characters |
| iOS | 40 characters |
When a title is truncated, the user can view the full notification by expanding it.
# Body
This is where your message goes! Make a connection with your users.
The message body may be truncated in the notification if it's too long. Character limits for truncation vary by operating system. Aim for under 100 characters to avoid truncation for all users.
Body truncation limits:
| Operating System | Body limit |
|---|---|
| Windows | 120 characters |
| macOS | 100 characters |
| Android | 100 characters |
| iOS | 100 characters |
When a body is truncated, the user can view the full notification by expanding it.
# Icon
An image to include with your web push notification. The image's positioning depends on the operating system. Use the Preview tool to show you how the icon will appear on Windows and MacOS, and adjust as needed. Typically, the icon is a brand logo or a small image that represents the message.
Icons are not supported on the Safari browser, so they won't display for those users.
Image requirements:
- Security - The image URL must use HTTPS.
- Supported file types - PNG files work best with web push, but you can also use JPG and GIF files. SVG files are not supported.
Image dimensions and size:
- Size - Keep the image size under 1 MB.
- Dimensions - The image should be square, with a minimum size of 192x192 pixels. Non-square images will be cropped to fit a square. Images are usually resized in the notification which varies in size.
# Data feeds
Data feeds allow you to fetch user-specific data from external URLs (your own or third-party) and use it to personalize your messages. For example, a restaurant chain might use a data feed to fetch information about locations close to the user, and then highlight them in their messages. To tell the data feed which user you need information for, you can pass query parameters in the data feed URL.
To enable data feeds, check Data Feeds. Then, select an existing data feed from the dropdown or click Add a New Data Feed.
For more information about data feeds, related configuration options, and how to use them, read Personalizing Templates with Data Feeds.
# Click location
The URL to load when a user taps the notification.
The URL must use HTTPS. You may pass Handlebars expressions in the URL to personalize the link for each user (however, you must URL-encode the Handlebars expressions when it contains special characters, such as an email address).
# Locales
Use locales to define the content this template uses for users in different locales. This feature doesn't translate for you, but provides a place for you to put localized content.
For more information, read Creating Content in Multiple Languages.
# Previewing a web push template and sending test messages
After configuring and designing your template, preview it and make any necessary fixes. To check your template, use the Preview page or send a test message.
# Previewing your template
To see what your web push notification will look like when rendered with different combinations of user data, data feeds, and Catalog data, use the Preview page. On this page, you can load a user profile and see how the template will render for that user.
NOTE
Previewing a template for a specific user won't make any changes to your template. However, you can use the Details button (on the bottom-left corner of the page) to update your template's details.
To preview a web push notification template with user data:
-
With the template open, click Preview.
-
Enter the email address of a user in your project and click Load user data. That user's data will load.
Feel free to play around with this data, modifying it as needed — your changes won't get saved to the user profile. Treat this page as a playground, and check how different combinations of data will cause your template to render. Make sure that the template looks correct in all the different ways it may appear to your users.
TIP
If the preview doesn't update after you've edited or loaded data, click the refresh icon (at the top-right corner of the previewer).
To see how your template will render with a data feed loaded, click Load data feeds. Feel free to edit the loaded data feed data, to see how different data will look. This won't affect the data feed itself.
Click Exit preview to return to the template page.
For more information on previewing templates and campaign templates with data, check out Previewing with Data.
# Sending a test message
Test messages allow you to validate your setup and experience this template from a customer's perspective.
You can send a test message to any of the options in the dropdown to see how your message works live, and check for any issues in the configuration.
Message recipients are capped at 50, to prevent accidentally sending test messages to a production list.
For more information, read Sending Test Messages.
Note
The user receiving a test message must have a browserTokens array associated
with their profile.
# Sending a web push campaign
You've built and tested your template. Now, you can use it with some campaigns. To learn how, read:
- Sending or Scheduling a Blast Campaign
- Activating a Triggered Campaign
- Tutorial: Build Your First Journey
As you create a campaign (whether standalone as part of a journey), you select a template to use as the starting point as the campaign's content. The campaign you just created will get its own copy of the template, so you can customize it however you like without affecting the original template.
Similarly, if you change a template that you've already used in a campaign, your changes will only affect the template itself, not existing campaigns that use the original template.
TIP
To apply template changes to a campaign you've already created, you can manually make the same changes to the campaign's template, create a new campaign using the updated template, or reselect the updated template for the unsent campaign.