Introduction to web push

Web push notifications allow you to maintain communication with customers through a web browser. The unobtrusive character of web push notifications will keep your message away from spam folders or ad blocking software. The notifications will always be displayed to users who have agreed to receive them.

The following combinations of operating systems and browsers are supported for web push notifications:

  • Windows: Chrome, Edge, Firefox, Opera
  • macOS: Firefox, Chrome, Edge, Opera
  • Android: Chrome, Samsung Internet, Firefox, Brave

Benefits


  • Good way of increasing the number of your subscribers - users more eagerly agree to receive web push notifications rather than share their email address.
  • Great deliverability in real time
  • Good engaging results as directing traffic to a particular URL is only one click away
  • Good way to increase the traffic (for example, with a catchy notification title)
  • Good way to increase conversion as users can subscribe to web push notification to be informed about the product availability or discounts
  • The possibility of personalizing content of notifications by using Jinjava variables (such as the first name of the user, the number of collected loyalty points, and so on).

Anatomy of web pushes


A web push notification consists of the following elements:

An example of a simple web push notification
An example of a simple web push notification
No. Web push element Function Recommendations & possibilities
1. Title This is the top text of your notification - We suggest a 50-character limit to avoid being cut off, but the length depends on the browser
- You can personalize the title using inserts and emojis
2. Message This is the main content of your notification - We suggest a 100-character limit to avoid being cut off, but the length of the text vary across different browsers
- You can personalize the message using inserts and emojis
3. Icon An icon helps in brand recognition - We recommended using a size of 192x192
- To use an icon in the notification, upload the icon first in Synerise > Data Management > File.
4. Large image On macOS, it serves as an expanded icon, while on Windows and Android, it acts as a custom image - Make sure to follow the image requirements for optimal display
- To use a large image in the notification, upload the image first in Synerise > Data Management > File
5. Action buttons They redirect users to a URL you indicate - You can add up to 2 action buttons
- You can personalize the text on the button by using inserts and emojis
-You can add inserts to the URL
6. Close button This button closes notification. The browser adds a close button to the notification. n/a
7. Domain The domain is automatically included in the notification. n/a
8. Browser badge The browser defines the browser badge. n/a

How it works


After you configure web push notifications, a browser user receives a request from the browser to receive web push notifications (also called an agreement form). If a user agrees, then you can send web push notifications to this user and they are received only when a user opens a browser before the web push notification expires.

In Synerise, you can:

  • use the browser’s agreement form (one step form)
  • use your own agreement form (first your own customized agreement form and then the browser’s agreement form)

Examples of use


You can become familiar with the collection of web push notification use cases

Requirements


Creating web push


  1. Define the recipients of the web push notification.
  2. Prepare the content of the web push notification (web push templates).
  3. Schedule the web push notification.
  4. Define the UTM parameters.

Sending methods


Web push notifications are sent in two ways:

  1. Automatically by using the Automation module. In response to customer activity, update of profile data, or other events (check the list of triggers that start a workflow), a web push notification can be sent to customers.
  2. Manually by clicking the Send button while creating web push notification.
😕

We are sorry to hear that

Thank you for helping improve out documentation. If you need help or have any questions, please consider contacting support.

😉

Awesome!

Thank you for helping improve out documentation. If you need help or have any questions, please consider contacting support.

Close modal icon Placeholder alt for modal to satisfy link checker