Connectif makes it easy to add personalized web content to your ecommerce site without having to modify its code or alter its structure.
In this article, you'll learn how to embed Connectif content on your website.
STEP 1. Locating the right selector in the code
(This section identifies the appropriate tag on the website where Connectif will display the content).
1.1 Locating the selector
1. Go to the page of your website where you want to add the embedded content.
2. View the block you want to use as a reference.
3. Open the developer tools console (DevTools) of the browser.
4. Select the Elements tab in the console to view the HTML structure.
5. Click the Inspect icon, the first one on the left in the top menu.
6. Hover your mouse cursor over the content area you plan to use as a reference. Click when the selection is appropriate so that the label is highlighted on the console.
1.2 Confirm that the selector is unique.
(This section checks that the parameter to identify the tag is not repeated in any other tag).
7. Click on the content of the console's Elements tab and use the Control + F keyboard shortcut to search for the name of the tag or attribute.
8. Copy the name of your unique selector to the clipboard or a notebook.
9. Close the development console.
STEP 2. Show embedded content on the website
2.1 Create a workflow to display the content
10. Go to “Workflows” and click en Create new workflow.
11. Design your strategy by setting the conditions for displaying embedded content to contacts.
12. Configure the rest of the workflow nodes, except for the "Send Web Content" node (instructions for configuring it are in the next step).
2.2 Configure the “Send Web Content” node
13. In the “Send Web Content”, click (Edit node settings).
14. In the first step of the settings, select or create new inline content.
15. Click Next .
16. In the Selector section, paste the name obtained in point 8 and mark its type in the buttons to the left.
17. Choose the position relative to the selected item in which your content will be embedded.
18. Click Next .
19. Link the variables if necessary.
20. Click Finish .
21. In the workflow, click Save to save your changes and Start to activate it.
22. Check on your website that the content is displayed as expected.
Use embedded web content intelligently to further improve your results.
1. Insert hidden embedded content
(This section explains how to include HTML code from Connectif on your website without any visual element).
1. Go to “Content > Web” and click Create new web content.
2. Select Inline web content type.
3. Name your content.
3. Click Create web content.
4. Add an advanced HTML component.
5. Write the content of the HTML code
6 . Tap Save.
7. Create a workflow, following the steps in this guide starting from STEP 2, to use your embedded invisible content.
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.