> 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/plataforma-ecommerce/vtex.md).

# VTEX

Podés configurar la integración con VTEX siguiendo estos pasos:

### **Paso 1: Crear la integración de VTEX en la plataforma de gopersonal.**

Creá una nueva integración de VTEX. Vas a necesitar la URL, el App Key y el App Token. Consultá esta [guía](https://help.vtex.com/docs/tutorials/api-keys) oficial de VTEX para generar las claves de aplicación.

<figure><img src="https://academy.gopersonal.ai/~gitbook/image?url=https%3A%2F%2F77548240-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F6jDsmHXQ0gdSKhPuXFMw%252Fuploads%252FPhwxMRaP9qjCdk3Q8ij3%252FScreenshot%25202024-03-26%2520at%252010.05.24%2520AM.png%3Falt%3Dmedia%26token%3Daac50398-4b55-402e-b564-bb20da920b97&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=e7219906&#x26;sv=1" alt="" width="375"><figcaption></figcaption></figure>

Además, podés configurar los tiempos de sincronización de productos y clientes.

### **Paso 2: Crear la integración del SDK de Auth de gopersonal.**

También en la [sección de Integraciones](https://academy.gopersonal.ai/admin-ui/integrations) creá una nueva integración de gopersonal Auth Web. Completá el dominio con el dominio de tu ecommerce.

<figure><img src="https://academy.gopersonal.ai/~gitbook/image?url=https%3A%2F%2F77548240-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F6jDsmHXQ0gdSKhPuXFMw%252Fuploads%252FdWZjcl9NAV06drqkV0Oj%252FScreenshot%25202024-03-26%2520at%252010.43.08%2520AM.png%3Falt%3Dmedia%26token%3D3a3c7379-1b84-41c5-85a3-9cc25cc9235d&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=f2bfcca4&#x26;sv=1" alt="" width="375"><figcaption></figcaption></figure>

### **Paso 3: Instalar la app de gopersonal en VTEX**

Consultá la documentación de VTEX IO [aquí](https://developers.vtex.com/docs/guides/vtex-io-documentation-publishing-an-app). **Paso 4: Agregar tu clientId en la configuración de la app de VTEX.** Podés obtener tu clientId en el panel de la integración una vez creada.

<figure><img src="https://academy.gopersonal.ai/~gitbook/image?url=https%3A%2F%2F77548240-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F6jDsmHXQ0gdSKhPuXFMw%252Fuploads%252F5nayCCEP5hhKi9RwyCbr%252FScreenshot%25202024-03-26%2520at%252010.41.08%2520AM.png%3Falt%3Dmedia%26token%3D7397c020-be28-4033-8153-1a8f3d307711&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=32ffcbbf&#x26;sv=1" alt="" width="375"><figcaption></figcaption></figure>

En tu admin de VTEX, en la sección App Management, andá a la app de gopersonal.

<figure><img src="https://academy.gopersonal.ai/~gitbook/image?url=https%3A%2F%2F77548240-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F6jDsmHXQ0gdSKhPuXFMw%252Fuploads%252FsB5HbCi0S42A5Og4Bhoq%252FScreenshot%25202024-03-26%2520at%252011.03.57%2520AM.png%3Falt%3Dmedia%26token%3Da9f76f75-a79f-4bb8-91c5-8a905e1d3797&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=7a782ae6&#x26;sv=1" alt=""><figcaption></figcaption></figure>

Abrí la configuración de la app, pegá el clientId y hacé clic en guardar.

<figure><img src="https://academy.gopersonal.ai/~gitbook/image?url=https%3A%2F%2F77548240-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F6jDsmHXQ0gdSKhPuXFMw%252Fuploads%252Fh38kKf35PCX14NVDJSVl%252FScreenshot%25202024-03-26%2520at%252011.05.13%2520AM.png%3Falt%3Dmedia%26token%3D78e2785a-b29a-423b-9764-264dbeb39a99&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=ea5213ce&#x26;sv=1" alt=""><figcaption></figcaption></figure>

### **Paso 4: Configuración en la página de checkout**

Abrí tu admin en la sección Checkout, en el archivo `checkout6-custom.js`:

[https://ACCOUNT.myvtex.com/admin/portal/#/sites/default/code/files/checkout6-custom.js](https://account.myvtex.com/admin/portal/#/sites/default/code/files/checkout6-custom.js)

Agregá el siguiente snippet en el archivo y reemplazá "REPLACE\_ME\_CLIENT\_ID" por tu clientId:

Copiar

```
async function initializeGSSDK() {
    window.gsSDK = await new window.GSSDK.default('REPLACE_ME_CLIENT_ID', {
        provider: 'Vtex',
        context: {pageType: 'checkout'}
    });
}
var gsSDKScript = document.createElement('script');
gsSDKScript.src = 'https://sdk.gopersonal.ai/gs-sdk.js';
gsSDKScript.onload = initializeGSSDK;
document.head.appendChild(gsSDKScript);
```

#### Checkout con código custom existente

> **Cuándo usar esto:** solo si tu tienda **ya tiene código custom en el checkout**, por ejemplo porque instalaste el componente VTEX checkout UI custom y agregaste tu propio código (barras de carrito, estilos de pasos, etc.). Si todavía no tenés código custom en el checkout, usá el snippet del paso anterior tal cual.

**Dónde editar el código**

Si tenés instalado el componente checkout UI custom, editá el código desde el Admin de VTEX:

`https://ACCOUNT.myvtex.com/admin/vtex-checkout-ui-custom`

Abrí el archivo **JavaScript** (`checkout6-custom.js`), agregá el snippet y guardá los cambios.

Si no usás ese componente, editá el archivo desde la ruta indicada en el paso anterior:

`https://ACCOUNT.myvtex.com/admin/portal/#/sites/default/code/files/checkout6-custom.js`

**Cómo agregar el snippet**

**No reemplaces el archivo**, o vas a perder tu código existente. Pegá el snippet **al final del archivo, a nivel raíz** (fuera de cualquier función).

> No lo pongas dentro de funciones que se ejecutan al navegar (por ejemplo un `init()` que se llama en cada `hashchange`). El checkout de VTEX es una single-page app (`#/cart`, `#/email`, `#/shipping`, `#/payment`), por lo que el SDK se cargaría en cada paso.

Para evitar que el SDK se cargue dos veces, usá esta versión con validaciones:

```javascript
//GoPersonal SDK
async function initializeGSSDK() {
    if (window.gsSDK) return;
    window.gsSDK = await new window.GSSDK.default('REPLACE_ME_CLIENT_ID', {
        provider: 'Vtex',
        context: { pageType: 'checkout' }
    });
}

if (!document.querySelector('script[src="https://sdk.gopersonal.ai/gs-sdk.js"]')) {
    const gsSDKScript = document.createElement('script');
    gsSDKScript.src = 'https://sdk.gopersonal.ai/gs-sdk.js';
    gsSDKScript.onload = initializeGSSDK;
    document.head.appendChild(gsSDKScript);
}
```

Acordate de reemplazar `REPLACE_ME_CLIENT_ID` por tu clientId.

## Configuración del canal Web Push <a href="#web-push-channel-setup" id="web-push-channel-setup"></a>

Para crear el script del Service Worker, seguí estas instrucciones paso a paso:

1. En el Admin de VTEX, andá a **Store Settings > Storefront > Checkout**, o escribí **Checkout** en la barra de búsqueda de la parte superior de la página.
2. Hacé clic en el ícono del sitio deseado.
3. En la pestaña Code, hacé clic en el botón New.
4. Luego hacé clic en File.
5. Completá el nombre del archivo exactamente así: gp-firebase.js.
6. Hacé clic en el botón Create.
7. Agregá este código al script:

Copiar

```
"function" === typeof importScripts && importScripts("https://sdk.gopersonal.ai/libs/firebase-messaging-sw.js");
```

8. Hacé clic en el botón Save.