> For the complete documentation index, see [llms.txt](https://dev-docs.obviyo.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dev-docs.obviyo.com/quick-start.md).

# Quick Start

## Overview

These basic steps are required to train and retrieve recommendations.

* Load the Frontend API
* Get Recommendations
* Report events to train and improve recommendations

The frontend API is extremely lightweight, and can be loaded synchronously in the \<head> tag.  However, If there are any concerns about performance, consider either using "defer", or asynchronous module loading.

#### HTML / UMD

Place the script tag into the `<head>`  section of the DOM.  The `obviyo` API is added to the window object, or added to the UMD module system, if one exists.

```markup
<script src="https://cdn.obviyo.net/lib/obv-api.js"></script>
```

To fetch recommendations, use `$fetchRecommendationData`.  Here is a basic example which fetches the most popular items.

{% hint style="info" %}
By convention, functions prefixed by $ return promises.
{% endhint %}

```javascript
const data = await obviyo.$fetchRecommendationData({
    siteId: '{your siteId}',
    qualifiedName: 'psz-mpop'
})

const items = data.items
```

To directly report user/product interactions, use `reportProductInteraction`.

```javascript
// fire and forget
obviyo.reportProductInteraction({
    siteId: '{your siteId}',
    visitorId: '{visitorId}',
    item: '{product id}',
    type: 'viewed'
})
```

#### MODULES / ESM

Modules are widely supported by modern browsers.  To use modules, simply use import or import().  No need to include a script tag.

```javascript
import { $fetchRecommendationData, reportProductInteraction }
  from 'https://cdn.obviyo.net/lib/obv-api.esm.js'

...

// get recommendations
const data= await obviyo.$fetchRecommendationData({
    siteId: '{your siteId}',
    qualifiedName: 'psz-mpop'
})

const items = data.items

...

// report product interactions
obviyo.reportProductInteraction({
    siteId: '{your siteId}',
    ecommerceId: '{your ecommerceId}',
    item: '{product id}',
    type: 'viewed'
})
```

Use dynamic imports to easily try things out in your browser console.

```javascript
const obviyo = await import ('https://cdn.obviyo.net/lib/obv-api.esm.js')

// do stuff with obviyo
```

### Next Steps

* Learn more about where and how to integrate
* Api reference