If your eCommerce site is developed in VTEX IO, you can synchronize it with your Connectif account in just a few 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.
Difficulty: Low.
When to use it: When opening your Connectif account.
STEP 1. Downloading the application
1. Go to the following link: Connectif in VTEX App Store.
2. Click the Get App button in the upper-right corner.
3. Log in to VTEX IO.
4. Confirm the order by following VTEX's instructions.
5. Click Finish purchase.
STEP 2. Installing the module
6. Click the Go to installation page button.
7. On the next screen, review the permissions required by the Connectif module and click Install.
STEP 3. Activating the VTEX App
a. Prerequisites
(This section explains the steps for creating an Application Key, which is required to activate the Connectif VTEX App.)
8. In your VTEX account, go to "Account Settings > Account Settings > User Roles" and click New Role.
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 Acccess > 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.
10. Go to "Account Settings > Account Settings > Application Keys" and click Add.
11. In the new Application Key creation panel, click Add roles.
12. Assign the new role configured for Connectif.
13. Click Save.
b. Activating the application
(This section indicates the account identification details required to activate the Connectif application in VTEX IO.)
14. Go to your Connectif account and, in the Store settings, under "Integrations > eCommerce platforms", click Edit for VTEX.
15. Copy the Client ID and Private Key.
16. Go to your VTEX IO account and open "Installed apps > Connectif > Settings".
17. Fill in the fields with the following information:
- Client ID: add the value of the Client identifier from your Connectif account, available under "Store Settings > eCommerce Platforms > VTEX".
- Private key: add the value of the Private key from your Connectif account, available under "Store Settings > eCommerce Platforms > VTEX".
- VTEX Key and VTEX Token: add the corresponding values obtained under Application Keys for the Connectif role.
18. Optionally:
- Select the White label sellers whose stock you want to consider when synchronizing the catalog with Connectif. If at least one of the selected sellers has stock for a product, Connectif will consider it available.
- Select the Sales channels with which you want Connectif to synchronize purchases. By default, all purchases will be recorded.
- Adjust the Image size to be used when products are imported into Connectif. The default is 300x300.
19. Enable tracking and save the changes.
c. Verifying the integration
(This section reviews the store URL configuration in Connectif.)
20. Go to your Connectif account.
21. In the Store settings, go to "Integrations > eCommerce platforms" and, under VTEX IO, click Edit.
22. Check that the Store Domain corresponds to a public and accessible domain for your website.
23. In the Store settings, go to "Channels > Web Push Notifications."
24. Modify the ServiceWorker URL so that it corresponds to a public and accessible domain for your store.
STEP 4. Configuring Connectif on the Checkout page
(This section describes how to configure web tracking in 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, a fragment of the Connectif script must be manually added to Checkout.
25. Go to your VTEX store settings, under "Installed apps Connectif", and copy the code fragment from Checkout custom code.
The code configuration depends on the type of Checkout your store uses. Follow only the steps for Checkout or Checkout UI Custom, according to your configuration.
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).
27. Go to the Code tab and modify the checkout6-custom.js file by adding the copied code:
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 fragment that you copied previously.
30. Click PUBLISH to publish the changes.
Success!
The Connectif integration with VTEX IO is now ready.
You can check whether you have correctly completed your Connectif integration with VTEX IO in this article.
Frequently asked questions
1. What information does Connectif collect through this integration?
a. Information collected from Contacts
In VTEX IO integrations, certain information about Contacts is transferred by default through Connectif JavaScript events:
- _name
- _surname
In addition, the following fields are updated through the daily bulk synchronization:
- _birthdate
- _name
- _surname
- _mobilePhone
- _newsletterSubscriptionStatus
b. Information collected from Products
In VTEX IO integrations, certain information about Products is collected by default through Connectif JavaScript events and the daily catalog synchronization:
- productDetailUrl
- name
- brand
- productId
- imageUrl
- unitPrice
- unitPriceOriginal
- availability
- categories
- discountedAmount
- discountedPercentage
- unitPriceWithoutVAT (only through the daily bulk synchronization)
- publishedAt (only through the daily bulk synchronization)
- inStockUnits (only through the daily bulk synchronization)
c. Information collected from Purchases
In VTEX IO integrations, certain information about Purchases is collected by default through Connectif JavaScript events and API synchronization:
- 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 the items associated with a specific cart.)
Through the integration with VTEX IO, a Cart Recovery URL is sent to Connectif—that is, a link for recovering the items related to that cart, which can be used in workflows and content.
To obtain the cart recovery URL through a workflow, use the "Get latest cart" and "On cart abandonment" nodes, and then map it to the variables of the content to be displayed or sent.
- Learn how this URL works in the different CMSs and how to use it in this article.
Keep learning!
To take full advantage of your Connectif account, we recommend continuing with the following articles:
Onboarding, to become familiar with our interface.
Initial workflows, to implement your first strategies in the account.
Integrations with external systems, to integrate with Facebook, forms, and webhooks on your website.
Events that consume Activities, to better understand your account usage.