Guides / Algolia AI / Shopping Guides / Ui library

ShoppingGuidesFeedback

A
On this page

Algolia Shopping Guides is currently in beta according to the Algolia Terms of Service (“Beta Services”).

React# A

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

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

Installation#

The Algolia Shopping 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

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

const client = createClient({
  appId: 'AJ0P3S7DWQ',
  indexName: 'your_index_name',
  searchOnlyAPIKey: '90dfaaf5755e694f341fe68f6e41a6d4',
});

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

  return (
    <ShoppingGuidesFeedback
      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

type FeedbackClassNames = Partial<{
  wrapper?: string;
  container?: string;
  button?: string;
  buttonIcon?: string;
  buttonsWrapper?: string;
  labelIcon?: string;
  labelWrapper?: string;
  noWrap?: string;
  screenReaderOnly?: string;
  thanksWrapper?: string;
}>;

JavaScript# A

The shoppingGuidesFeedback widget lets you gather feedback on the shopping guides.

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

Installation#

The Algolia Shopping 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

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

const client = createClient({
  appId: 'AJ0P3S7DWQ',
  indexName: 'your_index_name',
  searchOnlyAPIKey: '90dfaaf5755e694f341fe68f6e41a6d4',
});

shoppingGuidesFeedback({
  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

type FeedbackClassNames = Partial<{
  wrapper?: string;
  container?: string;
  button?: string;
  buttonIcon?: string;
  buttonsWrapper?: string;
  labelIcon?: string;
  labelWrapper?: string;
  noWrap?: string;
  screenReaderOnly?: string;
  thanksWrapper?: string;
}>;
Previous
ShoppingGuidesContent
Next
Alternative implementations
Did you find this page helpful?