GuidesFeedback

React

The GuidesFeedback widget lets you gather feedback on the guides.

This feature uses the Insights API to gather events related to Guides feedback. This requires a user token.

Installation

The Algolia Guides React package is available on the npm registry.

npm install @algolia/generative-experiences-react

yarn add @algolia/generative-experiences-react

Usage

React

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

GSEClient

required

The initialized Algolia Generative Experiences client.

string

required

List of object IDs for which to gather feedback.

string

required

The user token for computing feedback.

"content" | "headline"

default:"content"

The target of the feedback.

(props: ChildrenProps) => JSX.Element

A render function to fully customize what’s displayed.The default implementation is:

React

function defaultRender(props) {
  return (
    <section className={cx("ais-Feedback-wrapper", props.classNames?.wrapper)}>
      <props.View />
    </section>
  );
}

ViewProps

The view component to render your feedback widget.

FeedbackClassNames

The class names for the component.

TypeScript

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;
}>;

JavaScript

The guidesFeedback widget lets you gather feedback on the guides.

This feature uses the Insights API to gather events related to Guides feedback. This requires a user token.

Installation

The Algolia Guides JavaScript package is available on the npm registry.

npm install @algolia/generative-experiences-js

yarn add @algolia/generative-experiences-js

Usage

JavaScript

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

GSEClient

required

The initialized Algolia Generative Experiences client.

string

required

List of object IDs for which to gather feedback.

string

required

The user token for computing feedback.

"content" | "headline"

default:"content"

The target of the feedback.

(props: ChildrenProps) => JSX.Element

A render function to fully customize what’s displayed.The default implementation is:

JavaScript

function defaultRender(props) {
  return (
    <section className={cx("ais-Feedback-wrapper", props.classNames?.wrapper)}>
      <props.View />
    </section>
  );
}

ViewProps

The view component to render your feedback widget.

FeedbackClassNames

The class names for the component.

TypeScript

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;
}>;

Search and Discovery platform

Optimization and Personalization

AI-powered experiences

Production and scale

React

Installation

Usage

Parameters

JavaScript

Installation

Usage

Parameters