# 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](https://app.fera.ai/integrations/api_keys)

## 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:

```html
<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)
```sh
npm install fera-js
```
Yarn:
```sh
yarn add fera-js
```

Then import whatever you want to use. If you want to import everything use:
```javascript
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:
```html
<fera-reviews product="YOUR_PRODUCT_ID_OR_DATA"></fera-reviews>
```

### Product Rating Widget
Show product rating (stars) component (widget) in your page:
```html
<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
```html
<button onclick="fera.showContentSubmitter({ product: YOUR_PRODUCT_ID_OR_DATA })">Write Product Review</button>
```
#### Show store/business/company review modal
```html
<button onclick="fera.showContentSubmitter()">Write Store Review</button>
```

## API Client
You can use the api client to access Fera data from the 
[Public API](https://developers.fera.ai/reference/public-api-intro).
#### 
```javascript
(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))
});
```