One key difference about LiftIgniter is that you can display our recommendations any way that you want. We don't require any specific HTML or CSS (or our logo!) be shown as part of the recommendation area, allowing us to completely blend into your site. 


1. Create a Template

Our render function uses Mustache.js to allow you to create custom templates for how recommendations should be displayed. You can use all of the classes and other CSS already defined for your site. In fact, one of the easiest ways to create a template is to take the code that is already on the page for a recommended item and replace the specific URL, title, thumbnail image, and other information you want to display with placeholders. As an example, you would turn this:


<div>
  <a href="www.google.com">
     <img src="www.google.com/favicon.ico">
     <p class="title">Click here to go to Google</p>
  </a>
  <p>search engine</p>
</div>


into this:


<script type="application/mustache" id="li-recommendation-template">
  {{#items}}
  <div class='recommended_item'>
    <a href="{{url}}">
        <img src="{{thumbnail}}"/>
        <p class="title">{{title}}</p>
    </a>
    <p>{{description}}</p>
 </div>
 {{/items}}
</script>



2. Identify the Recommendation Area


When our render function runs, it looks for a specific part of the page to overwrite with the HTML created from the template. This can be as simple as:

<div id="li-recommendation-unit"></div>


You can use any "id" value that you like, but you'll want to make sure that each recommendation area gets a unique widgetName, template ID, and div ID (see our article on implementing Multiple Widgets) and keep each set consistent with each other.


3. Render the Recommendations

In the script below, we use $p("register") to define the recommendation widget's options and features, $p("fetch") to execute the request for recommendations, and $p("render") to draw them on the page. Note that $p("render") is requested from the callback of $p("register"). This is because it must wait for recommendations to be returned in order to have items to fill in the recommendation area.


$p('register', {
  max: 5, // Number of items you want to show
  widget: 'li-recommendation-unit',  //The name of the widget in LiftIgniter's Analytics
  callback: function(resp) {
    // The query selector should match div name from Step 1
    var recArea = document.querySelector('#li-recommendation-unit');
    // Template should match mustache template name from Step 2
    var template = document.querySelector('#li-recommendation-template').innerHTML;
    // Basically Mustache.render(template, resp);
    recArea.innerHTML = $p('render', template, resp);
  }
});

// Executes the registered call.
$p('fetch');



4. Verifying Recommendations are Rendering Correctly


When you execute your code to register and fetch, you should see LiftIgniter's recommendations correctly render in the place that you intended for them to show up. You should verify:

  1. That the items are appearing with the CSS and HTML that you defined in your template and CSS files. 
  2. That the items being rendered match the ones being recommended by LiftIgniter
  3. That the items are being rendered in the correct order


To check the items being returned and the rank order, you can add the following line as the first line of the $p("register") callback:

console.log(resp);// This should be the first line in the callback function


Common Issues

The field I need for my template isn't included in the data sent back from LiftIgniter.

  1. Make sure the data you need is being sent to us or can be scraped from the page. By default we collect OpenGraph tags - if you have additional data that you'll need in order to render the recommendations, there are several ways to get it into the item metadata.
  2. If the information is in the inventory, tell us which additional fields need to be returned in our response. We'll return the title, URL, and thumbnail image by default.


I'm not getting any items back in the recommendations, so there is nothing to render (or not enough items to completely fill the recommendation area).

  1. If you have a brand new account, we may not have a) enough items collected yet (you'll need to add our Beacon to your page first) or b) we've not configured your account's inventory regex - this allows items to be added only from specific domains or according to particular URL paths.
  2. If you are using "opts" in your widget register, there may not be any items that match the criteria you've selected. This can happen if you have conflicting filters, no recent items, or are using a custom rule value that has no match.
  3. By default we return 10 items - if you need more items to fill your widget area, make sure to include the "max" parameter with the number of items you'll need!


I want to have multiple widgets on a single page - how do I set that up?

  1. Check out our article on Implementing Multiple Widgets