Spiffy Commerce React Component

Documentation for the Spiffy Commerce React component

Installation Instructions

Installation

for npm

npm install [email protected]

for yarn

yarn add [email protected]

for package.json

"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:

{
    productId: string;
    parentProductId: string;
}

Example:

{
    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

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

Example

{
    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 and components is an object describing the chat components that can be styled.

See Styles for more details.

Other Links

Styles