Push Notifications are "Rich Text" format messages that get "pushed" from the FCM/APNS/VAPID servers to your subscribers. Devices subscribe or opt-in to receive push notifications usually through opt-in prompts like on Web Browsers or iOS Mobile Apps. Android Mobile App Subscriptions occur as soon as the device downloads and opens the app for the first time.
Mobile Push Notifications Guide
For mobile apps, please refer to our App Push Notifications Guide.
Here are common layout guides to follow for push notifications across all platforms:
|Character Limits||How many characters are allowed and recommended per platform?|
Emoji support is available across all platforms
|Images||Large images that appear with the notification. Supported by Chrome on Windows, macOS, and Android.|
|Icons||Supported on all platforms. Customizable for Chrome and Firefox.|
|Sounds||Not customizable on Web Push.|
|Web Push Badges||Small icons on Chrome for Android that appear in the top Notification Center when push is received.|
|Call to Action Buttons||Custom buttons that can support different actions or links.|
You can also control some aspects of the Notification Behavior and Payload such as how long the push will be held by FCM when the device is offline, notification override, and persisting notifications.
|Landing Page URL||When clicked, redirect users to a custom URL.|
|Time to Live||How long the push is saved on the FCM/APNS/VAPID servers if the user's device is offline.|
|Show Latest||Replaces notifications already present on the user's device if the current notification contains the same |
|Sticky Notifications||Requiring Web Push Notifications to be interacted with to be removed. Only available on certain platform versions.|
Because each platform uses a different visual layout for messages, the amount of content that is visible varies. For mobile apps, please refer to our App Push Notifications Guide.
The following are approximations for the number of characters in a notification based on the platform.
Emojis count as a single character. Simply copy & paste the emoji you want in the message or title. There are some limitations on Windows 7 and older Operating Systems.
|Windows: Chrome||~ 60 (Chrome 68+)|
~ 40 (Chrome 67 and lower)
|~ 120 (Chrome 68+)|
~ 0-150 (Chrome 67 and lower)
|Windows: Firefox||~ 40||~ 140-190|
|Mac: Chrome, Firefox, Safari||~ 20-40||~ 20-80|
|Best Fit Across All Platforms|
(including Mobile Apps)
|~ 20||~ 60|
Chrome 68+ does not have any restrictions with images added and shows about the same title (~ 60 characters on screen and ~ 60-80 characters in the Notification Center) and body (~ 126 on-screen and ~ 120-160 in the Notification Center) count.
Titles support ~ 40 characters and bodies support ~ 140-190 characters.
All mac browsers (except Safari) have the same limits due to the way macOS treats notifications. The features a notification is sent with (such as Icons and Sticky Notifications) affect the number of characters visible.
|Default||~ 40||~ 44|
|With icon||~ 32||~ 35|
|Sticky Notification||~ 30||~ 33|
|Sticky Notification with Icon||~ 21||~24|
|Notification Center Default||~ 39||~ 80|
|Notification Center with Icon||~ 30||~ 62|
There is no way to remove or edit the website icon on Safari without changing the default icon set on the iZooto dashboard.
|Default||~ 40||~ 90|
You can copy & paste emojis directly into the Title and Message fields of the notification. Or, you can use the emoji picker available on the Send Notification page on the panel.
Any standard emoji will work and you can use https://getemoji.com/ for more.
Emojis are controlled by the operating system that is receiving the notification and must support the emoji for it to be seen.
The website's URL cannot be changed on the push notification; it must always show the site origin the user is subscribed under.
The default behavior of notifications is that they show to users for roughly 5 seconds before they are moved to the Notification History where they are kept for 1 week before being removed by the Operating System.
You can make Notifications Sticky to stay on the screen longer for Chrome and Edge browsers. This means the notifications will stay on the screen till the user interacts with them.
Making notifications sticky does affect how notifications appear to users.
You can enable "Sticky Notifications" from the iZooto panel from the Send Notification page under the Advanced section.
You can also set the Rest API parameter
false if sending pushes using API.
Limited Support Across Platforms
Not all browsers and Operating Systems support this feature. If you turn it on, it will work for the users who are on eligible systems.
Because sticky notifications stay around, users may find it annoying that every notification you send sticks around. Therefore, we recommend keeping this disabled website-wide unless your website delivers high importance notifications. Users can always hover over the notification which will keep it on the screen to read its full contents.
Updated over 1 year ago