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

client

GSEClient

required

The initialized Algolia Generative Experiences client.

objectIDs

string

required

List of object IDs for which to gather feedback.

userToken

string

required

The user token for computing feedback.

voteTarget

"content" | "headline"

default:"content"

The target of the feedback.

children

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

view

ViewProps

The view component to render your feedback widget.

classNames

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

client

GSEClient

required

The initialized Algolia Generative Experiences client.

objectIDs

string

required

List of object IDs for which to gather feedback.

userToken

string

required

The user token for computing feedback.

voteTarget

"content" | "headline"

default:"content"

The target of the feedback.

children

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

view

ViewProps

The view component to render your feedback widget.

classNames

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

​React

​Installation

​Usage

​Parameters

​JavaScript

​Installation

​Usage

​Parameters

React

Installation

Usage

Parameters

JavaScript

Installation

Usage

Parameters