> 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./guides/quick-start/configuration.md).

# Configuration

Configure FactFinder connection settings and trigger initial searches.

This chapter describes the minimal configuration necessary to search and retrieve results from FactFinder.

You can configure the communication via the custom element `ff-communication` or directly via JavaScript.

### A minimal configuration consists of the following settings

### **URL**

Specify the FactFinder endpoint.

Please note the context name `/FACT-Finder`. It is not sufficient to provide the top-level domain like `https://web-components.fact-finder.de/`, which will result in an error.

{% hint style="info" %}
Make sure you are using the same protocol (`http://`, `https://`) for the `url` setting and webapp.

Using `url="http://web-components.fact-finder.de/FACT-Finder"` on a page hosted via **HTTPS** will result in an error.
{% endhint %}

***

### **version**

Specify the FactFinder version. E.g. `ng` or `7.3`.

***

### **api**

When using FactFinder **NG**, specify the FactFinder **API** version. E.g. `v5`, `v4`, `v3` or `v2`.

***

### **channel**

Specify the name of the channel which is used for the search.

You can find the available channels in your FactFinder UI.

### FactFinder Web Components Approach

```html
<body>
    <ff-communication url="https://web-components.fact-finder.de/FACT-Finder"
                      version="ng"
                      api="v5"
                      channel="bergfreunde-co-uk"
                      search-immediate
    ></ff-communication>
```

{% hint style="warning" %}
The `ff-communication` element must be the first FactFinder Web Component in DOM order!
{% endhint %}

[Read why](file:///documentation/4.x/ready-events).

We recommend placing the `ff-communication` element immediately after the `body` tag to reduce the risk of accidental reordering.

Furthermore, we advise adding a comment explaining this requirement. For example:

```html
<!-- The ff-communication element sets up the FF FactFinder Web Components and must not be moved!
     All other FactFinder Web Components must be placed hereafter. -->
```

### **search-immediate**

The `search-immediate` attribute ensures that a search is automatically triggered as soon as `ff-communication` was successfully attached to the DOM.

The triggered search request uses the current URL parameters in conjunction with the settings provided by `ff-communication` attributes.

If no search query is provided through the URL or an attribute, `*` will be used as default (search for all products).

{% hint style="info" %}
You don't want the `search-immediate` attribute to be present on your landing (home) page because this would trigger a search every time a user enters your shop.

Usually you only want to use it on category pages and on the search result page.
{% endhint %}

### JavaScript Approach

While `ff-communication` provides a declarative way to configure the communication, it is also possible to do so directly via JavaScript as follows:

```js
document.addEventListener("ffReady", function (event) { // "ffReady" event ensures global factfinder object exists
    const factfinder = event.factfinder;
    const eventAggregator = event.eventAggregator;

    factfinder.communication.globalSearchParameter.url = "https://web-components.fact-finder.de/FACT-Finder";
    factfinder.communication.globalSearchParameter.version = "ng";
    factfinder.communication.globalCommunicationParameter.ngApi = "v5";
    factfinder.communication.globalSearchParameter.channel = "bergfreunde-co-uk";

    /* after this minimal configuration, a search can be triggered manually e.g. through */
    eventAggregator.addFFEvent({
         type: "search",
         query: "*"
    });
});
```

Although the entire configuration can be done using JavaScript, we discourage direct use of custom JavaScript to do so and strongly recommend configuring everything through FactFinder Web Components.

{% hint style="warning" %}
Web Components' JavaScript API has been stable for a while and changes are introduced very carefully.

Nevertheless, there is no guarantee for its stability, and therefore it is not documented any further.

Future versions are planned to put more focus on JavaScript approaches.
{% endhint %}


---

# 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./guides/quick-start/configuration.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.