Guide to Integrating with VTEX IO

If your ecommerce platform is based on VTEX IO, you can sync it with your Connectif account in just a few minutes and start gathering data about your contacts’ interactions on the site.

In this article you’ll learn how to integrate your VTEX IO store with Connectif

 
Implementation time: 20 min.
Difficulty: Low.
When to use it: When you open your Connectif account.

 

Step 1. Download the application

  1. Access the following link: Connectif in VTEX App Store.
  2. Click the Get App button at the top right.

VTEX_IO_Integracion_-_1.png

  1. Log in to VTEX IO.

VTEX_IO_Integracion_-_2.png

  1. Confirm the order by following the VTEX instructions.
  2. Click Complete purchase.

VTEX_IO_Integracion_-_3.png

 

Step 2. Module installation

  1. Click the Go to installation page button.

VTEX_IO_Integracion_-_4.png

  1. On the next screen, review the required permissions of the Connectif module and click Install.

VTEX_IO_Integracion_-_5.png

 

Step 3. VTEX App Activation

a. Prerequisites

(This section explains how to create an Application Key, which you’ll need to activate the Connectif VTEX App).

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

VTEX_IO_Integracion_-_6.png

  1. 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.
    • 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.

VTEX_IO_Integracion_-_7.png

  1. Go to "Account settings > Account settings > Application keys" y and click  Add.

VTEX_IO_Integracion_-_8.png

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

VTEX_IO_Integracion_-_9.png

  1. Assign the new role configured for Connectif.

VTEX_IO_Integracion_-_10.png

  1. Click Save.

VTEX_IO_Integracion_-_11.png

 

b. Activating the application 

(Here you will enter your account identification data to activate the Connectif app in VTEX IO).

  1. Log in to your Connectif account and, under "Integrations > ERPs and CRMs > VTEX", click  Edit.

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

  1. Copy the Client ID and Secret Key.

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

  1. Go to your VTEX IO account and go to "Installed Apps > Connectif > Settings".
  2. Fill in the fields with the following information:
  • Client ID: add the Client Identifier value of your Connectif account, available in "Store Settings > E-commerce Platforms > VTEX".
  • Private key: add the Secret Key value of your Connectif account, available in "Store settings > E-commerce platforms > VTEX".
  • VTEX Key and VTEX Token: add the corresponding values obtained in Application Keys for the Connectif role.

VTEX_IO_Integracion_-_14.png

  1. (Optional) Select the sales channels with which you want Connectif to synchronize purchases. All purchases will be logged by default.
  2. Click OK to save your changes.

 

c. Verifying the integration

(In this section we’ll review the configuration of the store URL in Connectif). 

  1. Access your Connectif account.
  2. In the integrations page, click  Edit.
  3. Check that the Shop Domain corresponds to a domain of your website that is public and accessible.

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

  1. In the Store Settings“Channels > Web Push Notifications”, modify the ServiceWorker URL to match a public and accessible domain of your store.

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

 

Step 4. Configuring Connectif in the Checkout page

(This section describes how to set up web tracking in VTEX IO).

 

VTEX IO has a separate Checkout section from the rest of the VTEX store. In order for Connectif to perform web tracking and display content during the order confirmation process, you need to manually add a code snippet from the backoffice to the checkout section.

  1. Go to your VTEX store settings, in "Installed Apps > Connectif", and copy the Checkout custom code snippet.

VTEX_IO_Integracion_-_17.png

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

VTEX_IO_Integracion_-_18.png

  1. Go to the Code tab and modify the checkout6-custom.jsfile, adding the copied code:

VTEX_IO_Integracion_-_19.png

 

 

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

  

You can check that you’ve completed your Connectif integration with VTEX IO correctly in this article.

 


Frequently Asked Questions

1. How to Recover Abandoned Carts with the Cart Recovery URL

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

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

To obtain the cart recovery URL through a workflow, use the nodes "Get Last Cart" and "On Cart Abandonment," then map it in the content variables to be displayed or sent.

  • Learn how this URL functions in different CMSs and how to use it in this article

 

 


Keep learning!

To make the most of your Connectif account, we recommend reading these articles next:

Was this article helpful?
0 out of 0 found this helpful