npm package: @spiffy-ai/spiffy-react-components-dev
Description: Documentation for the Spiffy Commerce React component
Latest version: 0.5.21

# Spiffy Commerce React Component

Documentation for the Spiffy Commerce React component

# Installation Instructions

## Installation

for `npm`

```jsx
npm install spiffy-react-components@x.x.x
```

for `yarn`

```jsx
yarn add spiffy-react-components@x.x.x
```

for `package.json`

```jsx
"spiffy-react-components": "x.x.x"
```

Get the version number from Spiffy. 

# Props

## ChatFactory:

### `apiKey`

(`string`, required)

API key that will be provided to you from Spiffy. This key is used to authenticate that the calls are being made from an authenticated partner.

### `userId`

(`string`, required)

Unique ID for the user that can be used to connect their Spiffy activity to other activity on the merchant site, e.g. pageviews/clicks/purchases being tracked elsewhere like Segment.

This ID is used to report and track user activity on Spiffy.

### `variant`

(`"pdp"` or `"search"`, required)

Whether the component is on a product page (`pdp`) or search results page (`search`)

### `productInfo`

(required if `variant` is `"pdp"`)

**Type:**

```jsx
{
    productId: string;
    parentProductId: string;
}
```

**Example:**

```jsx
{
    productId: “AgAAADAA1H16aeHgQ5yEgEjcP4cziQ”,
    parentProductId: "AgAAADAAvseAh3hcRqCdIt8YfpaJgw"
}
```

An object containing `productId` and `parentProductId` where:

- `productId`- If the product has multiple variants, this ID refers to the variant that is currently displayed to the user.

This ID is used to retrieve variant product information as context for the chat. This is required if no `parentProductId` is provided, optional otherwise.
- `parentProductId` - Unique ID of the primary product being displayed on the page. In case there are variants of the product, this ID refers to the *parent* product, see `productId` to specify the specific variant the user is looking at.

This ID is used to retrieve full product information as context for the chat. This is required if no `productId` is provided, optional otherwise.

### `searchInfo`

(required if `variant` is `"search"`)

**Type**

```jsx

****{
    searchTerm: string;
    searchResults: string[];
}
```

**Example**

```jsx
{
    searchTerm: “baking”,
    searchResults: [“baking-tray”, "baking-pan"]
}
```

An object containing `searchTerm` and `searchResults` where:

- `searchTerm` - Search term used by the user to find products. This term is used as context for the chat.
- `searchResults` - List of *parent* product IDs that are the results of the search. This field can be empty if there are no results returned. If the search result returns *variants* instead, the component currently only uses the parent information. 

These IDs are used to retrieve full product information as context for the chat.

### `styles`

(`SpiffyStyleProps`, optional)

Styles object that can be used to override the custom styling of the components. 

The object consists of `theme` and `components` where `theme` is the [styled-system theme specification](https://github.com/system-ui/theme-specification) and `components` is an object describing the chat components that can be styled.

See [Styles](https://www.notion.so/Styles-109d953749c24c02bebc66a78314c9dd?pvs=21) for more details.

# Other Links

[Styles](https://www.notion.so/Styles-109d953749c24c02bebc66a78314c9dd?pvs=21)