Progressier now offers a simple way to add an in-app notification center to your PWA, called the "Newsfeed". This feature encourages more users to opt-in for push notifications and helps those who might have missed important alerts. Plus, it's perfect for sharing updates or changes with your audience, keeping everyone informed and engaged!
How to integrate a Newsfeed into your PWA
The most common way to add a notification center to your PWA is by adding a button — often a bell icon — somewhere in the body of your app.
1. If you haven't, make sure to complete all the tasks in the Get Started section of the dashboard.
2. Go Widgets > Newsfeed in the Progressier dashboard and choose whether you want to use the Newsfeed to display Push Notifications, Announcements or Both.
3. Copy and paste the HTML code snippet anywhere in the body of your app:
<div class="progressier-newsfeed-button" style="position:relative;border:0px;background:transparent;outline:0px;cursor:pointer; width:20px; height:20px;"><svg fill="currentColor" width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M6 8a6 6 0 1112 0v2.917c0 .703.228 1.387.65 1.95L20.7 15.6a1.5 1.5 0 01-1.2 2.4h-15a1.5 1.5 0 01-1.2-2.4l2.05-2.733a3.25 3.25 0 00.65-1.95V8zm6 13.5A3.502 3.502 0 018.645 19h6.71A3.502 3.502 0 0112 21.5z"/></svg></div>
The snippet above contains a bell SVG icon, but you can replace it with anything you like. Adjust the CSS as needed to make it fit perfectly into your app. If you need help, feel free to reach out.
Pro tip: you can add the progressier-newsfeed-button class to any HTML element to make it open your notification center.
Adding content to the Newsfeed
1. Push notifications
All push notifications sent through our dashboard or API will automatically be displayed within your custom Newsfeed, allowing users to access notifications they may have accidentally dismissed.
2. Announcements
The Announcements section of the Progressier dashboard allows you to compose public news and updates to display within your PWA's notification center. Everyone with access to your app will see your announcements in their Newsfeed.