# VTEX

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

**Step 1: Create the VTEX integration in gopersonal platform.** \
Check the [Integrations section](https://academy.gopersonal.ai/en/admin-ui/integrations) in order to create a new integration. You will need the URL, App Key and App Token. 

<figure><img src="https://77548240-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6jDsmHXQ0gdSKhPuXFMw%2Fuploads%2FPhwxMRaP9qjCdk3Q8ij3%2FScreenshot%202024-03-26%20at%2010.05.24%20AM.png?alt=media&#x26;token=aac50398-4b55-402e-b564-bb20da920b97" alt="" width="375"><figcaption></figcaption></figure>

Also, you can configure the synchronization times for products and customers.&#x20;

**Step 2: Create the gopersonal Auth SDK integration.**  \
&#x20;Also in the [Integrations section](https://academy.gopersonal.ai/en/admin-ui/integrations) create a new integration for gopersonal Auth Web. Complete the domain with your ecommerce domain.

<figure><img src="https://77548240-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6jDsmHXQ0gdSKhPuXFMw%2Fuploads%2FdWZjcl9NAV06drqkV0Oj%2FScreenshot%202024-03-26%20at%2010.43.08%20AM.png?alt=media&#x26;token=3a3c7379-1b84-41c5-85a3-9cc25cc9235d" alt="" width="375"><figcaption></figcaption></figure>

**Step 3: Install the gopersonal VTEX app**&#x20;

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.&#x20;

<figure><img src="https://77548240-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6jDsmHXQ0gdSKhPuXFMw%2Fuploads%2F5nayCCEP5hhKi9RwyCbr%2FScreenshot%202024-03-26%20at%2010.41.08%20AM.png?alt=media&#x26;token=7397c020-be28-4033-8153-1a8f3d307711" alt="" width="375"><figcaption></figcaption></figure>

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

<figure><img src="https://77548240-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6jDsmHXQ0gdSKhPuXFMw%2Fuploads%2FsB5HbCi0S42A5Og4Bhoq%2FScreenshot%202024-03-26%20at%2011.03.57%20AM.png?alt=media&#x26;token=a9f76f75-a79f-4bb8-91c5-8a905e1d3797" alt=""><figcaption></figcaption></figure>

Open the app settings, paste the clientId and click save.&#x20;

<figure><img src="https://77548240-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6jDsmHXQ0gdSKhPuXFMw%2Fuploads%2Fh38kKf35PCX14NVDJSVl%2FScreenshot%202024-03-26%20at%2011.05.13%20AM.png?alt=media&#x26;token=78e2785a-b29a-423b-9764-264dbeb39a99" alt=""><figcaption></figcaption></figure>

**Step 5: Setup in the checkout page**&#x20;

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:

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

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.&#x20;
7. Add this code to the script:&#x20;

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

1. Click the Save button.