How do you set up web push notifications using BLOX Notifier?

Setting up Notifier is a two-part process: you must first create a Firebase account that will handle your messages then you must add the appropriate files and API keys to the Notifier settings panel.

NOTE: Our web push notifications use Firebase and the browser Push API, which is not yet available on iOS mobile devices. Thus, the bell icon is hidden in that environment.

Set up Firebase

Firebase is a free Google platform which works with browsers and native apps to power notifications, push alerts, and other applications.

Create a Firebase account at firebase.google.com. Note that this will be the permanent account for your notifications, so it is a best practice to share the account with multiple directors or owners within your organization.

1. Go to project settings (as indicated by a gear icon next to the Project Overview menu).
2. Click on “Service accounts” in the settings menu.
3. Click on “Manage all service accounts”
4. Click on “Create service account”
5. Name the account “firebase adminsdk” (this is just the recommended name - you can name it whatever you want as long as it has the right permissions).
6. Add a description, such as “TownNews push notifications.” Again, this description can be whatever you want.
7. Click create.
8. Then when asked to select a role, choose “Firebase” on the left and “Firebase Admin” on the right.
9. Click on "Service accounts" at the top of the screen.
10. Click “Create  new private key” and select Json. Download this file to your computer and store it in a location (such as on your desktop) where you can find it again and upload it in the next few steps).
11. Go back to Project Overview -> Settings and then click on Cloud Messaging.
12. Under Project credentials note the keys associated with “Server key” and “Sender ID.” These will be used in the next steps.

Set up Notifier Firebase integration

The Notifier Application settings must be set up with the information created in your Firebase account, above.

1. Go the Notifier settings at Community -> Notifier -> Application settings -> Push Notifications.
2. Upload the Firebase Json file that you created in Firebase to the Google Service Role Access File area.
3. Get the Key ID and paste it into Google Desktop Notification API Key.
4. Get the service account’s Unique ID and paste it into the Messaging Sender ID field.
5. Save the Application settings.

At this point, you can create Topic IDs, Labels and Channels for your push notifications if you have not done so already.

Note -- Once a Topic ID is created it should not be changed. It can be deleted, or a new one added, but it should not be changed. Changing of the Label is fine and will have no adverse effects.

Adding a notification icon to your website

In order to add the web notification interface to your website, you'll need to use the "Utility: Notification controls" block. 

1. Create a test section if you don't have one already.
2. Add the "Utility: Notification controls" block to your site navigation or in another location on your site.
3. You can choose between the presentation of "in the nav" or "stuck to bottom"

---

Note: You can include multiple icons on the site, or one on mobile and one on desktop, etc. Note that if you place one of the icons blocks into a region that is hidden on desktop or mobile, it will affect the icon (even if it is in "stuck to bottom" mode).

---

1. At this point you should be able to sign up for web push notifications in the block on the test page.
2. Send a test push from the BLOX Notifier application.
3. If you are able to receive the push notification, you can go ahead and launch the feature.
4. In order to go "live" with this, you would essentially be moving the bell icon set up from your test section to the front page.