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


---

# 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://woowup-docs.gitbook.io/woowup-developer-docs/push-notifications/configuracion-push-en-vtex-legacy.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.