Spotlight React

Spotlight UI widget as a react component.

This library is deployed to NPM.

Type Documentation

For the most up-to-date information on exports and interfaces, please visit TS Docs.

Note: This documentation is currently in beta and works most of the time.

Spotlight component API

createGlobalInterface (required)

Type: Boolean Creates the spotlight global object with tools to control the widget. Cannot be used with the visible prop.

currentItemId

Type: string | number If the host UI has a selected item (such as a product page) provide that itemId.

databaseId (required)

Type: string Crossing Minds dbId

env

Type: string Determines which Crossing Minds API URL to use.

floatingActionButton

Type: boolean Show FAB overlaying page.

getItemData (required)

Type: (itemId: string | number) => Promise<ItemDataType> Callback to fetch item data to be displayed in item card.

initialAssistantMessage

Type: string Message presented to users when starting a new chat.

initialSessionRecommendations

Type: Array<RecommendationType> Show the user recommendations as soon as Spotlight opens.

onDismiss

Type: () => void Callback triggers when user signals modal should be closed.

onSubmittedMessage

Callback triggers when user sends/submits message to agent. Useful for collecting analytics. TYPE: (({ value }: { value: string }) => void) | undefined

password (required)

Type: string Crossing Minds front-end service account password (which is a public API key).

renderItemCard (required)

Type: (item: ItemDataType) => ReactNode Render item data to a card. Receives the awaited output of getItemData as an argument.

serviceLoginId (required)

Type: string Crossing Minds front-end service account login id/name.

sessionId

Type: string Unique UUID for the session.

suggestedUserMessages

Type: Array<string> Present the user with options for queries to send to the assistant.

userId (required)

Type: string userId in Crossing Mind's user database.

visible (required)

Type: boolean Actively manage modal state. Use with onDismiss to control the modal state. If a boolean is provided, the modal will be opened or closed based on the value. Other control interfaces such as the global interface will be disabled. Leave this property undefined to allow the global interface to control the modal state.