GuideContent

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.

npm install @algolia/generative-experiences-react

yarn add @algolia/generative-experiences-react

Usage

React

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

const client = createClient({
  appId: "ALGOLIA_APPLICATION_ID",
  indexName: "INDEX_NAME",
  searchOnlyAPIKey: "ALGOLIA_API_KEY",
  region: "us",
});

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

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

Parameters

GSEClient

required

The initialized Algolia Generative Experiences client.

string

required

The ID of the guide to be retrieved.

({ item, createElement, Fragment, html }) => JSX.Element | VNode | VNode[]

required

Component to display the items featured in the guide.

boolean

default:true

Whether to only return headlines with generated content.

boolean

default:true

Whether to generate and display the headlines on load.

string

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

string

default:"4"

The number of featured items displayed at the end of a guide.

boolean

default:false

Whether to show the feedback widget. If true, you also need to provide a userToken.

string

The user token needed for computing feedback. Required if showFeedback is true.

(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-GuidesContent-wrapper", props.classNames?.wrapper)}
    >
      <props.View />
    </section>
  );
}

ViewProps

The view component into which your guide content will be rendered.

ContentClassNames

The class names for the component.

TypeScript

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.

npm install @algolia/generative-experiences-js

yarn add @algolia/generative-experiences-js

Usage

JavaScript

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

const client = createClient({
  appId: "ALGOLIA_APPLICATION_ID",
  indexName: "INDEX_NAME",
  searchOnlyAPIKey: "ALGOLIA_API_KEY",
  region: "us",
});

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

Parameters

GSEClient

required

The initialized Algolia Generative Experiences client.

string

required

The ID for the guide to be retrieved.

({ item, createElement, Fragment, html }) => JSX.Element | VNode | VNode[]

required

Component to display the items featured in the guide.

boolean

default:true

Whether to only return headlines with generated content.

boolean

default:true

Whether to generate and display the headlines on load.

string

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

string

default:"4"

The number of featured items displayed at the end of a guide.

boolean

default:false

Whether to show the feedback widget. If true, you also need to provide a userToken.

string

The user token needed for computing feedback. Required if showFeedback is true

(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-GuidesContent-wrapper", props.classNames?.wrapper)}
    >
      <props.View />
    </section>
  );
}

ViewProps

The view component into which your guide content will be rendered.

ContentClassNames

The Class names for the component.

TypeScript

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

Search and Discovery platform

Optimization and Personalization

AI-powered experiences

Production and scale

React

Installation

Usage

Parameters

JavaScript

Installation

Usage

Parameters