In the "Search bar recommendation" and "embedded content" touchpoint types you are asked to select a position for your content. After choosing an element, our tracking script is able to replace the HTML of this element or inject HTML before or after it. You can also add CSS or Javascript to touchpoints to style them or make them interactive.
We created a really handy CSS selector, which iFrames your website in our platform and enables you to choose the element to use for the touchpoint. Some websites however block iFraming. Because of this we have created two other methods to get the CSS selector of an element. We generally recommend trying option 1 first, because it's the easiest. If this doesn't work, try 2. Only if both of these options don't work, try 3.
Alright, lets break down the different methods:
Uncover the CSS selector by iFraming:
To use this selector, fill in the URL of the webpage you want to add embedded content to, in the top bar. The format for this URL has to be "http://" or "https://".
After filling in this URL, click the "Choose an element" button to open up the URL you just filled in. You are now asked to select an element on your website. This element will determine the position of your content.
As you can see in the screenshot, we selected the element that displays "popular products".
If we now go back to the touchpoint editor, you can see the CSS selector has been filled in
In case your website allows iframing, this should be enough to show your content. (Occurrence and content placement will be discussed further down)
2. Copying the CSS location
In case your website is not being shown in the previous option, it is likely that iFraming your website is being blocked. So let's dive into option two.
Select the go to webpage button shown in the screenshot above. Once you are on your website, click on the element you want to use for your CSS selection.
After clicking on the element, a popup will be shown. Copy the CSS selector data and copy it into the CSS Selector field in the touchpoint editor.
3. Copying the CSS path manually
Sometimes neither option 1 nor 2 shows any content. If this is the case, we can manually grab the CSS data using the inspector on your website.
To do this go to your website and put your mouse on the element you want to select. Click on it with your right mouse button and select "inspect".
A window with your website's source code should now open up with the element you used to open it being highlighted. Click on this element (the code) with your right mouse button and select copy - copy selector.
Paste this selector into the CSS selector in the touchpoint editor and you content should now be displayed.
Note: One great benefit to this option is that because the CSS path is way shorter, there is less room for errors to occur.
Occurrence
When an element appears more than once on the webpage you want to add an embedded touchpoint to, you can set the occurrence to select which element needs to be selected. You can almost always leave this at "1st occurrence".
Content placement
This option determines where to add the embedded touchpoint relative to the selected element on your webpage. You can place it before your selected element, replace your selected element or after your selected element.
Because your website's source code is always read from the top to the bottom before means above and after means below.