# Web Push Notification

To send web push notifications to your customers, you must first create the integration in the gopersonal admin and complete the configuration by following these steps:

### 1- Create the Web Push integration <a href="#id-1-create-the-web-push-integration" id="id-1-create-the-web-push-integration"></a>

Go to Integrations and select Web push after Clicking New Integration.

To authenticate a service account and authorize its access to Firebase services, you need to generate a private key file in JSON format.

&#x20;if you don't have a project created in firebase:&#x20;

1. **Access Firebase**
   * Go to Firebase Console.
   * Log in with a Google account.
2. **Create a New Project**
   * Click on **"Create a Project"**.
   * Assign a name to the project and proceed with the setup.
   * Disable **Google Analytics** if not needed, and complete the creation.&#x20;
3. **Add an App to the Project**
   * In the Firebase project, click on **"Add an App"**.
   * Choose the platform: **Web**
   * Assign a name and click **"Register App"**.

\
Once inside the project follow these steps to generate a private key file for the service account:&#x20;

* In the Firebase console, go to Settings > Service accounts.
* Click on Generate new private key, then click Generate key to confirm.
* Download the JSON file and upload it in the Integration.&#x20;

### 2- Add the Service Worker to your site <a href="#id-2-add-the-service-worker-to-your-site" id="id-2-add-the-service-worker-to-your-site"></a>

The Service Worker (SW) is a JavaScript script that runs even when the browser is closed. This enables GoPersonal to send web push notifications to users with an active token, regardless of their online status. GoPersonal uses Firebase to send the push message to the SW, which then displays the notification to the user.

Follow this [link](https://admin.gopersonal.ai/gp-firebase.js), right-click, and select "Save As" to download the Service Worker file. Next, upload the Service Worker file to your domain’s subpath. The SW should be accessible at [www.yoursite.com/gp-firebase.js](http://www.yoursite.com/gp-firebase.js). If you need to use a different name, please let us know.

### 3- Add your opt-in personalization <a href="#id-3-add-your-opt-in-personalization" id="id-3-add-your-opt-in-personalization"></a>

To send web push notifications to your users, it's essential to obtain their consent and ensure they subscribe to receive them. We offer customizable templates that make it easy to add opt-in collectors to your site. \
\
In the templates you must complete the Firebase section in variables.&#x20;

<figure><img src="/files/NrJsNkTJAtsT4a6ufmhn" alt="" width="375"><figcaption></figcaption></figure>

#### In order to complete the variables you must obtain the Web Configuration **(`firebaseConfig`)**

1. Go to **Project Settings** (gear icon ⚙️ in the top left corner).
2. Select the **"General Settings"** tab.
3. In the **"Your Apps"** section, find the configuration for the Web app.
4. Copy the values in the JSON configuration that appears in the code, similar to this:

   ```json
   {
     "apiKey": "AIza...",
     "authDomain": "your-project.firebaseapp.com",
     "projectId": "your-project",
     "storageBucket": "your-project.appspot.com",
     "messagingSenderId": "123456789",
     "appId": "1:123456789:web:abcdef123456"
   }
   ```

&#x35;**.** Configure Web Push: Obtain the VAPID Key:

1. In the **Firebase Console**, go to **Cloud Messaging**.
2. In the **Settings** tab, find the **Web Push certificates** section.
3. Click on **"Generate Key"** if there isn't one already.
4. Copy the **public VAPID key**

### 4- Create the Web push Integration <a href="#id-3-add-your-opt-in-personalization" id="id-3-add-your-opt-in-personalization"></a>

1. Go to htpps\://admin.gopersonal.ai&#x20;

2. Then Integrations and select the Web Push integration

3. Get the Firebase server key&#x20;

   1. In firebase,  In the left menu, click the **⚙️ Settings** icon.
   2. Select **Project settings**.
   3. Inside Project settings, open the **Service accounts** tab.
   4. In the **Firebase Admin SDK** section, click **Generate new private key**. A json will be downloaded.&#x20;

4. Select the firebase server key dowloaded in step 3

<figure><img src="/files/Gm11oA5O3VMVA94gxOze" alt="" width="375"><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://academy.gopersonal.ai/developers/channels-setup/web-push-notification.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.