3.0.0-beta.18 • Published 1 year ago

fera-js v3.0.0-beta.18

Weekly downloads
-
License
MPL-2.0
Repository
-
Last release
1 year ago

Introduction

Fera.js is a JavaScript SDK to collect and display customer reviews, photos and videos on your site.

Installation

You can either install with the CDN footer script or install with npm/yarn (ESM).

Prerequisites

  1. Signup at https://app.fera.ai/signup
  2. Grab your public API key from your Fera account API keys section

Method 1: CDN Bundle (JS + CSS)

This one-shot bundle will include all configuration cached by our global CDNs and the base CSS as configured in your Fera acocunt:

<script src="https://cdn.fera.ai/js/fera.bundle.js?api_key=PUT_YOUR_API_KEY_HERE" id="fera_js_bundle"></script>

(replace PUT_YOUR_API_KEY_HERE with your API key)

Just include it before the ending body tag - that's it!

Method 2: CDN With Separate CSS and JS

  1. Include <script src="https://cdn.fera.ai/js/fera.js?api_key=PUT_YOUR_API_KEY_HERE"></script> (replace PUT_YOUR_API_KEY_HERE with your API key)
  2. Include <link href="https://cdn.fera.ai/js/fera.css?api_key=PUT_YOUR_API_KEY_HERE"> (replace PUT_YOUR_API_KEY_HERE with your API key)
  3. That's it!

Method 3: NPM/Yarn (ESM)

npm install fera-js

Yarn:

yarn add fera-js

Then import whatever you want to use. If you want to import everything use:

import Fera from 'fera-js';

const fera = new Fera({
  config: {
    apiKey: "PUT_YOUR_API_KEY_HERE",
    // This needs to point to the node_modules/fera-js/dist/ folder.
    // We publish the latest stable version to cdn.fera.ai/dist/ so this is optional
    // assetBaseUrl: "https://cdn.fera.ai/dist/",
  }
});

fera.once('ready', () => {
    // PUT YOUR CUSTOM CODE HERE
});

Usage

Widgets & Components

Product Reviews Widget

Show product reviews component (widget) in your page:

<fera-reviews product="YOUR_PRODUCT_ID_OR_DATA"></fera-reviews>

Product Rating Widget

Show product rating (stars) component (widget) in your page:

<fera-rating product="YOUR_PRODUCT_ID_OR_DATA"></fera-rating>

Write Review Button

From the HTML, if you're using Fera API:

Show product review modal

<button onclick="fera.showContentSubmitter({ product: YOUR_PRODUCT_ID_OR_DATA })">Write Product Review</button>

Show store/business/company review modal

<button onclick="fera.showContentSubmitter()">Write Store Review</button>

API Client

You can use the api client to access Fera data from the Public API.

(window.fera = window.fera || []).push("once", "ready", (fera) => {
    fera.api.reviews({limit: 10, offset: 0, sort: "created_at", order: "desc"})
        .then((({ product, reviews, meta }) => console.log("Fetched 10 reviews:", reviews))
});