Connectif allows you to display personalized web content in VTEX IO with minimal changes to the code and structure of your ecommerce site.
In this article, you’ll learn how to insert Connectif content inline in your VTEX IO.
STEP 1. Insert the component in the code
(In this section the component is placed in the appropriate place according to your strategy for displaying the content).
1. In the "manifest.json" file of the theme used in your VTEX IO, add the Connectif app with version 1 or later as a dependency.
2. Place the block definition in the desired position in the code.
/* You can make references to blocks defined in other files.
* For example, `flex-layout.row#deals` is defined in the `deals.json` file. */
3. Add the properties required to identify the block created.
4. (Optional) Repeat points 2 and 3 for each different place where you want to display content in your website structure.
STEP 2. Show content on the website
5. Create a workflow to display the inline content. Remember that you need to use a minimum of one "Send web content" node and configure it with the property created in point 3 as a selector.
To make the most of your Connectif account, we recommend reading these articles next:
- Custom integrations for sending data, to send data from Connectif to external systems or applications.
- Detect and respond to web links created outside of Connectif , to identify and respond to clicks on any link on your website.
Integration with Facebook and Instagram, to connect your Facebook Ads account with Connectif and start managing your audiences.
Integrated Forms, to integrate existing forms on your website in Connectif.