---
title: Recco.js
description: A frontend JavaScript library to rapidly build interactive recommendation UIs.
slug: recommendations/recco-js
docKind: guide
hub: recommendations
---

Recco.js is a self-hosted JavaScript library which can be used to rapidly build an interactive, single-page-application user interface around the Luigi's Box Recommender API.

You can integrate Luigi's Box Recommender by including the Recco.js script, setting configuration parameters and providing custom templates to customize the visual appearance.

## Integration

By following this guide you will configure your site to use Recco.js to make requests on your behalf to Luigi's Box Recommender API and display these recommendations back to your users.

### Prepare page for recommendations

Pick a page from your site that you would like to enrich with Luigi's Box Recommender -- product pages, shopping carts or even home pages work best. Create an empty placeholder element where Recco.js will render recommender UI into.

```html
<div id="recommender-ui">
  <!-- Empty placeholder for recommender UI -->
</div>
```

### Set up Recco.js

Include the script and set configuration parameters:

```html
<script src="https://cdn.luigisbox.com/recco.js"></script>
<script>
  Luigis.Recommend({
    TrackerId: '2291-22343',
    Theme: 'luigis',
    Size: 5,
    Name: 'basket_detail',
    Type: 'basket_recommender'
  }, '#recommender-ui')
</script>
```

Please note that:

1. You must define your templates **before** you initialize Recco.js script. Templates are looked up when Recco.js first initializes.
2. You must initialize the recommender by calling `Luigis.Recommend`. The initialization function takes 2 arguments: configuration object and CSS selector for the placeholder element.
3. You must define the initialization script in the HTML **after** the placeholder element.

Without defining custom templates, you will get a very basic and unstyled recommender UI. You will most likely want to define custom templates where you can reuse your existing styles.

## Content security policy

If your website is using Content Security Policy, you need to add following rules to allow Luigi's Box Recco.js to work.

| CSP directive | Value |
| :--- | :--- |
| `script-src` | `https://cdn.luigisbox.com` |
| `connect-src` | `https://live.luigisbox.com` |
| `style-src` | `https://cdn.luigisbox.com` |

## Prevent products from being recommended via annotations

You can prevent specific products from being recommended by adding a `data-luigis-no-recommend` annotation to their HTML elements. This is useful when you want to exclude certain products (e.g., the currently viewed product) from the recommendation results without modifying the API request.

```html
<div data-luigis-no-recommend="PRODUCT_URL_OR_ID">
  <!-- This product will be excluded from recommendations -->
</div>
```