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

GuideContent

On this page

React

The <GuideContent /> widget lets you render the content of a guide on your website.

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
24
25

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

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

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

  return (
    <GuideContent
      client={client}
      showFeedback
      userToken={userToken}
      objectID={currentObjectID}
      itemComponent={({ hit }) => <HitComponent hit={hit} />}
    />
  )
}

Parameters

client
type: GSEClient
Required

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

The objectID for the guide to be retrieved.
itemComponent
type: ({ item, createElement, Fragment, html }) => JSX.Element | VNode | VNode[]
Required

Component to display the items featured in the guide.
onlyPublished
type: boolean

Whether to only return headlines with generated content. Default: true
showImmediate
type: boolean

Whether to generate and display the headlines on load. Default: true
featuredItemsTitle
type: string

The title of the related items carousel found at the end of a guide. Default Items featured in this article
maxFeaturedItems
type: string

The number of featured items displayed at the end of a guide. Default 4
showFeedback
type: boolean

Whether to show the feedback widget. Default: false
userToken
type: string

The user token needed for computing feedback. required if showFeedback is true
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
10
11
12

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

The view component into which your guide content will be rendered.
classNames
type: ContentClassNames

The class names for the component.

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

type ContentClassNames = Partial<{
  wrapper?: string;
  container?: string;
  errorContainer?: string;
  errorContainerTitle?: string;
  contentSection?: string;
  productLink?: string;
  heroImage?: string;
  introSection?: string;
  articleContentSection?: string;
  factorsSection?: string;
  factorsList?: string;
  factorItem?: string;
  productSection?: string;
  productFactorsList?: string;
  relatedItemsSection?: string;
  relatedItemsListContainer?: string;
  relatedItemsTitle?: string;
  relatedItemsList?: string;
  item?: string;
}>;

JavaScript

The guideContent widget lets you reference and render different guides on your website.

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
20
21
22

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

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

guideContent({
  container: '#content',
  client: client,
  userToken: 'test-user',
  showFeedback: true,
  itemComponent({ hit }) {
    return <div>{hit.title}</div>;
  },
  objectID: objectID,
});

Parameters

client
type: GSEClient
Required

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

The objectID for the guide to be retrieved.
itemComponent
type: ({ item, createElement, Fragment, html }) => JSX.Element | VNode | VNode[]
Required

Component to display the items featured in the guide.
onlyPublished
type: boolean

Whether to only return headlines with generated content. Default: true
showImmediate
type: boolean

Whether to generate and display the headlines on load. Default: true
featuredItemsTitle
type: string

The title of the related items carousel found at the end of a guide. Default Items featured in this article
maxFeaturedItems
type: string

The number of featured items displayed at the end of a guide. Default 4
showFeedback
type: boolean

Whether to show the feedback widget. Default: false
userToken
type: string

The user token needed for computing feedback. required if showFeedback is true
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
10
11
12

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

The view component into which your guide content will be rendered.
classNames
type: ContentClassNames

The class names for the component.

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

type ContentClassNames = Partial<{
  wrapper?: string;
  container?: string;
  errorContainer?: string;
  errorContainerTitle?: string;
  contentSection?: string;
  productLink?: string;
  heroImage?: string;
  introSection?: string;
  articleContentSection?: string;
  factorsSection?: string;
  factorsList?: string;
  factorItem?: string;
  productSection?: string;
  productFactorsList?: string;
  relatedItemsSection?: string;
  relatedItemsListContainer?: string;
  relatedItemsTitle?: string;
  relatedItemsList?: string;
  item?: string;
}>;
Previous
GuidesHeadlines
Next
GuidesFeedback
Did you find this page helpful?
OSZAR »