1. Help Center
  2. Integrate your Store
  3. Integration by module or app
  4. VTEX IO

Guide to Integrate with VTEX IO

Created
Updated
Follow

If your eCommerce is developed on VTEX IO, you can synchronize it with your Connectif account in minutes and start collecting interaction data from your contacts on the website.

In this article, you will learn how to integrate your VTEX IO store with Connectif.

Implementation time: 20 min.
Difficulty: Low.
When to use it?: When opening your Connectif account.

 

STEP 1. Download the application

1. Go to the following link: Connectif on VTEX App Store.

2. Click the Get App button at the top right.

VTEX_IO_Integracion_-_2-min.png

 

3. Log in to VTEX IO.

VTEX_IO_Integracion_-_3.png

 

4. Confirm the order by following VTEX’s instructions.

5. Click Complete Purchase.

VTEX_IO_Integracion_-_4.png

 

STEP 2. Install the module

6. Click the Go to installation page button.

VTEX_IO_Integracion_-_5.png

 

7. On the next screen, review the required permissions for the Connectif module and click Install.

VTEX_IO_Integracion_-_6.png

 

STEP 3. Activate the VTEX App

a. Prerequisites

(This section explains the steps to create an Application Key, necessary to activate the Connectif VTEX App.)

8. In your VTEX account, go to "Account Settings > Account Settings > User Roles" and click New Role.

VTEX_IO_Integracion_-_17.png

 

9. Assign the following permissions to the role:

  • Product Catalog > Content, Admin, Marketing, Configuration, Commercial, Miscellaneous, Reports, Marketplace, Collection.

  • Product License Manager > Services Access Control > Get account by identifier.

  • Product Checkout > CheckoutResources.

  • Product OMS > OMS Access > Change order workflow status, Notify payment, Notify invoice, View order, Notify refund, Order feed subscription, View store sales stats, List Orders.

  • Product Master Data > Generic resources, Application, Comment, Customized Search, Form, Import.

  • Product Dynamic Storage > Dynamic storage generic resources > Read only documents, Master Data administrator, Full access to all documents.

  • Product Dynamic Storage > Data entity > List data entity, Create data entity, Edit schema, View data entity details, Publish index.

  • Product Logistics > Logistics full access, Logistics viewer, Logistics inventory full access, Logistics inventory read only.

VTEX_IO_Integracion_-_16.png

 

10. Go to "Account Settings > Account Settings > Application Keys" and click Add.

VTEX_IO_Integracion_-_18.png

 

11. In the new Application Key creation panel, click Add roles.

VTEX_IO_Integracion_-_19.png

 

12. Assign the new role configured for Connectif.

VTEX_IO_Integracion_-_20.png

 

13. Click Save.

VTEX_IO_Integracion_-_21.png

 

b. Application activation

(This section indicates the account identification data needed to activate the Connectif app in VTEX IO.)

14. Log in to your Connectif account and, in Store settings under "Integrations > E-commerce Platforms", click Edit on VTEX.

Integración con VTEX IO - 0-min.png

 

15. Copy the Client ID and the Secret Key.

Integración con VTEX IO - 1-min.png

 

16. Go to your VTEX IO account and navigate to "Installed Apps > Connectif > Configuration".

17. Fill in the fields with the following information:

  • Client ID: enter the value of Client Identifier from your Connectif account, available at "Store Settings > E-commerce Platforms > VTEX".
  • Private key: enter the value of the Secret Key from your Connectif account, available at "Store Settings > E-commerce Platforms > VTEX".
  • VTEX Key and VTEX Token: enter the corresponding values obtained in Application Keys for the Connectif role.

Integración con VTEX - Image Size - 1-min.png

 

18. Optionally:

  • Select the Sales Channels for which you want Connectif to synchronize purchases. By default, all purchases will be registered.
  • Adjust the Image Size used when importing products to Connectif. Default is 300x300.

Integración con VTEX - Image Size - 1-min.png

19. Enable tracking and save the changes.

 

c. Integration verification

(This section reviews the store URL configuration in Connectif.)

20. Go to your Connectif account.

21. In Store settings, go to "Integrations > E-commerce Platforms" and click Edit on VTEX IO.

22. Verify that the Store Domain corresponds to a public and accessible domain of your website.

Integración con VTEX IO - 5-min.png

 

23. In Store settings, go to "Channels > Web Push Notifications".

24. Modify the ServiceWorker URL to correspond to a public and accessible domain of your store.

Integración con VTEX IO - 2-min.png

 

STEP 4. Configure Connectif on the Checkout page

(This section describes how to configure web tracking on VTEX IO.)

VTEX IO has a Checkout section separate from the rest of the VTEX store. For Connectif to perform web tracking and display content during the order confirmation process, it is necessary to manually add a fragment of the Connectif script in the Checkout.

25. Go to your VTEX store settings, under "Installed Apps Connectif," and copy the Checkout custom code snippet.

VTEX_IO_Integracion_-_13.png

The code configuration depends on the type of Checkout your store uses. Follow only the steps for either Checkout or Checkout UI Custom, depending on your setup.

 

a. Configuration with Checkout

(In this section, you will configure the Connectif script if your store uses Checkout).

26. Go to "Store Settings > Checkout" and click (Edit).

VTEX_IO_Integracion_-_14.png

 

27. Go to the Code tab and modify the file checkout6-custom.js by adding the copied code snippet:

VTEX_IO_Integracion_-_15.png

 

b. Configuration with Checkout UI Custom

(In this section, you will configure the Connectif script if your store uses Checkout UI Custom).

28. Go to “Store Settings > Checkout UI Custom > JavaScript”.

29. Add the Connectif code snippet you copied earlier.

30. Click PUBLISH to publish the changes.

Guia para integrar con VTEX IO - 1.png 

 

Success! 
The integration of Connectif with VTEX IO is now ready.

You can check if you have correctly integrated Connectif with VTEX IO in this article.

 

Frequently Asked Questions

1. What information does Connectif collect through this integration

a. Information collected about Contacts

In integrations with VTEX IO, through Connectif JavaScript events, certain information about Contacts is transferred by default:

  • _name
  • _surname 
  • email

Additionally, through daily bulk synchronization, these fields are updated:

  • email
  • _birthdate
  • _name
  • _surname
  • _mobilePhone
  • _newsletterSubscriptionStatus

b. Information collected about Products

In integrations with VTEX IO, through Connectif JavaScript events and daily catalog synchronization, certain information about Products is collected by default:

  • productDetailUrl
  • name
  • brand
  • productId
  • imageUrl
  • unitPrice
  • unitPriceOriginal
  • availability
  • categories
  • unitPriceWithoutVAT (only with daily bulk synchronization)
  • publishedAt (only with daily bulk synchronization)
  • inStockUnits (only with daily bulk synchronization)

c. Information collected about Purchases

In integrations with VTEX IO, through Connectif JavaScript events and API synchronization, certain information about Purchases is collected by default:

  • cartId
  • purchaseDate
  • purchaseId
  • totalPrice
  • totalQuantity

 

2. How to recover abandoned carts with the Cart Recovery URL

(This section explains how the Cart Recovery URL works to obtain items associated with a specific cart).

Through the integration with VTEX IO, a Cart Recovery URL is sent to Connectif, that is, a link to recover the items related to that cart which can be used in workflows and content.

To obtain the cart recovery URL through a workflow, it must be done via the nodes "Get last cart" and "On cart abandonment", then mapped into the variables of the content to display or send.

  • Learn how this URL works in different CMS and how to use it in this article.

 

 

Keep learning!

To make the most of your Connectif account, we recommend continuing with the following articles: