> 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/search-feedback.md).

# Search Feedback

Collect user ratings for search quality.

## Documentation

### Give feedback to the search quality

Use `ff-search-feedback` to let customers rate their search experience. The element provides two slots.

**`caption`**

Use `caption` for the element label. The complete slot is clickable. Selecting it slides out the caption and slides in the content slot.

**`content`**

Use `content` for the rating controls. It must include two HTML elements for positive and negative ratings. Any HTML element works when it has `data-positive` or `data-negative`. The component listens for clicks on these elements and updates its state.

The default rating is positive. It remains positive when the user does not select an option.

To collect feedback text, add `data-message` to an HTML element with a `value` property. Add `data-send` to an element that sends the feedback when selected.

```html
<ff-search-feedback align="right" unresolved reset-on-toggle reset-on-send>
    <div slot="caption">
        <span>Feedback</span>
    </div>
    <div slot="content">
        <p>Did you find what you were looking for?</p>
        <fieldset>
            <input type="radio" id="pos" name="positive" value="positive" checked data-positive>
            <label for="pos"> Yes</label><br>
            <input type="radio" id="neg" name="positive" value="negative" data-negative>
            <label for="neg"> No</label><br>
            <textarea rows="4" cols="15" maxlength="150" data-message></textarea>
        </fieldset>
        <button data-send>Rate</button>
        <button data-toggle>Cancel</button>
    </div>
</ff-search-feedback>
```

Add `data-toggle` to any HTML element that should toggle the `opened` property of `ff-search-feedback`.

## Demo

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

## API code

### Properties

<details>

<summary>Properties</summary>

| Name                                                              | Description                                                                   |
| ----------------------------------------------------------------- | ----------------------------------------------------------------------------- |
| **opened** (Boolean) (default: false)                             | Controls which slot is visible: `caption` when false, or `content` when true. |
| **align** (String) **Options:** "left", "right" (default: "left") | The absolute alignment of the element.                                        |
| **positive** (String) (default: "true")                           | Holds the rating state: `"true"` for positive and `"false"` for negative.     |
| **reset-on-toggle** (Boolean) (default: false)                    | Resets `positive` and clears `data-message` when a toggle hides the element.  |
| **reset-on-send** (Boolean) (default: false)                      | Resets `positive` and clears `data-message` after a successful request.       |
| **dont-show-on-result-changed** (Boolean) (default: false)        | Prevents the element from showing when results change while it is hidden.     |

</details>

### Methods

<details>

<summary>Methods</summary>

| Name        | Description                                            |
| ----------- | ------------------------------------------------------ |
| **hide()**  | Hides the element and sets `opened` to `"false"`.      |
| **show()**  | Shows the element with its former state.               |
| **reset()** | Resets the rating and clears the `data-message` value. |

</details>

### Events

<details>

<summary>Events</summary>

| Name                 | Description                                                         |
| -------------------- | ------------------------------------------------------------------- |
| **open-changed**     | Fired when the element hides or a `data-toggle` element is clicked. |
| **positive-changed** | Fired when the positive property changes.                           |
| **successful**       | Fired after a successful feedback tracking request.                 |
| **failed**           | Fired after a failed feedback tracking request.                     |

</details>

### Directives

<details>

<summary>Directives</summary>

| Name              | Description                                  |
| ----------------- | -------------------------------------------- |
| **data-positive** | Sets the rating to positive.                 |
| **data-negative** | Sets the rating to negative.                 |
| **data-message**  | Sets the rating text from the element value. |
| **data-send**     | Submits feedback.                            |
| **data-toggle**   | Toggles the `opened` property.               |

</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/search-feedback.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.