> For the complete documentation index, see [llms.txt](https://academy.gopersonal.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://academy.gopersonal.ai/developers/channels-setup/web-push-notification.md).

# Web Push Notification

Para enviar notificaciones web push a tus clientes, primero debes crear la integración en el admin de gopersonal y completar la configuración siguiendo estos pasos:

### 1- Crear la integración de Web Push <a href="#id-1-create-the-web-push-integration" id="id-1-create-the-web-push-integration"></a>

Ingresá a Integraciones y seleccioná Web Push luego de hacer clic en Nueva Integración.

Para autenticar una cuenta de servicio y autorizar su acceso a los servicios de Firebase, es necesario generar un archivo de clave privada en formato JSON.

Si todavía no tenés un proyecto creado en Firebase:

1. **Acceder a Firebase**
   * Ingresá a la Consola de Firebase.
   * Iniciá sesión con una cuenta de Google.
2. **Crear un nuevo proyecto**
   * Hacé clic en **"Crear un proyecto"**.
   * Asigná un nombre al proyecto y continuá con la configuración.
   * Deshabilitá **Google Analytics** si no lo necesitás y finalizá la creación.
3. **Agregar una app al proyecto**
   * Dentro del proyecto de Firebase, hacé clic en **"Agregar una app"**.
   * Elegí la plataforma: **Web**
   * Asigná un nombre y hacé clic en **"Registrar app"**.

\
Una vez dentro del proyecto, seguí estos pasos para generar el archivo de clave privada de la cuenta de servicio:

* En la consola de Firebase, andá a Configuración > Cuentas de servicio.
* Hacé clic en Generar nueva clave privada y luego en Generar clave para confirmar.
* Descargá el archivo JSON y subilo en la Integración.

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

El Service Worker (SW) es un script de JavaScript que se ejecuta incluso cuando el navegador está cerrado. Esto le permite a gopersonal enviar notificaciones web push a los usuarios con un token activo, sin importar si están online o no. gopersonal utiliza Firebase para enviar el mensaje push al SW, que luego muestra la notificación al usuario.

Ingresá a este [link](https://admin.gopersonal.ai/gp-firebase.js), hacé clic derecho y seleccioná "Guardar como" para descargar el archivo del Service Worker. Luego subí el archivo al subpath de tu dominio. El SW debe quedar accesible en [www.tusitio.com/gp-firebase.js](http://www.yoursite.com/gp-firebase.js). Si necesitás usar otro nombre, avisanos.

### 3- Agregar tu personalización de opt-in <a href="#id-3-add-your-opt-in-personalization" id="id-3-add-your-opt-in-personalization"></a>

Para enviar notificaciones web push a tus usuarios es indispensable obtener su consentimiento y asegurarte de que se suscriban para recibirlas. Ofrecemos templates personalizables que facilitan agregar recolectores de opt-in en tu sitio.\
\
En los templates debés completar la sección de Firebase en las variables.

#### Para completar las variables debés obtener la configuración web **(`firebaseConfig`)**

1. Andá a **Configuración del proyecto** (ícono de engranaje ⚙️ en la esquina superior izquierda).
2. Seleccioná la pestaña **"Configuración general"**.
3. En la sección **"Tus apps"**, buscá la configuración de la app Web.
4. Copiá los valores del JSON de configuración que aparece en el código, similar a este:

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

&#x35;**.** Configurar Web Push: obtener la VAPID Key:

1. En la **Consola de Firebase**, andá a **Cloud Messaging**.
2. En la pestaña **Configuración**, buscá la sección **Certificados web push**.
3. Hacé clic en **"Generar clave"** si todavía no existe una.
4. Copiá la **clave VAPID pública**

### 4- Crear la integración de Web Push <a href="#id-3-add-your-opt-in-personalization" id="id-3-add-your-opt-in-personalization"></a>

1. Ingresá a <https://admin.gopersonal.ai>
2. Luego andá a Integraciones y seleccioná la integración de Web Push
3. Obtené la server key de Firebase
   1. En Firebase, en el menú izquierdo, hacé clic en el ícono **⚙️ Configuración**.
   2. Seleccioná **Configuración del proyecto**.
   3. Dentro de Configuración del proyecto, abrí la pestaña **Cuentas de servicio**.
   4. En la sección **Firebase Admin SDK**, hacé clic en **Generar nueva clave privada**. Se descargará un archivo JSON.
4. Seleccioná la server key de Firebase descargada en el paso 3