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

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.

if you don't have a project created in firebase:

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.

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:

• 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.

2- Add the Service Worker to your site

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, 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. If you need to use a different name, please let us know.

3- Add your opt-in personalization

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.

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:

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

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, which will be used in the backend to send notifications.