Installer les questions produit

Questions préconfigurées générées par IA + un input libre sur une page produit. Cliquer ouvre l'overlay de chat avec la question pré-remplie.

Whitelister votre domaine d'abord

Humind ne render que sur les domaines whitelistés dans la page URL whitelist de votre dashboard. Ajoutez chaque environnement où vous embarquez (prod, staging, preview, etc.).

Preview

product-id="mock" skip l'appel /widgets/product-questions et charge une réponse hard-codée.

Bloc theme Shopify

Bloc theme app AI Product Q&A — disponible uniquement sur le template produit. Ajoutez-le depuis l'éditeur de theme : il injecte automatiquement le GID du produit courant via product-id="gid://shopify/Product/{{ product.id }}". Aucun HTML à coller.

Copy-paste

Utilisez ces snippets si vous n'êtes pas sur du Shopify pur (le bloc theme couvre ce cas).

Backend Shopify + storefront custom (headless / hybride)

Passez le GID Shopify depuis le code de votre storefront avec votre shop domain. Le backend résout le GID en ID produit Humind interne, scopé sur votre 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="fr"
></humind-product-questions>

Non-Shopify

Utilisez votre propre ID produit. Il doit correspondre à un ID externe que vous avez pushé via l'API catalogue, sinon le backend ne peut pas résoudre le produit et le widget reste caché.

<humind-product-questions
  product-id="SKU-ABC-123"
  integration="custom"
  company-id="YOUR_COMPANY_ID"
  language="fr"
  title="Des questions ?"
  subtitle="Demandez à notre expert IA"
></humind-product-questions>

company-id est votre ID de company Humind depuis la page Developer Credentials. Vous pouvez passer shop-domain à la place si votre domaine est enregistré sur votre company Humind.

Attributs

Obligatoires

Attribut	Type	Rôle
product-id	string	GID Shopify (gid://shopify/Product/12345) ou votre ID produit interne. Passez "mock" pour une démo offline.

Il faut aussi un company-id ou un shop-domain pour que le backend puisse résoudre votre company.

Identité

Attribut	Type	Défaut	Rôle
integration	'shopify' | 'woocommerce' | 'custom' | 'generic' | 'playground'	shopify	Plateforme du storefront. Utilisez custom quand le storefront n'est pas Shopify/WooCommerce. Les GIDs Shopify sont résolus côté serveur.
company-id	string	-	Recommandé pour les marchands non-Shopify. Votre ID de company Humind depuis la page Developer Credentials. Prend le pas sur shop-domain.
shop-domain	string	-	Alternative à company-id. Matché contre les domaines enregistrés sur votre company (protocole stripé, match exact). Choix standard sur Shopify.
language	string	(aucun)	Code ISO 639-1. Localise aussi les valeurs par défaut de title, subtitle et placeholder quand ces attributs sont laissés vides. Supporté : en, fr, de, es, ar, it, nl, pt, ru, zh.

Affichage

Laissez n'importe lequel vide pour récupérer la version auto-localisée selon language. Toute valeur explicite override la traduction automatique.

Attribut	Type	Défaut (en)
title	string	Your Expert
subtitle	string	Ask anything about this product
placeholder	string	Ask anything about this product
show-questions	attr booléen	true

Couleurs

Attribut	Type	Défaut
color-scheme	'default' | 'custom'	default
primary-color	string (hex)	Obligatoire quand color-scheme="custom"
text-color	'#000' | '#fff'	#000
title-color	string (hex)	#222
button-design	'filled' | 'outlined'	filled

color-scheme="default" utilise les couleurs configurées dans le dashboard. color-scheme="custom" nécessite primary-color et n'utilise que les attributs sur la balise.

Notes de thème

• text-color est un toggle de contraste : utilisez #000 ou #fff uniquement.
• button-design :
  • filled : fond chip = couleur primaire à 10–20 % d'opacité. Texte = text-color.
  • outlined : fond chip transparent. Bordure + texte = couleur primaire.
• Le widget utilise une stack sans-serif générique (Arial, Helvetica, sans-serif) dans son Shadow DOM. Les polices de l'hôte ne sont pas reprises. Demandez au support si vous avez besoin d'une passe typo custom.
• Sizing, espacement et border-radius ne sont pas thémables.

Évènements

Quand l'utilisateur clique sur une chip ou soumet le textarea, le widget émet humind-open-chat sur window avec un detail { message, productId } :

• message : le texte de la chip ou le contenu du textarea.
• productId : l'ID produit Humind canonique résolu depuis la valeur que vous avez passée en product-id. Les GIDs Shopify sont mappés côté serveur.

Mode mock

product-id="mock" charge une réponse hard-codée avec 4 questions d'exemple. Aucun appel backend.

États cachés

Le widget se cache sans erreur quand la réponse backend est inutilisable. Raisons fréquentes :

• Tableau questions[] vide (pas encore de questions générées).
• Produit non résolu — le backend n'a pas pu résoudre le product-id passé (mauvais GID, ID externe inconnu, ou company-id/shop-domain erroné).
• company-id et shop-domain tous les deux absents — le backend ne peut pas scoper le lookup et renvoie 400.
• Couleurs absentes de la réponse.

Vérifiez l'onglet network sur /widgets/product-questions si vous attendiez un render et n'avez rien eu.