Pathfora also supports "fill in the blank" style inline content recommendations. That is, you can set up your html elements to match the look and feel of your website, and add attributes which will signal to pathfora to fill in the content with results from the Lytics content recommendation API.

<div data-pfblock="my-recommendation" data-pfrecommend="recent_articles">
  <div data-pftype="image"></div>
  <a data-pftype="url"><h2 data-pftype="title"></h2></a>
  <p data-pftype="description"></p>
</div>

Attributes

Each toggleable content recomendation block should have a surrounding container element with the following elements.

HTML data attribute
Attribute	Value Type	Value
data-pfblock	string	a unique string name for a single recommendation block
data-pfrecommend	string	id of a content collection - the source list of content to recommend from** or default
data-pfshuffle	boolean	optional if true, shuffle the result of the recommendations on each page load.

** You can get the id of the content collection from the url of that collection in the Lytics App.

Inside the container element you may have several elements with the data-pfblock attribute. Based on the value of this attribute, Pathfora will set the innerHTML or an attribute of this element to contain a content recommendation for the user.

Note that only one data-pfshuffle attribute is necessary per unique value of data-pfrecommend. This shuffle param will be applied to all blocks with a common data-pfrecommend value since we make one API request per content collection referenced on the page.

value of data-pftype attribute
Value	Behavior
image	on an img tag this will set the src value to be the meta image of the document, otherwise it will set the background-image
url	on an a tag this will set the href value to be the url of the document, otherwise it will set the innerHTML to be this url
title	set the innerHTML of this element to be the title of the document
description	set the innerHTML of this element to be the meta description of the document
author	set the innerHTML of this element to be the author of the document
published	set the innerHTML of this element to be the date this article was published, see below for formatting

If for some reason the recommendation API returns an error for the user, and cannot fill in recommendation, you can set some default content to show by creating another set of elements with content you've selected filled in and the data-pfrecommend value set to default. This content will only show if the any recommendation with a matching data-pfblock couldn't be loaded.

Note: Pathfora loads some CSS to hide the toggle elements before selecting which element to show. Because the js library will load after the body of the page, you may see a flicker of html elements when the page is first loaded. To prevent this, you can add the following line of CSS to the stylesheet of your website:

[data-pftrigger], [data-pfrecommend]{ display: none; }

Date formatting

Pathfora uses toLocaleDateString() to format the date published of an article. You can set the locale and options for this function on the pathfora object.

If unset by the user, the locale will default to en-US.

Content Recommendations - Live Preview