# VTEX

You can set up the integration with VTEX following these steps:

### **Step 1: Create the VTEX integration in gopersonal platform.**

&#x20;Create a new Vtex integration. You will need the URL, App Key and App Token. Check this VTEX official [guide](https://help.vtex.com/docs/tutorials/api-keys) for generating application keys.&#x20;

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

Also, you can configure the synchronization times for products and customers.

### **Step 2: Create the gopersonal Auth SDK integration.**&#x20;

Also in the [Integrations section](https://academy.gopersonal.ai/admin-ui/integrations) create a new integration for gopersonal Auth Web. Complete the domain with your ecommerce domain.

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

### **Step 3: Install the gopersonal VTEX app**

Check the VTEX IO documentation [here](https://developers.vtex.com/docs/guides/vtex-io-documentation-publishing-an-app). **Step 4: Add your clientId in the VTEX app configurations** You can get your clientId in the integration panel once created.

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

In your VTEX admin in the App Management section go to gopersonal App.

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

Open the app settings, paste the clientId and click save.

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

### **Step 4: Setup in the checkout page**

Open your admin in the Checkout section in the `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)

Add the following snippet in the file and replace "REPLACE\_ME\_CLIENT\_ID" with your clientId:

Copy

```
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);
```

## Web Push Channel Setup <a href="#web-push-channel-setup" id="web-push-channel-setup"></a>

To create the Service Worker script, follow the step-by-step instructions below:

1. In the VTEX Admin, go to **Store Settings > Storefront > Checkout**, or type **Checkout** in the search bar at the top of the page.
2. Click the icon of the desired site.
3. In the Code tab, click the New buttton.
4. Then click on File.
5. Fill in the file name exactly like: gp-firebase.js.
6. Click the Create button.
7. Add this code to the script:

Copy

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

8. Click the Save button.


---

# 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://academy.gopersonal.ai/developers/plataforma-ecommerce/vtex.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.
