> 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/examples/plain-javascript.md).
# Plain JavaScript
## Basic Example with HTML/CSS/JS
This contrived example demonstrates how to show a simple recommendation using the UMD version of the library.
{% hint style="info" %}
The following code demonstrates *synchronous* script tag loading. If you prefer *asynchronous*, simply use the `defer` flag in your `
Headless Recommendations
Using standard JavaScript
```
{% endtab %}
{% endtabs %}
{% tabs %}
{% tab title="index.css" %}
```css
body {
font-family: Arial, Helvetica, sans-serif;
}
.item {
border: 1px solid #ccc;
padding: 0 10px;
margin: 5px;
width: 200px;
height: 300px;
display: inline-block;
vertical-align: top;
}
.item>a {
text-decoration: none;
}
.item>a>img {
width: 100%;
max-width: 200px;
}
```
{% endtab %}
{% endtabs %}
{% tabs %}
{% tab title="index.js" %}
```javascript
/* global obviyo */
const { $fetchRecommendationData } = window.obviyo
const SITE_ID = '{your siteId}'
/**
* Helper function to append a recommendation item
*/
function appendItem(item) {
const div = document.createElement('div')
div.className = 'item'
const html = `
${item.title}
`
div.innerHTML = html.trim()
document.body.appendChild(div)
}
/**
* Example function which calls for a recommendation
* In this case, most popular
*/
async function $showRecommendations() {
const result = await $fetchRecommendationData({
siteId: SITE_ID,
qualifiedName: 'psz-mpop'
})
const items = result.items
if (items && items.length) {
items.map(appendItem)
}
}
/**
* Simulate document ready
*/
function onDocumentReady(callback) {
if (
document.readyState === "complete" ||
(document.readyState !== "loading" && !document.documentElement.doScroll)
) {
callback()
} else {
document.addEventListener("DOMContentLoaded", callback)
}
}
onDocumentReady(() => {
$showRecommendations()
})
```
{% endtab %}
{% endtabs %}