Add with code

Use this integration for Hydrogen, a custom frontend, or a Liquid theme that you edit directly. Add the following element where the block should appear on the product page:

<just-ai-agent mode="block"></just-ai-agent>

Place it after the Buy buttons and, when present, after the customer reviews.

An active standalone <just-ai-agent> must also be present on the page. It owns the session and opens the chat when a shopper uses the block. Without it, the product block does not render. For a headless storefront, first complete the headless installation.

HTML attributes for code integrations

These attributes apply only to blocks added with code. On Shopify, the app block receives the corresponding values from the JUST dashboard.

The product block accepts the standard widget attributes, including theme, brand, font, radius, locale, country, shop, and headless. Give the block the same values as the standalone widget so they share the same design, language, and storefront context. See the complete attribute reference.

Use the block-* attributes to change the text, the number of suggested questions, or the visibility of the floating trigger bar. A block added with code takes these values from its HTML attributes. Missing values use the localized defaults.

Once the block has been saved in the JUST dashboard under Surfaces → Product block, the saved values travel with the widget session and take precedence over these attributes, so a store configures the block in one place. An empty saved text shows nothing in its place.

<just-ai-agent
  mode="block"
  block-title="A question about this jacket?"
  block-subtitle="Instant answers, 7 days a week."
  block-placeholder="Type your question..."
  block-max-shortcuts="2"
  block-hide-trigger
></just-ai-agent>

The Custom CSS saved under Surfaces → Product block in the JUST dashboard also applies to blocks added with code. No additional setup is required. See Customize the product block.

Support client-side navigation

For a single-page application, add headless="true" to the product block as well as the standalone widget. The block can then reload when the route changes. See how the product is selected.

Target the standalone widget explicitly

The page now contains two <just-ai-agent> elements. Because the product block usually appears first in the DOM, a broad selector such as document.querySelector('just-ai-agent') can select the block instead of the standalone widget.

const widget = document.querySelector('just-ai-agent:not([mode="block"])');

The snippets in the headless installation guide already use this selector.

Analytics and consent

The product block automatically dispatches just:ai-agent:open with source: 'product_block' and reports its own interactions. You do not need to dispatch an event when a shopper uses it.

On a headless or custom storefront, consent is controlled exclusively by the standalone widget. Set tracking-consent on that element; the product block has no consent setting of its own. A value of "false" prevents analytics from being sent, while omitting the attribute enables them.

Cart integration remains attached to the standalone widget only. Set cart-count and cart-id there, and dispatch cart events on that element. See the headless installation guide for the complete wiring and Analytics for the resulting metrics.