# Web Notification

To enable web push notification for vendors to receive notifications on new order placement. You will have to setup firebase web push notification.

### Create a web app on firebase

Here are the steps to create a web app on firebase:

* Go to your firebase console
* Click on the settings/gear icon on the top left section of your console
* Click on project settings

![](https://content.gitbook.com/content/qpzpUHpvEwV9ShSZ1v55/blobs/VS46eWi0EsRKdjoPvxOh/image.png)

* On the project settings page, scroll down to the "Your apps" section
* Click on "Add app" button

![](https://content.gitbook.com/content/qpzpUHpvEwV9ShSZ1v55/blobs/cSMwtL7Uw1s3C8q75TI9/image.png)

* A dialog will appear. Click on the web icon **\</>**

![](https://content.gitbook.com/content/qpzpUHpvEwV9ShSZ1v55/blobs/881vQeSwYfNZM3FbIaOW/image.png)

* A app registration page with show. Fill in the required info click **Register app.**

![](https://content.gitbook.com/content/qpzpUHpvEwV9ShSZ1v55/blobs/6FZt97cEPvOTX1YPfikB/image.png)



* After that you can click on the **Continue to console**

&#x20;

## Add Credentials to Backend

After creating a web app on the firebase console, you will need to add some info to backend for web notification to be able to work.

1. Go the backend
2. Click on setting menu
3. On the settings page click on **Push notification setting(Firebase)**

<figure><img src="https://3544468392-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqpzpUHpvEwV9ShSZ1v55%2Fuploads%2FbLMMHlFD8d8E6FabXuIu%2Fimage.png?alt=media&#x26;token=b7a771a9-5576-4775-841d-9027f5ff39b3" alt=""><figcaption></figcaption></figure>

All but one of the required info on the page get be gotten form the **Your apps** section on firebase console.

1. Open firebase console and go to project settings (follow the instructions from above)
2. Scroll to the **Your Apps** section and find the Web App you created following the instructions above.

![](https://content.gitbook.com/content/qpzpUHpvEwV9ShSZ1v55/blobs/Cz2K4INGJRFVJ0fb9iFy/image.png)

Copy the values from the **firebaseConfig** section, then paste them in the backend section.

You will not **Web Push Key Pair** in this section. Just save the the rest and follow the instruction below on how to get the Web Push Key Pair value.



## Web Push Key Pair

To get your project Web Push Key Pair. Go to project settings again. On the top click on **Cloud Messaging.**

![](https://content.gitbook.com/content/qpzpUHpvEwV9ShSZ1v55/blobs/FZUnTJxcRei9zOLkRU6Q/image.png)

1. Open the [Cloud Messaging](https://console.firebase.google.com/project/_/settings/cloudmessaging/) tab of the Firebase console **Settings** pane and scroll to the **Web configuration** section.
2.
3. In the **Web Push certificates** tab, click **Generate Key Pair**. The console displays a notice that the key pair was generated, and displays the public key string and date added.
4. The **Key pair** is the **Web Push Key Pair** for backend.
5. Copy the Key pair from firebase and paste it into the Web Push Key pair on the backend

