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.

Aperçu du quiz de collection

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.

Le même quiz peut aussi s'ouvrir en plein écran depuis un bouton, le mécanisme derrière le bloc de thème bouton et l'exemple à copier-coller plus bas. Essayez :

Choisir votre parcours d'intégration

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

Marchand Shopify pur : utilisez un bloc de thème, en ligne ou bouton. Aucun HTML à copier, tous les réglages sont exposés dans l'éditeur de thème. Voir Blocs de thème Shopify.
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.
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.

Blocs de thème Shopify

Deux blocs theme app mappent sur ce widget. Les deux fonctionnent sur n'importe quel template, et les deux résolvent leur collection de la même façon : sur une page collection, la collection courante est utilisée automatiquement, donc un seul bloc sur le template collection couvre tout votre catalogue. Sur toute autre page (accueil, landing page, page produit), choisissez la collection dans les réglages du bloc. Rien ne s'affiche sur la boutique tant qu'aucune collection n'est résolue ; l'éditeur de thème affiche un message d'aide à la place.

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

Quiz Collection (en ligne)

Le quiz rendu directement dans la page, à l'endroit où vous déposez le bloc. Tous les attributs de libellé sont exposés comme settings du bloc.

Bouton Quiz Collection (plein écran)

Un simple bouton, stylé depuis l'éditeur de thème (libellé, couleurs, arrondi, taille, alignement). Au clic, le quiz s'ouvre en plein écran par-dessus la page. Idéal si vous avez une page dédiée au quiz et voulez votre propre contenu autour de l'appel à l'action.

En mode plein écran, la recommandation ne s'affiche pas sur la page : quand le visiteur termine, l'assistant de chat Humind s'ouvre sur la conversation du quiz et présente la recommandation dedans, avec la fiche produit, le choix des variantes, l'ajout au panier et la possibilité de continuer à poser des questions. Si l'assistant de chat n'est pas activé sur la page, les résultats s'affichent dans la surcouche à la place : le parcours n'aboutit jamais à une impasse.

Non-Shopify : copier-coller

html

<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.

html

<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)

Plein écran depuis votre propre bouton

Sur Shopify, le bloc de thème bouton fait cela sans code. Partout ailleurs, ou si vous voulez un contrôle total sur le déclencheur, câblez-le vous-même : un bouton à vous, et un script qui monte <humind-quiz display-mode="page"> dans une surcouche plein écran au clic.

Le bouton est entièrement le vôtre. Gardez vos classes et votre design, seul l'id compte :

html

<button type="button" id="quiz-trigger">Trouver mon produit</button>

Le script, une fois par page :

html

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

<script>
(function () {
  var overlay = null;

  function openQuiz() {
    if (overlay) return;

    // Surcouche plein écran, créée à la volée. Rien à styler de votre côté.
    overlay = document.createElement('div');
    overlay.style.cssText =
      'position:fixed;inset:0;z-index:2147483000;background:#fff;overflow:auto';

    var quiz = document.createElement('humind-quiz');
    quiz.setAttribute('display-mode', 'page');
    quiz.setAttribute('integration', 'shopify');
    quiz.setAttribute('collection-id', 'ete-2026');
    quiz.setAttribute('shop-domain', 'boutique.myshopify.com');
    quiz.setAttribute('language', 'fr');

    // Le visiteur est revenu en arrière avant la première question, ou la
    // recommandation est partie dans l'assistant : on ferme dans les deux cas.
    quiz.addEventListener('page-back', closeQuiz);
    quiz.addEventListener('results-in-chat', closeQuiz);

    overlay.appendChild(quiz);
    document.body.appendChild(overlay);
    document.body.style.overflow = 'hidden';
  }

  function closeQuiz() {
    if (!overlay) return;
    overlay.remove();
    overlay = null;
    document.body.style.overflow = '';
  }

  document.getElementById('quiz-trigger').addEventListener('click', openQuiz);
})();
</script>

Remplacez integration, collection-id et shop-domain (ou company-id) par les mêmes valeurs que pour un embed en ligne ; les sections ci-dessus s'appliquent telles quelles.

En mode page, le quiz n'affiche pas sa recommandation dans la surcouche. Quand le visiteur termine, il ouvre le widget de chat Humind sur la conversation du quiz et émet results-in-chat pour que votre page ferme la surcouche. Si <humind-widget> n'est pas sur la page, les résultats s'affichent dans la surcouche à la place et l'événement n'est jamais émis.

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.
`market-key`	`string`	-	Setups multimarché uniquement : nomme le marché quand plusieurs marchés partagent le même domaine (obligatoire dans ce cas, ignoré sur un domaine mono-marché). Posé automatiquement sur Shopify. Même comportement que le widget de chat : voir plusieurs marchés sur un même domaine.
`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`.
`display-mode`	`'compact' \| 'page'`	`compact`	`compact` rend le quiz en ligne avec ses résultats sur place. `page` est la mise en page plein écran : toujours déplié, et la finale est confiée au widget de chat (voir Plein écran depuis votre propre bouton).
`page-image-url`	`string`	-	Mode `page` uniquement. URL d'un visuel affiché à côté des questions dans la mise en page plein écran.

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.
`page-back`	élément `<humind-quiz>`	Mode `page` uniquement. Le visiteur est revenu en arrière avant la première question. Fermez votre surcouche.
`results-in-chat`	élément `<humind-quiz>`	Mode `page` uniquement. La recommandation a été confiée au widget de chat. Detail : `{ threadId, threadToken }`. Fermez votre surcouche.

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.

html

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

Installer le quiz de collection ​

Preview ​

Choisir votre parcours d'intégration ​

Blocs de thème Shopify ​

Quiz Collection (en ligne) ​

Bouton Quiz Collection (plein écran) ​

Non-Shopify : copier-coller ​

Shopify headless hybride ​

Plein écran depuis votre propre bouton ​

Attributs ​

Obligatoires ​

Identité ​

Libellés (override i18n) ​

Thème ​

Évènements ​

Détail de humind-continue-thread ​

Mode mock ​

Installer le quiz de collection

Preview

Choisir votre parcours d'intégration

Blocs de thème Shopify

Quiz Collection (en ligne)

Bouton Quiz Collection (plein écran)

Non-Shopify : copier-coller

Shopify headless hybride

Plein écran depuis votre propre bouton

Attributs

Obligatoires

Identité

Libellés (override i18n)

Thème

Évènements

Détail de `humind-continue-thread`

Mode mock