Questo articolo è attualmente disponibile in inglese e spagnolo. Puoi fare riferimento a questa documentazione mentre arriva nella tua lingua.
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.
Implementation time: 15 minutes.
Difficulty: Medium
When to use it: When you want to include content (static or dynamic) in VTEX IO.
To use Connectif inline web content in VTEX IO, it’s essential to do so through the Connectif component specifically designed and developed for the VTEX IO theme system.
In this VTEX guide you can see how to customize a theme: VTEX Store Theme.
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.
In our example, the component has been inserted in the ecommerce home page.
"store.home": {
"blocks": [
"list-context.image-list#demo",
/* You can make references to blocks defined in other files.
* For example, `flex-layout.row#deals` is defined in the `deals.json` file. */
"__fold__.experimentalLazyAssets",
"flex-layout.row#deals",
"connectif#test-connectif-block",
"rich-text#shelf-title",
"flex-layout.row#shelf",
"info-card#home",
"rich-text#question",
"rich-text#link",
"newsletter"
]
}
3. Add the properties required to identify the block created.
In our example, two properties have been defined for the component:
— "classId": Adds the specified text as a class to the container created by the component.
— "elementId": Adds the specified text as an identifier to the container created by the component.
"connectif#test-connectif-block": {
"props": {
"classId": "test-connectif-block",
"elementId": "test-connectif-block-elem-id"
}
You don’t need to use both properties – you only need to complete one of them to obtain the necessary selector in Connectif.
4. (Optional) Repeat points 2 and 3 for each different place where you want to display content in your website structure.
To work properly, each additional component must be assigned a different identifier to distinguish it.
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 create a strategy that displays embedded content in VTEX IO, you can follow the instructions in the article Insert inline content in your ecommerce site .
Success!
You’ve reached the end of the tutorial.
Keep learning!
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.