> 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/javascript-esm.md). # JavaScript ES modules ## Basic Example with HTML/CSS/JS This contrived example demonstrates how to show a simple recommendation using the ESM version of the library. Instead of loading the library as a \ ``` {% 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 /* import module */ import { $fetchRecommendationData } from 'https://cdn.obviyo.net/lib/obv-api.esm.js' 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 %}