Note: This is a follow up on this article.
To copy existing HTML, you can inspect an element like this in Google Chrome (right click and “inspect”):
Select the element in the box that appears below, right click it and click on “Copy outerHTML”:
You can add this HTML to the HTML tab in Datatrics. Now you are just adding the same HTML back to the element, so you will need to change the static texts in the HTML to variables which contain the fields of the recommended content item (in this case the audio products filtered in the previous article, but it can also be a banner, blog post or custom content you added to Datatrics).
For showing a single content item, you can change the static text to variables like this:
{{item.name}}
{{item.description}}
{{item.price}}
{{item.url}}
{{item.image}}
These variables start with item. and the part after it is the content item field name. You can find the names of the fields in the content you filtered or selected:
For example, you have copied the following HTML code from your website:
<div class="item" style="background-image: url('http://www.yourdomain.com/product-name/product-image-url.jpg')">
<div class="item-content">
<h3 class="h3">Product Name</h3>
<p class="price"><strong>€99</strong></p>
<p class="caption">This is a product description</p>
<div class="btn-wrap">
<a class="btn btn-primary" href="http://www.yourdomain.com/product-name/">View product</a>
</div>
</div>
</div>Find the content which is from the product that was present in the HTML, for this example it is:
Product Name
€99
This is a product description
Replace these with the matching variables:
{{item.image}}
{{item.name}}
{{item.price}}
{{item.description}}
{{item.url}}
This will result in the following code:
<div class="item" style="background-image: url('{{item.image}}')">
<div class="item-content">
<h3 class="h3">{{item.name}}</h3>
<p class="price"><strong>€{{item.price}}</strong></p>
<p class="caption">{{item.description}}</p>
<div class="btn-wrap">
<a class="btn btn-primary" href="{{item.url}}">View product</a>
</div>
</div>
</div>
You now created an embedded content recommendation. To recommend multiple products in one embedded touchpoint, read the following article.