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.
Comments
0 comments