# 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 \ 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 `` section of the DOM. The `obviyo` API is added to the window object, or added to the UMD module system, if one exists.
```markup
```
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
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://dev-docs.obviyo.com/quick-start.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.