---
title: Recommendations quickstarts
description: "Everything you need to build a comprehensive and high-performing recommendations system with Luigi's Box, from the quick and easy Recco.js library to a fully custom implementation using the Recommender API."
slug: quickstart/recommendations
docKind: hub
hub: quickstart
---

Recommendations usually begin with a model choice, then continue into either the ready-to-use Recco.js path or a custom Recommender API implementation.

## Choose your path

<div class="choice-container">
  <a class="choice-card" href="/quickstart/recommendations/integrating-reccojs/">
    <span class="choice-badge" data-recommended="true">Recommended for web</span>
    <h3>Recco.js</h3>
    <p>Use the frontend library when you want recommendation widgets rendered quickly with built-in analytics handling.</p>
    <ul class="advantages-list">
      <li>Fastest way to launch recommendation widgets.</li>
      <li>Automatic event handling for the widget flow.</li>
      <li>Supports templates and carousel-like experiences.</li>
    </ul>
  </a>
  <a class="choice-card" href="/quickstart/recommendations/building-custom/">
    <span class="choice-badge">Custom build</span>
    <h3>Recommender API</h3>
    <p>Use the API when you need to build the UI yourself or integrate recommendations into a custom frontend or backend flow.</p>
    <ul class="advantages-list">
      <li>Complete control over rendering.</li>
      <li>Works for non-standard storefronts.</li>
      <li>Lets you combine recommendations with your own business logic.</li>
    </ul>
  </a>
</div>

## Quickstart collection

<div class="lb-guide-group">
  <p class="lb-guide-kicker">Strategy</p>
  <h3>Choose the right model first</h3>
  <p>Start here if you are still deciding what kinds of recommendations should appear on each page.</p>
  <div class="lb-guide-grid">
    <a class="lb-guide-card" href="/quickstart/recommendations/choosing-models/">
      <h3>Choose recommendation models</h3>
      <p>Map business goals and page context to the right recommender models.</p>
    </a>
  </div>
</div>

<div class="lb-guide-group">
  <p class="lb-guide-kicker">Recco.js</p>
  <h3>Frontend library path</h3>
  <p>Choose this when you want the fastest recommendation widget on the web.</p>
  <div class="lb-guide-grid">
    <a class="lb-guide-card" href="/quickstart/recommendations/integrating-reccojs/">
      <h3>Integrate Recco.js</h3>
      <p>Get a recommendation widget running quickly on a product page, cart, or homepage.</p>
    </a>
    <a class="lb-guide-card" href="/quickstart/recommendations/customizing-reccojs/">
      <h3>Customize Recco.js</h3>
      <p>Override templates so recommendations match your storefront design.</p>
    </a>
  </div>
</div>

<div class="lb-guide-group">
  <p class="lb-guide-kicker">Recommender API</p>
  <h3>Custom implementation path</h3>
  <p>Use this when you want to own the widget markup, logic, and analytics flow.</p>
  <div class="lb-guide-grid">
    <a class="lb-guide-card" href="/quickstart/recommendations/building-custom/">
      <h3>Build custom recommendations</h3>
      <p>Fetch results from the API and wire the required analytics by hand.</p>
    </a>
  </div>
</div>
