Skip to main content

How to Create a Web Push Notification Template

Heather
  • Updated

Please note: 

To unlock this capability, you will need to have added Web Push Notifications to your Optimove package. If you can’t see this feature in your Optimove instance, contact your CSM to find out more. 

 

 

Overview

You can design and save templates that can be re-used when you and your team are sending web push notifications via Optimove. 

Web push notifications work with any supported browser, whether that's on a computer or laptop, PC or Mac. Web push notifications can also be sent to some mobile devices, with Android support web push from browsers like Chrome, Opera, and Firefox, as well as from Progressive Web Apps (PWAs).

Please note:

While the Optimove Web SDK does support web push notifications to iOS devices, this is an experimental release from iOS, only supported in the iOS and iPadOS 16.4 Beta. To implement the web push notifications on iOS mobile devices, the website needs to be added to the home screen. This process is straightforward and can be accomplished right from the share screen. To be recognized as a Home Screen web app, your website should be equipped with a web application manifest file. Otherwise, it will be saved as a Home Screen bookmark and open in the browser. In the case that your site is already a Progressive Web App (PWA), you won't need to make any additional updates. 

 

Configure Push Prompts

If you haven't already configured web push prompts, you can learn how to in this article. 

 

How to Create a Web Push Template

To access your existing web push notification templates, and create new ones, navigate to the Templates area and select Web Push Notification.

Screen Shot 2023-09-19 at 12.54.03.png

 

Working with Templates

Add a new template by clicking the blue + symbol, or by clicking on Create New Template. 

webpush.png

 
From the Templates area, you can edit, duplicate, delete, and create new templates. 
 

Name and Identifier

You must give each template a name to identify the template when sending a web push notification. From the name, a unique identifier will also be generated.

Screen Shot 2023-09-19 at 12.57.19.png
 

Web Push Template Content

As you add content to the notification you can preview how this will look on a user's desktop.

Screen Shot 2023-09-19 at 12.58.40.png
 
Click the Mac tab to see how the notification will look on an Apple Mac.
Screen Shot 2023-09-19 at 12.58.59.png
 
Or, preview how it might look for Android users who open the web push notification on their mobile phones.
Screen Shot 2023-09-19 at 12.59.15.png
 
Please note:
Web push notifications for PWAs (Progressive Web Apps) are currently only available for Android users. Web push notifications for iOS are expected to be live in late 2023.
 
 

Personalization

In your text, you can also add user attributes to personalize the message. You can learn more about adding Personalization Tags to your templates here, and find out about adding Conditional Language here. 

Screen Shot 2023-09-19 at 13.00.05.png

 

Image

If you want to add a picture to your notification, click "Choose Image"' to open your Media Library. Here, you can upload a new image, select an image you have previously uploaded, or search the Unsplash stock image library.
 
Please Note:
Images are not supported by the Firefox Browser on any platform and only by the Chrome Browser on macOS (Monterey 12.4 and higher).
 
To upload a new image, click the upload primary action button. Click "Choose File" to browse your computer and find the image. Select any tags to help you find the image later or to add a new tag, just start typing and click "Create new tag". Click "Upload" to add the image to your media library and include this in your push notification.
Screen Shot 2023-09-19 at 13.01.13.png
 
To use an image you have previously uploaded, simply select the image and click the primary action button. You can either scroll through your library or filter by the tags you have added previously.
 
To use an image from the Unsplash stock image library, click the "Stock" tab and enter one or more keywords in the search box. Scroll through the results and select an image to see more information about it. Once you have found the image, click the camera primary action button to add this image to your media library and include this in your push notification.
 
To remove the image from your push notification, click "Clear Image".
 
Please note:
Any uploaded image should have the dimensions 364 x 180. The image can be larger, but this is the preferred aspect ratio.
 

Advanced Options

To open a URL or add a data payload, expand "Advanced".

 

Open a URL

To open a URL when the push notification is tapped by the user, toggle the "Open URL" switch and enter the URL you want to open.

Screen Shot 2023-09-19 at 13.02.09.png

 

Data

To add an arbitrary meta-data object to the push notification, toggle the "Data" switch and enter a valid JSON object into the editor. Additional data can be consumed by the SDK, please refer to the integration guide for further information.

Screen Shot 2023-09-19 at 13.03.46.png

 

Icon

You can override the default icon for this notification by clicking CHOOSE IMAGE to open your media library. Here, you can upload a new icon or select an icon previously uploaded. 

Screen Shot 2023-09-19 at 13.04.13.png

To upload a new icon, click the upload primary action button. Click "Choose File" to browse your computer and find the icon. Select any tags to help you find the icon later or to add a new tag; just start typing and click "Create new tag." Click "Upload" to add the icon to your media library and use this for the notification.
 
To use an icon you have previously uploaded, simply select the icon and click the primary action button. You can either scroll through your library or filter by the tags you have added previously.
 
Please note:
This feature is only supported on Windows.
 

Review

Lastly, review the content you have set. Click 'Save' when you are done making changes.  
 

Related articles