React
Search Bar
This component is used to display a search bar that triggers the Inkeep modal.
Quick Start
Install the widget
npm
bun
pnpm
yarn
npm install @inkeep/widgets
Define the component
import {
InkeepSearchBar,
type InkeepSearchBarProps,
type InkeepWidgetBaseSettings,
} from "@inkeep/widgets";
const baseSettings: InkeepWidgetBaseSettings = {
apiKey: process.env.INKEEP_INTEGRATION_API_KEY!, // required
integrationId: process.env.INKEEP_INTEGRATION_ID!, // required
organizationId: process.env.INKEEP_ORGANIZATION_ID!, // required
organizationDisplayName: "Inkeep",
primaryBrandColor: "#522FC9",
};
const searchBarProps: InkeepSearchBarProps = {
stylesheetUrls: ['/path/to/stylesheets'], // optional
stylesheets: [<link key="my-stylesheet-key" rel="stylesheet" href="path-to-my-stylesheet.css" />], // optional
baseSettings: {
...baseSettings,
},
modalSettings: {
// optional InkeepModalSettings
},
searchSettings: {
// optional InkeepSearchSettings
},
aiChatSettings: {
// optional InkeepAIChatSettings
},
};
export const SearchBar = () => {
return <InkeepSearchBar {...searchBarProps} />;
};
InkeepSearchBarProps
This type represents the configuration for the Inkeep search bar widget.
Property | Type | Description |
---|---|---|
stylesheetUrls | string[] | Optional. An array of strings. The strings must be valid absolute or relative URLs to CSS files. |
baseSettings | InkeepWidgetBaseSettings | Required. Base settings for any Inkeep widget. See reference here. |
modalSettings | InkeepModalSettings | Settings for the modal. See reference here. |
searchSettings | InkeepSearchSettings | Additional search settings for the Inkeep widget. See reference here. |
aiChatSettings | InkeepAIChatSettings | AI chat settings for the Inkeep widget. See reference here. |