> 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/web-components-4.x./api/more-features/recommendation.md).

# Recommendation

Render personalized product recommendations from customer behavior and selected records.

## 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.

{% hint style="warning" %}
Define field roles before using `ff-recommendation`.
{% endhint %}

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">
        <!-- In this demo, a click on the product sets the recommendation product. -->
        <ff-record>
            <img data-image="{{record.ImageName}}">
            <div>
                <a href="https://www.bergfreunde.de/{{record.Deeplink}}" data-action="redirect">
                    {{record.Title}}
                </a>
                <div>Price: <strong>{{record.Price}} €</strong></div>
            </div>
        </ff-record>
    </ff-record-list>
</ff-recommendation>
```

{% 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 load. It defaults to `4`.

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

**record-id**

Set `record-id` to load records recommended for one product. Use a comma-separated list for several record IDs.

```html
<script>
    const recommendationElement = document.querySelector("ff-recommendation");
    // This triggers the recommendation service request.
    recommendationElement.recordId = "123456789";
</script>
```

**subscribe**

Use `subscribe` to control whether `ff-recommendation` listens to the recommendation service. It defaults to `true`.

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

**use-perso**

Use `use-perso` to control personalization for this recommendation. It defaults to `false` and overrides the `ff-communication` setting.

```html
<ff-recommendation use-perso="true">
    <!-- ... -->
</ff-recommendation>
```

## Demo

Try the [Recommendation demo](https://search-web-components.fact-finder.de/demos/4.x/ff-recommendation).

## API code

### Properties

<details>

<summary>Properties</summary>

| Name                                       | Description                                                                       |
| ------------------------------------------ | --------------------------------------------------------------------------------- |
| **record-id** (String, default: empty)     | Product record ID used to load recommendations. Separate several IDs with commas. |
| **max-results** (Number, default: `4`)     | Maximum number of recommended products.                                           |
| **use-perso** (String, default: `"false"`) | Enables personalization for this component. Overrides `ff-communication`.         |
| **subscribe** (String, default: `"true"`)  | Controls whether the element receives recommendation events.                      |

</details>

### Methods

<details>

<summary>Methods</summary>

| Name                     | Description                          |
| ------------------------ | ------------------------------------ |
| **getRecommendations()** | Loads product recommendations again. |

</details>


---

# 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/web-components-4.x./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.