Step 1: Add Footer Script
All you need to do after your account has been created is install the footer script before your website pages' ending </body> tag. It should look something like this:
<!-- // BEGIN // Fera.ai Footer Code - DO NOT MODIFY // -->
<script type="application/javascript">
(function(){
window.fera = window.fera || [];
window.fera.push("configure", { store_pk: "/* TODO - PUBLIC_API_KEY */"} );
// TODO - replace the `321` with the current product ID, `Product 321` with with the current product name, etc
// If not currently on a product page, then skip this line.
// window.fera.push("setProduct", { id: 321, name: "Product 321", thumbnail_url: "https://picsum.photos/200/200", url: "https://example.com" });
var FeraCachedAsset=function(r){var n=this;this.version="0.2.3";var a=r.name||r.url.split("?")[0].split("#")[0];var o="Fera.AssetCache."+a;var s=(new Date).getTime()/1e3;var c=r.type||(r.url.indexOf(".html")!==-1?"text/template":r.url.indexOf(".css")!==-1?"text/css":"text/javascript");n.load=function(t){t=t||function(){};if(n.content){return t(n.content)}if(!e()){u(r.url,function(e){n.content=e;i(e);n.save(e);t(e)})}else{t(n.content)}return true};n.save=function(e){var t=s+(r.expiresIn||900);if(!l()||!e){return false}var n={name:a,url:r.url,expires:t,content:e};window.localStorage.setItem(o,JSON.stringify(n));return true};n.clear=function(){window.localStorage.removeItem(o);return false};var e=function(){if(!l())return false;var e=window.localStorage.getItem(o);if(!e||typeof e!=="string"){return null}var t=JSON.parse(e);if(t.expires<s||t.url!==r.url){return n.clear()}n.content=t.content;i(n.content);return true};var i=function(e){if(document.getElementById(o))return;var t=document.createElement(c==="text/css"?"style":"script");t.type=c;t.id=o;t.async=!0;t.innerHTML=e;document.body.appendChild(t)};var u=function(e,t){var n=new XMLHttpRequest;n.async=true;n.onreadystatechange=function(){if(n.readyState==4&&n.status<300){t(n.responseText)}};n.open("GET",e,true);n.send()};var l=function(){var e="test";try{window.localStorage.setItem(e,"t");window.localStorage.removeItem(e);return 1}catch(e){return 0}}}; new FeraCachedAsset({ name: 'bananastand', expiresIn: 900, url: window.feraJsUrl || "https://cdn.fera.ai/js/fera.js"}).load();
})();
</script>
<!-- // END // Fera.ai Footer Code // -->
Replace /* TODO - PUBLIC_API_KEY */ with your public API key (found in your account's
Setting Current State
Telling Fera about the current state of the shopping experience allows you to use Fera's real-time personalization engine and allows Fera to properly count and identify events that can be used as social proof.
setProduct
Describe current product being viewed with setProduct
(optional) setShopper
Describe current shopper with the setShopper method. If no information is known about the current shoppers (like they're not logged in) then you can skip this method.
Note: Setting these details makes review/photo/video submissions faster for your customers (since they won't have to enter their email/name in) even though it is not required.
(optional) setCart
Describe current shopping cart state with the setCart function. If nothing is in the cart then this is not needed.
Step 2: Push Conversion Event
Whenever an order or conversion event occurs, we need you to let us know for Fera to work properly.
(optional) Step 3: Push Add To Cart Event
If you want to track add-to-cart events for your Fera widgets, you'll need to let us know whenever a shopper adds a product to their cart.