All Collections
Publisher Help Center
Implementation Help
Customizing the content recommendation widget
Customizing the content recommendation widget
Christine DuBois avatar
Written by Christine DuBois
Updated over a week ago

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" />

Did this answer your question?