> For the complete documentation index, see [llms.txt](https://woowup-docs.gitbook.io/woowup-developer-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://woowup-docs.gitbook.io/woowup-developer-docs/push-notifications/configuracion-push-en-vtex-legacy.md).

# Configuración Push en VTEX Legacy

### Instrucciones para activar notificaciones Push

Habilitar el envío de notificaciones push en la web requiere de la creación de un service worker y de la inserción de dos scripts.

***Aclaración**: Es un requisito excluyente tener habilitada la funcionalidad de* [***Web Tracking***](/woowup-developer-docs/web-tracking/web-tracking.md) *para poder identificar al usuario y permitirle ver el pop up de suscripción.*

#### Crear un Service Worker

{% hint style="info" %}
Si tienes un Service Worker ya en funcionamiento, dirígete hacía [*Ya poseo un Service Worker*](#ya-poseo-un-service-worker)
{% endhint %}

Es necesario que manejes las notificaciones entrantes del navegador en un Service Worker alojado en tu sitio. Los pasos a seguir son los siguientes:

1. Descarga y descomprime el siguiente archivo:

{% file src="/files/Igcl4mKNa0rLy4X1nc67" %}

 2\. Accede a tu portal de administración en vtex. Esto se hace ingresando a 

`https://{{tu-sitio-vtex}}.myvtex.com/admin/portal`

 3\. Ingresa a configuración de tu sitio (con el ícono de la tuerca).

![En el caso ejemplo la tienda se llama WoowUp](/files/JumMEjDIFWqbLF9KbSRs)

4\. Ingresa en la pestaña Código

![](/files/qnNzlDhzIH5WVpeD7aVo)

5\. Dirígete a Nuevo, y selecciona Cargar Archivo

![](/files/rvJYPKL1urtvOlJz6LRw)

6\. Carga el archivo nuevo.

7\. Dirígete a nuestra página principal y haz click derecho. Selecciona Inspeccionar. (Puede cambiar según el navegador y su idioma).

![](/files/HUqhwYzxLxExxBQazD4p)

8\. Aparecerá una nueva ventana llamada Herramientas del desarrollador. Ir hacia la pestaña Aplicación. Si el service worker cargó bien, se mostrará el siguiente mensaje:

![](/files/VZr1kbZ8ws5S6K2sA63s)

9\. En caso contrario, sigue los siguientes pasos:

9.1: Ir hacia el panel de administración. `https://{{tu-sitio-vtex}}.myvtex.com/admin`

9.2: Dirigirse hacia:

![ ](/files/h0PBlaPPWtzSZBnqAJTf)

9.3: Nos aparecerá una pantalla, hacemos click en CMS -> HTML Templates -> Home

![](/files/K79GmWY8rSd9EtRY6E61)

9.4 Aparecerá un texto largo donde deberas insertar el siguiente texto, antes de la linea `</head>`

```
<script type="text/javascript">
    navigator.serviceWorker.register("files/service-worker.js", { scope: "/" })
</script>
```

9.5 Presiona el botón Save Template y reintente el paso 8.

#### Ya poseo un Service Worker

En cuyo caso, solo deberías modificar tu service worker agregandole esta sentencia.

```
importScripts("https://assets-cdn.woowup.com/js/service-worker.js");
```

### Agregar Scripts a VTEX.

1: Ir hacia el panel de administración. `https://{{tu-sitio-vtex}}.myvtex.com/admin`

2: Dirigirse hacia:

![ ](/files/h0PBlaPPWtzSZBnqAJTf)

3: Nos aparecerá una pantalla, hacemos click en CMS -> HTML Templates -> Home

![](/files/K79GmWY8rSd9EtRY6E61)

4\. Agregamos los siguiente antes de la linea `</head>`

```html
<script src="https://assets-cdn.woowup.com/js/push-notifications.min.js" type="text/javascript"></script>
<script type="text/javascript">
    WU.pushNotifications('Your-PublicKey', 'Your-InstanceID');
</script>
```

{% hint style="warning" %}
Debes agregar los scripts en el encabezado de la página de entrada.
{% endhint %}

{% hint style="warning" %}
Es importante que respetes el orden de los scripts.
{% endhint %}

{% hint style="warning" %}
En el script #2 **DEBES** reemplazar "Your-PublicKey" por la **clave pública** de WoowUp. La puedes encontrar en la página de configuración de WoowUp, en la sección "Mi cuenta".
{% endhint %}

![](/files/tMaFNH8p6CFjWwH5ytJ7)

{% hint style="warning" %}
En el script #2 **DEBES** reemplazar "Your-InstanceID" por tu Instance ID de WoowUp. Lo puedes encontrar en la página de configuración de WoowUp, en la sección “Notificaciones Push".
{% endhint %}

Para probar la correcta instalación y configuración de la app, puedes dirigirte al siguiente instructivo: [¿Cómo saber si la configuración fue exitosa?](/woowup-developer-docs/push-notifications/como-saber-si-la-configuracion-fue-exitosa.md)