Custom Platforms
How to install fera.ai on a custom platform.

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:
1
<!-- // BEGIN // Fera.ai Footer Code - DO NOT MODIFY // -->
2
<script type="application/javascript">
3
(function(){
4
window.fera = window.fera || [];
5
window.fera.push("configure", { store_pk: "/* TODO - PUBLIC_API_KEY */"} );
6
// window.fera.push("setProduct", { id: 321, name: "Product 312" });
7
// window.fera.push("setShopper", { customer_id: "customer-123", name: "John Doe", email: "[email protected]", }); */
8
// window.fera.push("setCart", { total: 100.0, currency: 'USD', items: [{price: 50.0, total: 100.0, product_id: "product-123", name: "Product 123", quantity: 2 }] }); */
9
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();
10
})();
11
</script>
12
<!-- // END // Fera.ai Footer Code // -->
Copied!
Replace /* TODO - PUBLIC_API_KEY */ with your public API key (found in your account's Store Settings -> API tab here) and replace all other values

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.
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.
It also makes shopper tracking (like journeys, A/B testing, attribution) more accurate.

(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.
Last modified 6mo ago