Installer le quiz de collection

Un quiz de découverte multi-étapes sur une page collection. Questions générées par IA, stream une shortlist de produits à la fin.

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

Tourne entièrement côté client avec collection-id="mock". Aucun appel backend.

Choisir votre parcours d'intégration

Trois façons d'installer <humind-quiz>, selon votre stack :

1. Marchand Shopify pur — utilisez le bloc de thème. Aucun HTML à copier, tous les réglages sont exposés dans l'éditeur de thème. Voir Bloc de thème Shopify.
2. Boutique non-Shopify (SuperSmart, WooCommerce, Magento, stack custom, n'importe quel storefront headless sans backend Shopify) — collez le HTML et alignez integration sur votre plateforme. Voir Non-Shopify : copier-coller.
3. Hybride : backend Shopify + storefront headless — collez le HTML manuellement avec integration="shopify" pour que le widget parle à cart.js de Shopify à l'origin de votre storefront. Voir Shopify headless hybride.

Bloc de thème Shopify

Le bloc theme app AI Collection Quiz map sur ce widget. Dans l'éditeur de thème, ouvrez un template collection et déposez le bloc. Tous les attributs de libellé sont exposés comme settings du bloc. Le bloc est restreint au template collection et résout automatiquement la collection courante via gid://shopify/Collection/{{ collection.id }}.

Aucun HTML à copier. Rien d'autre à configurer en dehors des settings du bloc.

Non-Shopify : copier-coller

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

<humind-quiz
  collection-id="ete-2026"
  integration="supersmart"
  company-id="YOUR_COMPANY_ID"
  language="fr"
></humind-quiz>

• integration — parmi shopify, supersmart, custom, playground. Utilisez custom pour tout ce qui n'est pas explicitement nommé (WooCommerce, Magento, stacks sur mesure…).
• collection-id — l'ID de la collection que vous avez synchronisée dans Humind. Voir Intégration catalogue custom pour la synchro.
• company-id — récupérez le vôtre sur la page Developer Credentials. Vous pouvez passer shop-domain à la place si votre domaine est enregistré sur votre company Humind.

Shopify headless hybride

Backend Shopify, mais votre storefront n'est pas un thème Shopify (Hydrogen, Next.js, Nuxt, etc.). Collez le HTML manuellement et gardez integration="shopify" — le widget tapera /cart/add.js à l'origin de votre storefront pour l'ajout au panier, et attend des handles/GIDs Shopify sur collection-id.

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

<humind-quiz
  collection-id="ete-2026"
  integration="shopify"
  shop-domain="store.myshopify.com"
  language="fr"
></humind-quiz>

collection-id accepte au choix :

• Un handle de collection Shopify (ex. ete-2026)
• Un GID Shopify (ex. gid://shopify/Collection/12345)
• Un ID interne Humind (24 caractères hex)

Attributs

Obligatoires

Attribut	Type	Rôle
collection-id	string	Handle/GID Shopify, ou l'ID externe que vous avez précédemment poussé pour cette integration via l'API catalogue. Passez "mock" pour une démo offline.
integration	'shopify' | 'supersmart' | 'custom' | 'playground'	Clé plateforme. Doit correspondre à la valeur utilisée lors de la synchronisation de la collection. Le backend rejette toute autre valeur avec 400.

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

Identité

Attribut	Type	Défaut	Rôle
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. Si ni company-id ni shop-domain n'est set, votre company ne peut pas être résolue et le widget charge un quiz placeholder.
is-playground	attr booléen	false	Marque la session playground (désactive les analytics prod). Accepte "", "true" ou true.
hide-continue-in-chat	attr booléen	false	Cache le bouton « Continuer dans le chat » sur l'écran de résultats. Accepte "", "true" ou true.
language	string	fr	Code ISO 639-1. Localise aussi automatiquement tous les libellés par défaut ci-dessous quand ces attributs sont laissés vides. Supporté : en, fr, de, es, ar, it, nl, pt, ru, zh.

Libellés (override i18n)

Chaque string user-facing est auto-localisée vers language quand l'attribut est laissé vide. Passez une valeur explicite pour override la traduction automatique. Tous les attributs de libellé sont réactifs — les modifier à chaud met à jour le widget.

Attribut	Défaut (en)
start-label	Start Quiz
loading-label	Loading quiz...
title-label	Product Finder
skip-label	Skip
other-label	Other
continue-label	Continue
type-answer-placeholder	Type your answer...
results-title-label	Your selection
step-analyzing-label	Analyzing your answers...
step-searching-label	Searching products...
step-found-label	Products found!
step-writing-label	Writing recommendation...
agent-name	Assistant
add-to-cart-label	Add to cart
continue-in-chat-label	Continue in chat (override suggéré : Continuer dans le chat)

Le bouton « Continuer dans le chat » est affiché par défaut sur l'écran de résultats avec le libellé de continue-in-chat-label (défaut Continue in chat — le widget ship en anglais, pensez à l'override via l'attribut pour une boutique FR). Au clic, il dispatche humind-continue-thread, attrapé par <humind-widget> sur la même page. Passez hide-continue-in-chat pour retirer complètement le bouton.

Thème

<humind-quiz> n'a pas d'API couleur. Son apparence est pilotée entièrement par le thème du dashboard. Le widget utilise le light DOM (pas de Shadow DOM) mais embarque sa propre stack de polices système (system-ui, -apple-system, sans-serif) et n'hérite pas de la typographie du site hôte. Demandez au support si vous avez besoin d'une passe typo custom.

Évènements

Évènement	Cible	Quand
humind-continue-thread	window	Clic sur « Continuer dans le chat ».
cart:updated	document	Shopify uniquement, après un POST /cart/add.js réussi.

Détail de humind-continue-thread

{
  threadId: string;
  threadToken: string;
  isPlayground?: boolean;
}

Émis quand l'utilisateur clique sur le bouton « Continuer dans le chat » (affiché par défaut, sauf si hide-continue-in-chat est set ou si continue-in-chat-label est explicitement vide) et qu'une recherche produit a généré un thread. Le <humind-widget> présent sur la même page écoute cet évènement et rouvre sur ce thread.

Mode mock

Passez collection-id="mock" pour render un quiz d'exemple hard-codé sans taper le backend. Utile pour le styling.

<humind-quiz collection-id="mock" integration="playground"></humind-quiz>