> 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

Cómo conectar nuestro script de notificaciones push a tu sitio VTEX Legacy para habilitar el envío de notificaciones push web.

### 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](https://2630140241-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LRNHU4Ej62060lN40uV%2Fuploads%2FGvoSbt9aDrbFGm2ODxCv%2Fimage.png?alt=media\&token=1b3421b4-b868-44ec-aefe-423d8dca85e2)

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

![](https://2630140241-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LRNHU4Ej62060lN40uV%2Fuploads%2Fiu9wcQwJFTCosQQ7lGMW%2Fimage.png?alt=media\&token=bf68bd38-0158-4d52-8147-b9f70dd94b9c)

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

![](https://2630140241-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LRNHU4Ej62060lN40uV%2Fuploads%2FaApQiNa1WcWmxwLUpx8u%2Fimage.png?alt=media\&token=a0e8c6f1-946c-4721-beee-d415168439c2)

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

![](https://2630140241-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LRNHU4Ej62060lN40uV%2Fuploads%2FISwZ0dRYVVQhD3W0W4KR%2Fimage.png?alt=media\&token=ccbb6e35-7d4c-4c93-8d91-1ec6040965f1)

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:

![](https://2630140241-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LRNHU4Ej62060lN40uV%2Fuploads%2FrQIHaPph3LpFfZeIHrCC%2Fimage.png?alt=media\&token=d8ac1801-c072-4a91-9051-b3f59ef6195a)

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:

![ ](https://2630140241-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LRNHU4Ej62060lN40uV%2Fuploads%2Ffzwgiab2SYQkwI1kZgei%2Fimage.png?alt=media\&token=c4668f2a-2f4d-45be-bbb4-1e9939ef933b)

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

![](https://2630140241-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LRNHU4Ej62060lN40uV%2Fuploads%2FkWBp5B90au1xlybuxyjJ%2Fimage.png?alt=media\&token=333bc8dc-3d47-42c9-aeef-d58baa6381ea)

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:

![ ](https://2630140241-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LRNHU4Ej62060lN40uV%2Fuploads%2Ffzwgiab2SYQkwI1kZgei%2Fimage.png?alt=media\&token=c4668f2a-2f4d-45be-bbb4-1e9939ef933b)

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

![](https://2630140241-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LRNHU4Ej62060lN40uV%2Fuploads%2FkWBp5B90au1xlybuxyjJ%2Fimage.png?alt=media\&token=333bc8dc-3d47-42c9-aeef-d58baa6381ea)

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 %}

![](https://2630140241-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LRNHU4Ej62060lN40uV%2Fuploads%2F3YrjilxTBRQHvm3OujKh%2Fimage.png?alt=media\&token=afb36251-bfbc-449b-b498-0028442020e3)

{% 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)