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.
Implementation time: 15 minutes.
Difficulty: Medium
When to use it: When you want to include content (static or dynamic) on your website without modifying the code.
STEP 1. Locating the right selector in the code
(This section identifies the appropriate tag on the website where Connectif will display the content).
You can skip this first step and start in STEP 2 if:
— You know the selector and unique identifier to use.
— You want to create a specific selector for your web content that prevents changes or updates to your ecommerce code from altering the embedded content or preventing its display. In this case, we recommend that you use a “div” block with a unique identifier (id) that distinguishes it. Remember that you'll need to add it to your ecommerce code before continuing.
1.1 Locating the selector
A selector identifies an HTML element, located anywhere on the web page, by means of its ID, class or attribute. This selector will be the reference that tells Connectif where you want to display the content.
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.
In our example, the goal is to send the content so that it appears just above the "CUSTOM TEXT BLOCK".
3. Open the developer tools console (DevTools) of the browser.
All browsers have a link in the menu to open DevTools. Here are the instructions to open it in Google Chrome (browser used in our example), Mozilla Firefox, Microsoft Edge y Safari.
Alternatively, if you are in Chrome, Firefox or Edge, you can use the F12 shortcut key.
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.
In our example, the tag that is highlighted, "<div id=”customer-text”>", is distinguished by the global attribute "id" which has a value of "custom-text". This div block contains the entire selected area.
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.
In our example, the identifier "custom-text" has only one match, so it is suitable for use as a selector.
The selector must be unique, to prevent the content from being displayed multiple times in different positions. If the search reflects more than one match, you’ll need to find another suitable selector
Attributes have multiple usage options and are common to many pieces of web content. If you want more in-depth knowledge about using them in inline web content, click here.
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.
A workflow for the purpose of inserting embedded content into the website must contain at least one "Send Web Content" node.
In our example, we have created a simple strategy that shows content to all contacts who visit the home page.
Remember that you can use our templates for sending embedded content.
12. Configure the rest of the workflow nodes, except for the "Send Web Content" node (instructions for configuring it are in the next step).
In our example, the audience has been set to the "Start" node for all existing and new contacts. The trigger node "On Page Visit" has been configured to be activated exclusively on the home page.
If you want to learn more about these two nodes, see the articles "Start" node and Trigger-type nodes.
2.2 Configure the “Send Web Content” node
13. In the “Send Web Content”, click (Edit node settings).
If you’d like to learn more about the "Send Web Content", click here.
14. In the first step of the settings, select or create new inline content.
Among the different types of web content, inline is the only one that is embedded in the structure of the website while the rest are displayed on it.
To learn more about inline web content, click here.
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.
In our example, we leave the global attribute Id that comes by default selected and paste the value "custom-text" obtained in point 8.
17. Choose the position relative to the selected item in which your content will be embedded.
You can choose to insert your design immediately before or after the block the selector points to, or even inside it..
If you indicate Replace the inside, content generated from Connectif will replace the original content, which will not be displayed.
18. Click Next .
19. Link the variables if necessary.
If there were no variables defined in your content, as in our example, you don't need to configure anything in this step.
If your content contains custom variables, you'll need to link them in this step with information coming from other nodes.
If you want to learn more about variables, click here.
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.
Success!
Your Connectif content is embedded on your website.
ALTERNATIVE USES
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).
Hidden inline content is very useful for executing actions that don't require content to be displayed to the visitor. A widely used example is to request a subscription to push notifications without showing any web content.
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.
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.