> 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/predictive-basket-subject-to-change.md).
# Predictive Basket (subject to change)
Display personalized predictions with the experimental Predictive Basket component.
## Documentation
### Predictive Basket
The `ff-predictive-basket` element allows for easy integration with the FactFinder Predictive Basket feature. To use it, you need a version of FactFinder NG and WebComponents `3.15.5` or higher.
{% hint style="warning" %}
**Subject to Change**
Note that this feature is at an experimental stage and changes may occur.
{% endhint %}
Due to being subject to change, the Predictive Basket feature is not available by default in WebComponents. It must be activated by configuring two values on page load as follows:
```javascript
document.addEventListener("ffReady", ({ factfinder }) => {
factfinder.communication.globalSearchParameter.version = "ng";
factfinder.__experimental.predictiveBasket.enable = true;
});
```
If this is not configured, the `ff-predictive-basket` element will throw errors on attempting to use it.
**The Predictive Basket element**
The following listing shows the newly introduced element. The element itself does not have a visual component and must be used in combination with an `ff-record-list` in the same manner as `ff-recommendation`. See further below for more details.
```html
```
Once the element is correctly initialized, it will automatically issue a request to FactFinder and display the result through the nested `ff-record-list`. This will happen only once per page load. If you need to refresh the displayed data, refer to the `getPredictions()` method below.
**Attributes**
**`user-id`**
`user-id`
| Required | Type | Default | JavaScript property |
| -------- | ------ | ------- | ------------------- |
| Yes | String | None | `userId` |
The ID of the user for whom products shall be predicted. Setting this attribute will cause the element to issue a request once it is initialized. Additionally, changing `userId` will also automatically issue a new request.
If the user ID is not specified, no request to FactFinder will be issued. Instead, an error will be logged to the browser's console.
**`max-results`**
`max-results`
| Required | Type | Default | JavaScript property |
| -------- | ------ | ----------- | ------------------- |
| Optional | Number | Unlimited\* | `maxResults` |
The maximum amount of products to be returned from FactFinder. To receive all predictions, omit this attribute or set its value to `-1`.
\* Default value is inherited from the FactFinder API.
**`blacklist`**
`blacklist`
| Required | Type | Default | JavaScript property |
| -------- | ---------------------- | ------- | ------------------- |
| Optional | Comma-separated string | Empty | `blacklist` |
With the `blacklist` attribute, you can specify one or more product IDs that shall not be returned from FactFinder. This may be useful if you, for example, don't want products to appear in the predictions once the user has placed them in their shopping cart.
**Methods**
**`predictiveBasketElement.getPredictions()`**
This method issues a request to FactFinder with the currently set values.
**Example setup**
```html
![]()
```
**Manual update with blacklist**
```javascript
function onUpdate() {
const predBasket = document.querySelector("ff-predictive-basket");
predBasket.blacklist = "blacklisted-id-001,blacklisted-id-002,blacklisted-id-003";
predBasket.getPredictions();
}
```
---
# 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/predictive-basket-subject-to-change.md?ask=&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.
