@shopassist/react

npm i @shopassist/js @shopassist/react

@shopassist/js, react and react-dom are peer dependencies, so your app decides the versions.

<ShopAssistProvider>

Loads the widget once and shares it with the tree below. Renders its children and nothing else.

<ShopAssistProvider config={{ shopDomain: "your-shop.com" }}>
  <App />
</ShopAssistProvider>

The provider compares config by value, so passing an object literal does not reload the widget on every render. A real change remounts the widget, which closes an open chat.

shutdownOnUnmount is off because the widget is one element on the page rather than part of a route, and tearing it down on every navigation loses the conversation. Turn it on when the provider itself is conditional.

The provider uses effects, so the file that renders it is a client component in a Next.js App Router app. Mark that file, not the whole layout.

useShopAssist()

const { open, close, update, isReady, status, config } = useShopAssist();

Throws when used outside a provider. open and close work before the widget has loaded; the call is held and replayed.

useOpenShopAssist()

Returns just open, stable across renders, for a button that only needs to start a chat.

useShopAssistConfig()

Returns the configuration, or null outside a provider. For components that also render on pages without the widget.

<AskShopAssist>

The generated question pills for one product.

<AskShopAssist handle={product.handle} title={product.title} />

Renders nothing when the product has no questions. See question pills.

<CompareButton>

<CompareButton product={product} label="Compare" />

Takes every option mountCompareButton takes, plus wrapperClassName for the element this component renders. See compare products.

<ShopAssistInline>

<ShopAssistInline greeting="What are you looking for?" />

Takes every option mountInline takes, except containerId, which it generates. See inline chat.