Installer le chat
Deux lignes de code sur chaque page où le chat doit être disponible.
Vous êtes sur Shopify ?
Pas besoin de cette page. Installez l'app Humind depuis le Shopify App Store : le widget est injecté automatiquement sur toutes les pages de votre boutique, déjà câblé avec votre domaine.
1. Autoriser votre domaine
Requis avant que le chat se charge
Humind ne s'affiche que sur les domaines que vous avez explicitement autorisés. Ouvrez la page URL whitelist dans votre dashboard et ajoutez chaque domaine où vous embarquerez le widget : production, staging, branches de preview, environnements de dev custom. Un domaine qui n'est pas dans la liste ne chargera pas le chat.
2. Coller le snippet
Sur chaque page où vous voulez le chat :
<script src="https://embed.thehumind.com/loader.js" defer></script>
<humind-widget
shop-domain="votre-shop.com"
template-name="index"
></humind-widget>Le <script> va à la fin du <body>. L'élément se positionne en overlay fixe, placez-le n'importe où dans le DOM.
shop-domain: remplacez par le domaine canonique de cet environnement (sans protocole, sans slash final). Doit être dans votre whitelist.template-name: le type de page. Choisissez la valeur qui correspond (étape suivante).
3. Choisir le bon template-name par page
template-name indique à l'IA ce que le visiteur regarde. C'est ce qui permet à l'assistant de remonter les bons sujets, points d'entrée et messages proactifs.
La plupart des sites n'ont besoin que de quatre valeurs :
| Valeur | Quand |
|---|---|
index | Page d'accueil |
product | Page produit |
collection | Listing collection / catégorie |
cart | Panier |
Si la page ne rentre dans aucune, consultez la liste complète en référence.
WARNING
Passer une valeur qui n'est pas dans la liste fait que le widget refuse de charger. Choisissez toujours depuis la liste, jamais une chaîne libre.
template-name="product" cache le bouton flottant
Sur les pages produit, le bouton de chat flottant est intentionnellement supprimé. Le CTA « Add to cart » est généralement pinné en bas de l'écran sur mobile et le bouton flottant venait se poser dessus. On attend des visiteurs qu'ils entrent dans la conversation via le widget inline <humind-product-questions> sur la page produit elle-même. Gardez template-name="product" sur ces pages — le contexte continue de remonter à l'assistant — et associez-le au bloc product questions.
4. Vérifier
Ouvrez DevTools → onglet Network. Vous devriez voir :
GET https://embed.thehumind.com/loader.js→ 200- Quelques chunks JS supplémentaires
- Aucune erreur console
document.querySelector('humind-widget') doit renvoyer l'élément, et un bouton flottant de chat doit apparaître en bas à droite de la page.
Référence
Tous les attributs
| Attribut | Obligatoire | Défaut | Rôle |
|---|---|---|---|
shop-domain | ✅ | - | Votre domaine canonique pour cet environnement (sans protocole). Doit être whitelisté. Omettez uniquement si vous passez company-id à la place. |
template-name | ✅ | - | Template de la page courante. Voir valeurs. |
language | Langue navigateur | Tag BCP-47 (en, fr, de, es, it, nl, pt, ru, ar, he, zh). Forcez une locale uniquement si vous voulez ignorer la langue du navigateur du visiteur. | |
country-code | - | ISO 3166-1 alpha-2, ex. FR. Utilisé pour le contexte régional (prix, livraison). | |
cookie-consent | - | Statut de consentement du visiteur. Voir valeurs. | |
company-id | - | Alternative à shop-domain pour les setups sans domaine public. Voir ci-dessous. |
Valeurs de template-name
Utilisez la chaîne exactement telle qu'écrite (sensible à la casse, tirets / underscores / slashes préservés).
| Valeur | Page |
|---|---|
index | Page d'accueil |
product | Page produit (PDP) |
collection | Listing collection / catégorie |
list-collections | Index de toutes les collections |
search | Résultats de recherche |
cart | Panier |
page | Page CMS / statique |
blog | Index blog |
article | Article de blog |
gift_card | Page d'achat carte cadeau |
password | Splash de boutique password-protected |
404 | Page not-found |
metaobject | Page metaobject Shopify |
robots.txt | Route robots.txt (edge case) |
customers/account | Dashboard compte client |
customers/login | Login client |
customers/register | Signup client |
customers/order | Détail d'une commande |
customers/addresses | Carnet d'adresses |
customers/reset_password | Reset mot de passe |
customers/activate_account | Activation de compte |
Si aucune ne correspond (flow checkout, page contact, route bespoke), parlez-en à votre lead d'intégration avant de choisir une valeur.
Valeurs de cookie-consent
Par défaut, Humind n'exige aucun consentement et n'affiche aucune UI de consentement. Le chat démarre dès le premier message. Le widget n'écrit rien dans des cookies (il utilise localStorage pour la reprise de conversation et l'ID visiteur) et ne bloque pas le chat derrière une acceptation.
Si vous avez besoin d'un gating style RGPD, activez Require cookie consent dans le dashboard sur Paramètres du chat survey. Une fois activé, le widget affiche un formulaire de consentement inline au premier message et n'envoie le message à l'assistant qu'après acceptation.
L'attribut cookie-consent est optionnel et n'a de sens que quand "Require consent" est activé. Utilisez-le pour remonter le statut depuis votre propre CMP (OneTrust, Didomi, Cookiebot, Axeptio…) afin que les visiteurs qui ont déjà accepté au niveau site ne voient pas un second prompt dans le chat.
| Valeur | Comportement |
|---|---|
accepted | Le visiteur a donné son consentement ailleurs sur le site. Le widget saute le prompt inline et persiste l'acceptation. |
rejected | Le visiteur a refusé ailleurs. Le widget propose un prompt inline au premier message (pour que l'acheteur puisse changer d'avis depuis le chat). |
pending | Pas encore répondu. Même comportement que rejected. |
Omettez l'attribut complètement pour retomber sur le réglage du dashboard. Si "Require consent" n'est pas activé côté dashboard, omettre l'attribut signifie qu'aucun prompt n'apparaît jamais.
Pas de domaine public ? Utilisez company-id
Pour les sessions playground du dashboard, les backends headless ou les environnements de staging sans domaine enregistré, passez company-id à la place de shop-domain :
<humind-widget
company-id="YOUR_COMPANY_ID"
template-name="index"
integration="playground"
></humind-widget>Récupérez YOUR_COMPANY_ID depuis la page Credentials développeur dans le dashboard. Le texte YOUR_COMPANY_ID est cliquable dans le snippet ci-dessus.
Thème
Les couleurs, le style du bouton add-to-cart et l'identité visuelle de l'assistant se configurent par company dans le dashboard, sur la page Chat interface. Les changements propagent à tous les widgets embarqués au reload.
Le widget utilise DM Sans comme police par défaut (chargée dans le Shadow DOM) et n'hérite pas de la typographie du site hôte. Contactez le support si vous avez besoin d'une police custom.
Pour aller plus loin
- Déclencher le chat depuis votre UI — câbler un CTA, une carte produit ou n'importe quel élément pour ouvrir le chat.
- Dépannage — widget qui ne s'affiche pas, problèmes CSP, câblage des évènements.
- FAQ — questions fréquentes sur l'intégration de Humind.