> 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/advanced/communication.md).

# Communication

Route Web Components requests through your backend to enrich FactFinder responses.

### Communication

By default, FactFinder Web Components communicate directly with FactFinder. This is configured in the `ff-communication` element.

All actions and requests are performed automatically depending on the element that was clicked. For example, if the user clicks an `ff-asn-group-element`, a filter action is executed. FactFinder Web Components are data driven.

They expect a service capable of understanding the FactFinder API invocations and returning data as FactFinder would return it.

### Change the Communication Flow

In some situations, you may not want FactFinder Web Components to communicate directly with FactFinder. Enriching product data with the latest stock might be one of these use cases.

Configure FactFinder Web Components to communicate with your shop backend by changing the `url` attribute on the `ff-communication` element.

**Detailed Overview of Communication**

The following illustrates the five steps to enrich search responses with the latest data from 3rd-party services.

{% stepper %}
{% step %}
**AJAX Request**

When the user interacts with the search result page, AJAX requests are made at certain points. These AJAX requests need to be made to the shop system.

Change the URL settings in the `ff-communication` element.

```html
<!-- Regular setup -->
<ff-communication url="https://your.factfinder.com/FACT-Finder">
</ff-communication>

<!-- Change the URL accordingly -->
<ff-communication url="https://your.shop-endpoint.com/optional-path">
</ff-communication>
```

{% endstep %}

{% step %}
**Forward the HTTP Request to FactFinder**

The request made by FactFinder Web Components will look something like:

```
https://your.shop-endpoint.com/optional-path/rest/v5/search/shoeshop_en?query=shoe
```

The URL follows this pattern:

```
[protocol]://[domain + port]/[Optional-Path]/[REST-Endpoint]?[HTTP-Params]
```

Basically, all your shop system needs to do is replace everything before the `REST-Endpoint` with the original FactFinder URL.

Taking the URLs from the previous step, the URL changes would look like this:

```
Client to shop system:
https://your.shop-endpoint.com/optional-path/rest/v5/search/shoeshop_en?query=shoe

Shop system to FactFinder:
https://your.factfinder.com/FACT-Finder/rest/v5/search/shoeshop_en?query=shoe
```

{% endstep %}

{% step %}
**Receive JSON Response**

Next, your shop system issues the request to FactFinder and receives the data.
{% endstep %}

{% step %}
**Enrich JSON Response with Additional Data**

Let's say you want to add the latest stock to your received records. Consider the following response:

```json
{
  "hits": [
    {
      "foundWords": [],
      "id": "f2d296767b851bcf56074343a1a805a9",
      "masterValues": [],
      "position": 1,
      "score": 106.07055,
      "variantValues": [
        {
          "title": "Shoe A",
          "price": 199.90,
          "...": "..."
        }
      ]
    }
  ]
}
```

The `variantValues` list inside the `hits` list is the correct place to add product-specific data. Retrieve the stock data from your data source and add it to the JSON response.

The result would look like this:

```json
{
  "hits": [
    {
      "foundWords": [],
      "id": "f2d296767b851bcf56074343a1a805a9",
      "masterValues": [],
      "position": 1,
      "score": 106.07055,
      "variantValues": [
        {
          "title": "Shoe A",
          "price": 199.90,
          "STOCK": 12,
          "...": "..."
        }
      ]
    }
  ]
}
```

{% endstep %}

{% step %}
**Return Data to FactFinder Web Components**

You are done manipulating the JSON response. Lastly, send the data back to the client, where you can integrate your enriched search response.
{% endstep %}
{% endstepper %}


---

# 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/advanced/communication.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.