Start with the SDK.Scale to production.
Use script-tag placeholders, React bindings, or the programmatic API to connect recommendations with real page context, consent, identity, and tracking.
Configure Runtime
Set the environment, page type, consent level, and optional user identity before the SDK sends its first request.
Add Recommendation Slots
Render one placeholder per recommendation slot and map fields with data-froomle-param-* attributes.
Verify Tracking
Confirm page visits, recommendation requests, impressions, clicks, and diagnostics before rolling out.
<!-- 1. Configure SDK runtime -->
<script>
window.addEventListener("froomle:before-init", function (event) {
event.detail.sdk.setConsent(2)
}, { once: true })
</script>
<script
defer
src="https://cdn.jsdelivr.net/npm/@froomle/frontend-sdk@latest/dist/froomle.global.js"
data-froomle-env="your_commerce_env"
data-froomle-page-visit="category">
</script>
<!-- 2. Add one placeholder per recommendation slot -->
<article data-froomle-reco="product_recommendations">
<a data-froomle-param-href="uri" href="#">
<img
data-froomle-param-src="image"
data-froomle-param-alt="name" />
<h3 data-froomle-param-inner="name">
Loading recommendation...
</h3>
</a>
</article>Pick your integration path
Start from the runtime that matches your stack, then keep the same Froomle tracking and recommendation model underneath.
Plain HTML / CMS
Use script-tag initialization and declarative placeholders in server-rendered pages.
React / Next.js
Use typed React bindings for item-based or list-based recommendation components.
Programmatic API
Fetch recommendations directly when your application owns rendering or server-side orchestration.