Product Pages

Turn product detail pages into personalised conversations and product grids into guided discovery surfaces.

PDP Conversations

Every product page becomes a sales moment. An Ask a Question affordance next to the buy box opens the assistant with the product already in context — the shopper never re-types what they are looking at.

The shopper is already looking at one product and deciding, so the questions are narrow: sizing, fabric, care, fit, how it compares to the one they saw before. Answering them in place is what turns a back-button into a basket.

// Open the assistant with this product as the reply context
askButton.addEventListener('click', () => {
  if (!widget.isReady()) return;
  widget.show();
  widget.sendProductReply(product.externalId);
});

That call attaches the product without sending anything: the assistant opens with a product chip above the composer and the shopper types their question. This is usually what you want from a buy-box affordance — they pressed "Ask a Question" because they have one in mind.

Pass opts.query when the assistant should answer immediately instead:

// Sends a product-scoped turn right away — use for a specific canned question
widget.sendProductReply(product.externalId, {
  query: 'Does this come in blue?',
});

SDK reference

• widget.sendProductReply(product, opts?) — the canonical PDP hook. Pass the external product ID. Without opts.query it sets the product as the composer's reply context (chip shown, no assistant response yet); with opts.query it sends a product-scoped chat turn immediately. opts.isOutfit is optional.
• widget.openProductById(id, reason?) — opens the product detail panel inside the widget without a chat turn. Use it for "show me this in Sophi", not for questions.

Product Grid Panel

Every product card becomes an interactive moment. Hovering a card reveals an Ask AI overlay; pressing it opens the assistant with that product attached, turning listing pages into discovery surfaces.

Where the PDP serves a decision already made, the grid serves the one before it: the shopper has six candidates and no basis to choose. Asking from a card means they never have to open three tabs to compare.

One delegated listener covers every card, so the grid can re-render or paginate without rebinding:

grid.addEventListener('click', (event) => {
  const cta = event.target.closest('[data-sophi-ask]');
  if (!cta || !widget.isReady()) return;

  widget.show();
  widget.sendProductReply(cta.dataset.sophiAsk, {
    query: 'Tell me about this product',
  });
});

SDK reference

• widget.sendProductReply(product, opts?) — pass the card's external product ID, plus an optional opening query.
• on("add_to_favorite") — sync wishlist state when shoppers favourite products inside the widget, so the grid's own heart icons stay in step.