Web push notifications
Once you've enabled web push notifications on your website, your web visitors will start seeing a subscription prompt. You will be able to send notifications to these users after they have subscribed to your website notifications.
Anatomy of a Web Push Notification Message:-
There are 4 key elements that constitute a push notification - Title, Description, Landing Page URL, Icon and Banner Image and Call To Action Buttons. It is important to understand the features of Web Push Notifications like Banner Image and Call To Action Buttons are only available for Chrome. Here is a breakdown of how each of these elements-
Title - Every notification needs an eye-catching title. The catchier the title, higher are the chances that your subscribers will click on it.
Description - A description is a short message that supports your title and offering. Write all that needs to be conveyed but squeeze it in the form of a short message making sure you don’t compromise with its effectiveness. You can even add emojis to your notification's title and description. It is important to note that there is no definite character limit for Notification Title or Description. Depending upon the device, Desktop or Mobile characters get trimmed. Both the title and description can be deep linked to a specific URL.
Website Domain - The website domain which has sent the notification.
Call to Action Buttons - You can add up to 2 CTA Buttons in a notification. CTA Buttons can be only added to Chrome notifications. Firefox and Safari are yet to extend support to this. These buttons can be used to trigger different actions – for eg taking the user to a landing page, sending out a social message (Tweet), triggering the Play Store or the Dialer.
Icon - You can add an icon to your notification to build a better recall. The default icon is a bell icon. Users are nowadays bombarded with notifications, hence it becomes essential to let your users know when your push notification pops up. Adding your logo helps users in building a brand recall. The recommended icon should be 100*100px and should be less than 20kb in size.
Banner Image - Banner size images were introduced recently with Chrome 56. This was one of the most awaited features and rightly so - Visuals help in impactful communication and can help you amplify your message by as much 189%. As much as your notification title and the message should be eye catchy, adding a bright banner image related to your notification content will simply just increase your chance of getting that click.
Recommended Dimension : 360*240px. Size of the banner image should be less than 240kb or less.