Styling the default template
Mantis provides a few default styles for you to choose from (or you can include your own CSS into the page):
3 Columns – Requires columns = 3 in your recommendation settings
Customize HTML with Handlebar
The recommendation engine uses the Handlebar template engine to serve the results. You can override the template we provide through your property settings.
Variables
All recommendations are stored in the results variable, which can be accessed like so:
<div>
#{{#results}}
...
#{{/results}}
</div>
For each result, you have a couple variables available:
internal – When true, the article being recommended belongs to the current site
url – The URL for the recommended article (Note: all external URLs MUST have rel=nofollow enabled)
image – The image URL (typically used for src attribute or background-url)
impression – The image URL for the impression tracking pixel (Note: this MUST be implemented in all templates)
title – The title of the article from the website
site – The name of the website in which the article belongs
lastColumn – When true, you are have reached the last “column” in the row
Here is an example:
<div class="mantis__recommended">
<div class="mantis__recommended__items">
#{{#results}}
<div class="mantis__recommended__item #{{#if internal}}mantis__recommended__item--internal#{{^}}mantis__recommended__item--external#{{/if}}">
<div class="mantis__recommended__item__content">
<a href="#{{{url}}}" rel="nofollow" #{{#if internal}} #{{^}}target="__blank"#{{/if}} class="mantis__recommended__item__image" style="background-image:url(#{{{image}}})"></a>
<span class="mantis__recommended__item__site">#{{{site}}}</span>
<a href="#{{{url}}}" rel="nofollow" #{{#if internal}} #{{^}}target="__blank"#{{/if}} class="mantis__recommended__item__title">#{{title}}</a>
</div>
</div>
#{{#if lastColumn}}#{{#if @last}}#{{^}}<div class="mantis__recommended__item__break"></div>#{{/if}}#{{/if}}
<img src="#{{{impression}}}" style="position:absolute;bottom:0;left:0;height:0;width:0" />
#{{/results}}
</div>
</div>
How to exclude pages from the Mantis crawler
If you would like to ensure pages crawled by our system are not shown in the content recommendation widget, you can add a meta tag to the <head></head> of your page:
<meta property="mantis:recommend" content="exclude" />