> For the complete documentation index, see [llms.txt](https://docs.fact-finder.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.fact-finder.com/webcomponents-overview/api/more-features/recommendation.md).

# Recommendation

\`ff-recommendation\` retrieves recommended products and renders them through a nested \`ff-record-list\`. Configure product context, result limits, and personalization for each placement.

## Documentation

### Overview

With the `ff-recommendation` you can display a set of records which are presented to users based on their search history and their last purchased products as well as their product views.

The recommendation service learns the shopping behavior for each user and creates a list of records which can be displayed to them.

Inside the `ff-recommendation` element you define an `ff-record-list` to display the recommended products. This `ff-record-list` does not listen to the default search result and gets its records from the recommendation service.

```html
<ff-recommendation>
    <div class="recommendationHeader">Recommendations</div>

    <ff-record-list subscribe="false">
        <template data-role="record">
            <ff-record>
                <img data-image="{{variantValues.0.ImageName}}">
                <div>
                    <a href="https://your.shop/{{variantValues.0.Deeplink}}">
                        {{variantValues.0.Title}}
                    </a>
                    <div>Price: <strong>{{$ variantValues.0.Price}}</strong></div>
                </div>
            </ff-record>
        </template>
    </ff-record-list>
</ff-recommendation>
```

## API

### `ff-recommendation`

#### Properties

| Name                                                                            | Description                                                   |
| ------------------------------------------------------------------------------- | ------------------------------------------------------------- |
| **product-number** (String, comma-separated list) (default: empty)              | A comma-separated list used to return recommendations.        |
| **max-results** (Number) (default: empty)                                       | The maximum number of returned product recommendations.       |
| **use-personalization** (String) **Options**: "true", "false" (default: "true") | When `"false"`, recommendations load without personalization. |

#### Methods

| Name                     | Description                                                         |
| ------------------------ | ------------------------------------------------------------------- |
| **getRecommendations()** | Refreshes recommendations using the current `product-number` value. |

{% hint style="warning" %}
Although `ff-recommendation` tries to find a nested `ff-record-list` and change its `subscribe` property to `false`, it should be set explicitly to `false` in HTML code to prevent console warnings and avoid race conditions.
{% endhint %}

### Attributes

#### max-results

The `max-results` attribute defines how many records should be loaded. By default, this value is empty and the element displays as many records as FactFinder returns.

```html
<ff-recommendation max-results="4">
    <!-- ... -->
</ff-recommendation>
```

#### product-number

`product-number` takes the value that is labeled with the `productNumber` **field role**.

This attribute takes a list of comma-separated values. Once set, `ff-recommendation` queries FactFinder for a list of recommendations based on the specified product numbers.

The displayed recommendations are refreshed every time the `product-number` HTML attribute or the corresponding `productNumber` JavaScript property are changed.

```html
<ff-recommendation product-number="123456789">
    <!-- ... -->
</ff-recommendation>
```

```js
const recommendationElement = document.querySelector(`ff-recommendation`);
recommendationElement.productNumber = `123456789`;
```

#### use-personalization

With the `use-personalization` attribute you can define whether the recommendations should use the personalization feature. The default value is `true`.

```html
<ff-recommendation use-personalization="false">
    <!-- ... -->
</ff-recommendation>
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.fact-finder.com/webcomponents-overview/api/more-features/recommendation.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.