Installer le gift finder

Un bloc « demandez ce que vous voulez » avec un input texte et des chips de questions suggérées. Deux variantes visuelles : une section de recherche complète (default) et une bannière étroite (banner).

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

La bannière tourne offline. La default utilise shop-domain="mock" pour skip l'appel /widgets/gift-finder.

Quelle méthode d'installation ?

Vous avez...	Faites ceci
Une boutique Shopify (thème Online Store)	Utilisez les blocs de thème Shopify ci-dessous. Pas de HTML, pas de loader.
Un storefront non-Shopify	Copy-paste le snippet avec integration="custom".
Un backend Shopify avec un storefront custom (headless)	Copy-paste avec integration="shopify" et passez shop-domain vous-même.

Blocs de thème Shopify

Si votre boutique utilise un thème Online Store 2.0, ajoutez le bloc depuis le theme editor — aucun code requis.

• AI Gift Generator → rend variant="default" (section de recherche complète).
• Shop with AI Banner → rend variant="banner" (bannière étroite).

Les deux blocs sont disponibles sur chaque template (home, product, collection, page) et exposent les settings display, branding et layout dans le theme editor. shop-domain et integration sont injectés pour vous.

Copy-paste

Utilisez cette méthode pour les storefronts non-Shopify, ou pour les setups headless avec backend Shopify.

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

<humind-gift-finder
  variant="default"
  shop-domain="store.example.com"
  integration="shopify"
  language="fr"
  title="Qu'est-ce que vous cherchez ?"
  subtitle="Notre IA va vous aider à le trouver."
  placeholder="Je cherche..."
></humind-gift-finder>

Pour les backends non-Shopify, utilisez integration="custom" et company-id à la place de shop-domain :

<humind-gift-finder
  variant="default"
  company-id="<votre-humind-company-id>"
  integration="custom"
  language="fr"
></humind-gift-finder>

Variante bannière :

<humind-gift-finder
  variant="banner"
  integration="shopify"
  title="Shop with AI"
  subtitle="Décrivez ce qu'il vous faut"
  placeholder="Ex : shampoing anti-frisottis pour cheveux bouclés"
  section-background-color="#111"
  title-subtitle-color="#fff"
  star-color="#CCADFF"
></humind-gift-finder>

Variants

variant	Appel API au mount	Cas d'usage
default	GET /widgets/gift-finder	Bloc recherche principal sur home, collection, ou landing. Récupère les chips suggérées par l'IA et les couleurs du thème via l'API.
banner	aucun	Bande étroite pour des sections globales (header, footer, promo rows). Shell statique — pas de backend.
light	aucun	Apparence default remplie avec fond #f3f3f3. Shell statique, sans chips IA. Adapté aux pages de contenu et fonds clairs quand vous voulez une barre de recherche type CTA sans attendre l'API.
primary	aucun	Apparence default remplie avec la couleur primaire du marchand. Shell statique, sans chips IA. Adapté aux pages landing et marketing qui ont besoin d'un bloc CTA brandé.

light et primary rendent l'UI de recherche sans appeler le backend, donc sans questions générées par l'IA — uniquement l'input texte. À utiliser là où un shell statique suffit.

Attributs

Core

Attribut	Type	Défaut	Rôle
variant	'default' | 'light' | 'primary' | 'banner'	default	Layout visuel.
shop-domain	string	-	Obligatoire pour default. Passez "mock" pour une démo offline.
company-id	string	-	Alternative à shop-domain.
integration	'shopify' | 'woocommerce' | 'custom' | 'playground'	shopify	Plateforme backend. Utilisez custom quand le storefront n'est ni Shopify ni WooCommerce.
language	string	-	Code ISO 639-1. Localise aussi la valeur par défaut de placeholder quand cet attribut est laissé vide. Supporté : en, fr, de, es, ar, it, nl, pt, ru, zh.
api-url	string	https://api.thehumind.com	Override URL de base API.

Affichage

Attribut	Type	Défaut	Rôle
title	string	''	Titre. Brandé marchand, pas auto-localisé.
subtitle	string	''	Sous-titre. Brandé marchand, pas auto-localisé.
placeholder	string	What can I help you find? (en)	Placeholder de l'input. Laissez vide pour récupérer la version auto-localisée selon language.
show-questions	attr booléen	true	Affiche les chips préconfigurées (variant default uniquement).

Couleurs : variant default

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

color-scheme="default" utilise les couleurs de l'API. color-scheme="custom" nécessite primary-color.

Couleurs : variant banner

Attribut	Type	Défaut
section-background-color	string (hex)	#222
title-subtitle-color	string (hex)	#fff
star-color	string (hex)	#CCADFF

La variant banner ignore primary-color, text-color, color-scheme, button-design, show-questions.

Notes de thème

• text-color est un toggle de contraste. Utilisez #000 ou #fff uniquement.
• button-design (variant default uniquement) :
  • 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

Émet humind-open-chat sur window quand l'utilisateur soumet l'input ou clique sur une chip. L'overlay de chat (si installé) attrape l'event et s'ouvre avec la requête de l'utilisateur.

window.addEventListener('humind-open-chat', (e) => {
  console.log(e.detail.message); // string soumise par l'utilisateur
});

Mode mock

Passez shop-domain="mock" (ou company-id="mock") pour court-circuiter l'appel /widgets/gift-finder et charger un sample hard-codé. Utile pour les previews en local, Storybook, ou démos avant que le compte marchand soit live. Tous les attributs restent réactifs dans ce mode.