Question pills

Question pills are a row of questions ShopAssist generated for one product. Clicking one opens the chat with that question already asked.

The pills need the chat widget on the page, because that is what they open. Install it first.

React

import { AskShopAssist } from "@shopassist/react";

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

The shop, API URL and language come from the provider.

Anywhere else

import { mountQuestions } from "@shopassist/js";

const unmount = mountQuestions(document.getElementById("questions"), {
  handle: "rain-jacket",
  title: "Rain Jacket",
  shopDomain: "your-shop.com",
});

handle is the product's URL slug, and it must match the handle ShopAssist has for the product. title is prefixed to the question so the assistant knows what is being asked about.

Both forms return a cleanup function. Call it when the element goes away.

Styling

The pills carry class names and no styles, so they inherit your typography and colors. Style them yourself:

.sa-questions-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sa-question-pill {
  padding: 10px 20px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 24px;
  background: #fff;
  font: inherit;
  cursor: pointer;
}

.sa-question-pill--cta {
  border-color: var(--brand);
  color: var(--brand);
  font-weight: 600;
}

Pass classPrefix to rename sa if it collides with your own styles.

The trailing pill

The last pill is an "ask anything" button, which opens the chat with no question. Rename it or leave it out:

mountQuestions(el, { handle, shopDomain, askLabel: "Ask us anything" });
mountQuestions(el, { handle, shopDomain, askLabel: null });

The two are reported differently. A question pill counts as a conversation starter; the trailing pill counts as an explicit "let me ask", and it is the only thing that appears in the Ask ShopAssist bucket of your weekly report.

When nothing renders

The element hides itself when there are no questions for the product. That is the normal case for most of a catalog, and it is not an error. It happens when:

• The shop has the feature turned off.
• That product has no questions enabled in the ShopAssist dashboard.
• handle does not match any product in the imported catalog.

To tell them apart, ask the API:

import { fetchQuestions } from "@shopassist/js";

await fetchQuestions("rain-jacket", { shopDomain: "your-shop.com" });
// { enabled: false, questions: [] }

Stored answers

When ShopAssist already has an answer for a question, clicking the pill serves that answer as written rather than asking the model. Both the React component and mountQuestions do this for you.