> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# GuidesFeedback

> GuidesFeedback React and JS widgets used to display Algolia's Guides feedback.

## React

The `GuidesFeedback` widget lets you gather feedback on the guides.

<Note>
  This feature uses the Insights API to gather events related to Guides feedback.
  This requires a [user token](/doc/guides/sending-events/concepts/usertoken).
</Note>

### Installation

The Algolia Guides React package is available on the [npm](https://www.npmjs.com/package/@algolia/generative-experiences-react) registry.

<CodeGroup>
  ```sh npm theme={"system"}
  npm install @algolia/generative-experiences-react
  ```

  ```sh yarn theme={"system"}
  yarn add @algolia/generative-experiences-react
  ```
</CodeGroup>

### Usage

```jsx React icon=code theme={"system"}
import { createClient } from "@algolia/generative-experiences-api-client";
import { GuidesFeedback } from "@algolia/generative-experiences-react";

const client = createClient({
  appId: "ALGOLIA_APPLICATION_ID",
  indexName: "INDEX_NAME",
  searchOnlyAPIKey: "ALGOLIA_API_KEY",
  region: "us",
});

function App({ userToken, objectIDs }) {
  //...

  return (
    <GuidesFeedback
      client={client}
      objectIDs={[objectIDs]}
      userToken={userToken}
    />
  );
}
```

### Parameters

<ParamField body="client" type="GSEClient" required>
  The initialized Algolia Generative Experiences client.
</ParamField>

<ParamField body="objectIDs" type="string" required>
  List of object IDs for which to gather feedback.
</ParamField>

<ParamField body="userToken" type="string" required>
  The user token for computing feedback.
</ParamField>

<ParamField body="voteTarget" type="&#x22;content&#x22; | &#x22;headline&#x22;" default="content">
  The target of the feedback.
</ParamField>

<ParamField body="children" type="(props: ChildrenProps) => JSX.Element">
  A render function to fully customize what's displayed.

  The default implementation is:

  ```jsx React icon=code theme={"system"}
  function defaultRender(props) {
    return (
      <section className={cx("ais-Feedback-wrapper", props.classNames?.wrapper)}>
        <props.View />
      </section>
    );
  }
  ```
</ParamField>

<ParamField body="view" type="ViewProps">
  The view component to render your feedback widget.
</ParamField>

<ParamField body="classNames" type="FeedbackClassNames">
  The class names for the component.

  ```ts TypeScript icon=code theme={"system"}
  type FeedbackClassNames = Partial<{
    wrapper?: string;
    container?: string;
    feedbackContainer?: string;
    button?: string;
    buttonIcon?: string;
    buttonsWrapper?: string;
    labelIcon?: string;
    labelWrapper?: string;
    noWrap?: string;
    screenReaderOnly?: string;
    thanksWrapper?: string;
  }>;
  ```
</ParamField>

## JavaScript

The `guidesFeedback` widget lets you gather feedback on the guides.

<Note>
  This feature uses the Insights API to gather events related to Guides feedback.
  This requires a [user token](/doc/guides/sending-events/concepts/usertoken).
</Note>

### Installation

The Algolia Guides JavaScript package is available on the [npm](https://www.npmjs.com/package/@algolia/generative-experiences-js) registry.

<CodeGroup>
  ```sh npm theme={"system"}
  npm install @algolia/generative-experiences-js
  ```

  ```sh yarn theme={"system"}
  yarn add @algolia/generative-experiences-js
  ```
</CodeGroup>

### Usage

```jsx JavaScript icon=code theme={"system"}
import { createClient } from "@algolia/generative-experiences-api-client";
import { guidesFeedback } from "@algolia/generative-experiences-js";

const client = createClient({
  appId: "ALGOLIA_APPLICATION_ID",
  indexName: "INDEX_NAME",
  searchOnlyAPIKey: "ALGOLIA_API_KEY",
  region: "us",
});

guidesFeedback({
  container: "#feedback",
  client: client,
  voteTarget: "content",
  objectIDs: objectIDs,
  userToken: "test-user",
});
```

### Parameters

<ParamField body="client" type="GSEClient" required>
  The initialized Algolia Generative Experiences client.
</ParamField>

<ParamField body="objectIDs" type="string" required>
  List of object IDs for which to gather feedback.
</ParamField>

<ParamField body="userToken" type="string" required>
  The user token for computing feedback.
</ParamField>

<ParamField body="voteTarget" type="&#x22;content&#x22; | &#x22;headline&#x22;" default="content">
  The target of the feedback.
</ParamField>

<ParamField body="children" type="(props: ChildrenProps) => JSX.Element">
  A render function to fully customize what's displayed.

  The default implementation is:

  ```jsx JavaScript icon=code theme={"system"}
  function defaultRender(props) {
    return (
      <section className={cx("ais-Feedback-wrapper", props.classNames?.wrapper)}>
        <props.View />
      </section>
    );
  }
  ```
</ParamField>

<ParamField body="view" type="ViewProps">
  The view component to render your feedback widget.
</ParamField>

<ParamField body="classNames" type="FeedbackClassNames">
  The class names for the component.

  ```ts TypeScript icon=code theme={"system"}
  type FeedbackClassNames = Partial<{
    wrapper?: string;
    container?: string;
    feedbackContainer?: string;
    button?: string;
    buttonIcon?: string;
    buttonsWrapper?: string;
    labelIcon?: string;
    labelWrapper?: string;
    noWrap?: string;
    screenReaderOnly?: string;
    thanksWrapper?: string;
  }>;
  ```
</ParamField>