Integrating slots

You can easily integrate using an HTML/javascript tag for websites or a REST/JSON API call for server-side or mobile apps. To show dynamic content to users, website and mobile apps must make dynamic API calls each time a user views a page. These are done with either a REST/JSON API call or a HTML/javascript tag. For more information, see the Live Content API guide. 

Integrating HTML slots

To integrate with HTML widgets you must include the blueshift.live() initialization call and set up the <div> tag to define where the HTML widget is to be dynamically inserted.

The <div> tag

Include the data-bsft-slot attribute in the <div> tag and assign the slot name as the attribute value.

The blueshift.live() call after initialization looks for all "div" elements with the "data-bsft-slot" attribute and makes a call to Blueshift servers for inserting dynamically recommended content in an iframe under the div.

For example, the following <div> tag is defined for the slot “product_banner”.

<div data-bsft-slot='product_banner'></div>

Javascript call

Here is an example for calling blueshift.live() in the initialization Javascript. You can add this call on the event-tracking pixel you may have already included on the page.

The blueshift.live() call takes slot context as parameters including the slot name and attributes.

• seed_item_ids: Array of catalog items the user is viewing or interacting with and is used as a basis for recommendation. This is useful for recommending content like: "users who saw this item, also bought these items".
• exclude_item_ids: An array of catalog item IDs that should be excluded from recommendation results.
• exclude_categories: An array of categories to exclude from recommendation results

For example:

<script type="text/javascript">
window._blueshiftid='5dfe3c9aee8b375bcc616079b08156d9';window.blueshift=window.blueshift||[];if(blueshift.constructor===Array){blueshift.load=function(){var d=function(a){return function(){blueshift.push([a].concat(Array.prototype.slice.call(arguments,0)))}},e=["identify","track","click","pageload","capture","retarget","live"];for(var f=0;f<e.length;f++)blueshift[e[f]]=d(e[f])};}
blueshift.load();
blueshift.live();
blueshift.pageload();
if(blueshift.constructor===Array){(function(){var b=document.createElement("script");b.type="text/javascript",b.async=!0,b.src=("https:"===document.location.protocol?"https:":"http:")+"//cdn.getblueshift.com/blueshift.js";var c=document.getElementsByTagName("script")[0];c.parentNode.insertBefore(b,c);})()}
</script>

If you have multiple slots on the page you can customize the exclude_item_ids and seed_item_ids for each slot.

For example:

blueshift.live({
    product_banner: {
      exclude_item_ids: ["9780141325293"],
      seed_item_ids: ["9780141325293"],
      exclude_categories: ["Fiction > SciFi"]
    },
    product_category_bottom: {
      exclude_item_ids: ["9780141325293"],
      seed_item_ids: ["9780141325293"],
      exclude_categories: ["History > Unknown"]
    }
  });

Integrating JSON Slots

For JSON slots, call the required API to render the content in the slot.