Install product questions

AI-generated preset questions plus a free-form input on a product page. Clicking anything opens the chat overlay with the question pre-filled.

Whitelist your domain first

Humind only renders on domains whitelisted in the URL whitelist page of your dashboard. Add every environment you embed on (prod, staging, preview, etc.).

Preview

product-id="mock" skips the /widgets/product-questions call and loads a hard-coded response.

Shopify theme block

AI Product Q&A — theme app block, available on the product template only. Add it from the theme editor; it auto-injects the current product's GID as product-id="gid://shopify/Product/{{ product.id }}". No HTML to paste.

Copy-paste

Use these snippets when you're not on pure Shopify (the theme block covers that case).

Shopify backend + custom storefront (headless / hybrid)

Pass the Shopify GID from your storefront code along with your shop domain. The backend resolves the GID to the internal Humind product ID, scoped to your company.

<script src="https://widgets.thehumind.com/v1/loader.js" defer></script>

<humind-product-questions
  product-id="gid://shopify/Product/12345"
  integration="shopify"
  shop-domain="store.myshopify.com"
  language="en"
></humind-product-questions>

Non-Shopify

Use your own product ID. It must match an external ID you previously pushed via the catalog API — otherwise the backend cannot resolve the product and the widget stays hidden.

<humind-product-questions
  product-id="SKU-ABC-123"
  integration="custom"
  company-id="YOUR_COMPANY_ID"
  language="en"
  title="Questions?"
  subtitle="Ask our AI expert"
></humind-product-questions>

company-id is your Humind company ID from the Developer Credentials page. You can pass shop-domain instead if your domain is registered on your Humind company.

Attributes

Required

Attribute	Type	Purpose
product-id	string	Shopify GID (gid://shopify/Product/12345) or your internal product ID. Pass "mock" for an offline demo.

Also need one of company-id or shop-domain so the backend can resolve your company.

Identity

Attribute	Type	Default	Purpose
integration	'shopify' | 'woocommerce' | 'custom' | 'generic' | 'playground'	shopify	Storefront platform. Use custom when the storefront is not Shopify/WooCommerce. Shopify GIDs resolved server-side.
company-id	string	-	Recommended for non-Shopify merchants. Your Humind company ID from the Developer Credentials page. Takes precedence over shop-domain.
shop-domain	string	-	Alternative to company-id. Matched against the domains registered on your company (protocol stripped, exact match). Standard choice on Shopify.
language	string	(none)	ISO 639-1 code. Also localizes title, subtitle, and placeholder defaults when those attributes are left blank. Supported: en, fr, de, es, ar, it, nl, pt, ru, zh.

Display

Leave any of these blank to get the auto-localized version for language. Any explicit value overrides the auto-translation.

Attribute	Type	Default (en)
title	string	Your Expert
subtitle	string	Ask anything about this product
placeholder	string	Ask anything about this product
show-questions	boolean attr	true

Colors

Attribute	Type	Default
color-scheme	'default' | 'custom'	default
primary-color	string (hex)	Required when color-scheme="custom"
text-color	'#000' | '#fff'	#000
title-color	string (hex)	#222
button-design	'filled' | 'outlined'	filled

color-scheme="default" pulls colors from the dashboard config. color-scheme="custom" requires primary-color and uses only the attributes on the tag.

Theming notes

• text-color is a contrast toggle: use #000 or #fff only.
• button-design:
  • filled: chip background = primary color at 10–20% opacity. Text = text-color.
  • outlined: chip background transparent. Border + text = primary color.
• The widget uses a generic sans-serif stack (Arial, Helvetica, sans-serif) inside its Shadow DOM. Host fonts don't carry over. Ask support if you need a custom typography pass.
• Sizing, spacing, and border-radius are not themable.

Events

When the user clicks a chip or submits the textarea, the widget dispatches humind-open-chat on window with detail { message, productId }:

• message: the text of the chip or the content of the textarea.
• productId: the canonical Humind product ID resolved from the value you passed as product-id. Shopify GIDs are mapped server-side.

Mock mode

product-id="mock" loads a hard-coded response with 4 sample questions, with no backend call.

Hidden states

The widget hides itself without error when the backend response is unusable. Common reasons:

• Empty questions[] array (no questions generated yet).
• Unresolved product — the backend could not resolve the product-id you passed (wrong GID, unknown external ID, or wrong company-id/shop-domain).
• Missing company-id and shop-domain — the backend can't scope the lookup and returns 400.
• Missing colors in the response.

Check the network tab on /widgets/product-questions if you expected a render and got nothing.