DevBit: Summer Edition | June 25 — Live demos. Real code. Practical insights for developers. Register now →
Guides / Algolia AI / Guides / Ui library

GuidesFeedback

On this page

React

The <GuidesFeedback /> widget lets you gather feedback on the guides.

This feature uses the Insights API to gather events related to Guides feedback. You will need to set up a User Token.

Installation

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

Copy 
1
2
3

yarn add @algolia/generative-experiences-react
# or
npm install @algolia/generative-experiences-react

Usage

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

import { createClient } from '@algolia/generative-experiences-api-client';
import {
  GuidesFeedback,
} from '@algolia/generative-experiences-react';

const client = createClient({
  appId: 'YourApplicationID',
  indexName: 'your_index_name',
  searchOnlyAPIKey: 'YourSearchOnlyAPIKey',
  region: 'us',
});

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

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

Parameters

client
type: GSEClient
Required

The initialized Algolia Generative Experiences client.
objectIDs
type: string
Required

List of objectIDs to gather feedback on.
userToken
type: string
Required

The user token needed for computing feedback.
voteTarget
type: string
Required

The target of the feedback. (one of content/headline, default: content).
children
type: (props: ChildrenProps) => JSX.Element

A render function to fully customize what’s displayed.

The default implementation is:

Copy 
1
2
3
4
5
6
7
8
9

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

The view component to render your feedback widget.
classNames
type: FeedbackClassNames

The class names for the component.

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13

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. You will need to set up a User Token.

Installation

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

Copy 
1
2
3

yarn add @algolia/generative-experiences-js
# or
npm install @algolia/generative-experiences-js

Usage

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

import { createClient } from '@algolia/generative-experiences-api-client';
import {
  guidesFeedback,
} from '@algolia/generative-experiences-js';

const client = createClient({
  appId: 'YourApplicationID',
  indexName: 'your_index_name',
  searchOnlyAPIKey: 'YourSearchOnlyAPIKey',
  region: 'us',
});

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

Parameters

client
type: GSEClient
Required

The initialized Algolia Generative Experiences client.
objectIDs
type: string
Required

List of objectIDs to gather feedback on.
userToken
type: string
Required

The user token needed for computing feedback.
voteTarget
type: string
Required

The target of the feedback. (one of content/headline, default: content).
children
type: (props: ChildrenProps) => JSX.Element

A render function to fully customize what’s displayed.

The default implementation is:

Copy 
1
2
3
4
5
6
7
8
9

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

The view component to render your feedback widget.
classNames
type: FeedbackClassNames

The class names for the component.

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13

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;
}>;
Previous
GuideContent
Next
Alternative implementations
Did you find this page helpful?