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
Usage
import { createClient } from "@algolia/generative-experiences-api-client";
import { GuideContent } from "@algolia/generative-experiences-react";
const client = createClient({
appId: "ALGOLIA_APPLICATION_ID",
indexName: "your_index_name",
searchOnlyAPIKey: "ALGOLIA_SEARCH_API_KEY",
region: "us",
});
function App({ userToken, currentObjectID }) {
//...
return (
<GuideContent
client={client}
showFeedback
userToken={userToken}
objectID={currentObjectID}
itemComponent={({ hit }) => <HitComponent hit={hit} />}
/>
);
}
Parameters
The initialized Algolia Generative Experiences client.
The ID of the guide to be retrieved.
itemComponent
({ item, createElement, Fragment, html }) => JSX.Element | VNode | VNode[]
required
Component to display the items featured in the guide.
Whether to only return headlines with generated content.
Whether to generate and display the headlines on load.
The title of the related items carousel found at the end of a guide.
Default: Items featured in this article
The number of featured items displayed at the end of a guide.
Whether to show the feedback widget.
If true, you also need to provide a userToken.
The user token needed for computing feedback.
Required if showFeedback is true.
children
(props: ChildrenProps) => JSX.Element
A render function to fully customize what’s displayed.The default implementation is:function defaultRender(props) {
return (
<section
className={cx("ais-GuidesContent-wrapper", props.classNames?.wrapper)}
>
<props.View />
</section>
);
}
The view component into which your guide content will be rendered.
The class names for the component.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
Usage
import { createClient } from "@algolia/generative-experiences-api-client";
import { guideContent } from "@algolia/generative-experiences-js";
const client = createClient({
appId: "ALGOLIA_APPLICATION_ID",
indexName: "your_index_name",
searchOnlyAPIKey: "ALGOLIA_SEARCH_API_KEY",
region: "us",
});
guideContent({
container: "#content",
client: client,
userToken: "test-user",
showFeedback: true,
itemComponent({ hit }) {
return <div>{hit.title}</div>;
},
objectID: objectID,
});
Parameters
The initialized Algolia Generative Experiences client.
The ID for the guide to be retrieved.
itemComponent
({ item, createElement, Fragment, html }) => JSX.Element | VNode | VNode[]
required
Component to display the items featured in the guide.
Whether to only return headlines with generated content.
Whether to generate and display the headlines on load.
The title of the related items carousel found at the end of a guide.
Default: Items featured in this article
The number of featured items displayed at the end of a guide.
Whether to show the feedback widget.
If true, you also need to provide a userToken.
The user token needed for computing feedback.
Required if showFeedback is true
children
(props: ChildrenProps) => JSX.Element
A render function to fully customize what’s displayed.The default implementation is:function defaultRender(props) {
return (
<section
className={cx("ais-GuidesContent-wrapper", props.classNames?.wrapper)}
>
<props.View />
</section>
);
}
The view component into which your guide content will be rendered.
The Class names for the component.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;
}>;
