Guides / Algolia AI / Shopping Guides / Ui library

ShoppingGuidesFeedback

On this page

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

React

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
23

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

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

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

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
19

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

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

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?