Install the chat
Two lines of code on every page where the chat should be available.
Shopify store?
You don't need this page. Install the Humind app from the Shopify App Store and the widget is injected on every storefront page automatically, already wired with your domain.
1. Allow your domain
Required before the chat loads
Humind only renders on domains you've explicitly allowed. Open the URL whitelist page in your dashboard and add every domain where you'll embed the widget: production, staging, preview branches, custom dev environments. A domain that isn't in the list won't load the chat.
2. Paste the snippet
On every page where you want the chat:
<script src="https://embed.thehumind.com/loader.js" defer></script>
<humind-widget
shop-domain="your-shop.com"
template-name="index"
></humind-widget>The <script> goes at the end of <body>. The element positions itself as a fixed overlay; place it anywhere in the DOM.
shop-domain: replace with the canonical domain for this environment (no protocol, no trailing slash). Must be in your URL whitelist.template-name: the kind of page this is. Pick the value that matches (next step).
3. Pick the right template-name per page
template-name tells the AI what the visitor is looking at. It's what lets the assistant surface the right topics, entry points, and proactive messages.
Most sites only need four values:
| Value | When |
|---|---|
index | Homepage |
product | Product detail page |
collection | Collection / category listing |
cart | Cart |
If the page doesn't fit any of those, see the full list in the reference.
WARNING
Passing a value that isn't in the list makes the widget refuse to load. Always pick from the list, never a free-form string.
template-name="product" hides the floating button
On product pages the floating chat button is suppressed by design. The "Add to cart" CTA is usually pinned to the bottom of the screen on mobile and the floating chat button used to land on top of it. We expect visitors to enter the conversation through the inline <humind-product-questions> widget on the product page itself. Keep template-name="product" on those pages — context still flows to the assistant — and pair it with the product questions block.
4. Verify
Open DevTools → Network tab. You should see:
GET https://embed.thehumind.com/loader.js→ 200- A few more chunked JS requests
- No console errors
document.querySelector('humind-widget') should return the element, and a floating chat button should appear in the bottom-right of the page.
Reference
All attributes
| Attribute | Required | Default | Purpose |
|---|---|---|---|
shop-domain | ✅ | - | Your canonical shop domain for this environment (no protocol). Must be whitelisted. Omit only if you pass company-id instead. |
template-name | ✅ | - | Current page template. See values. |
language | Browser language | BCP-47 tag (en, fr, de, es, it, nl, pt, ru, ar, he, zh). Only override to force a locale independent of the visitor's browser. | |
country-code | - | ISO 3166-1 alpha-2, e.g. FR. Used for regional context (pricing, shipping). | |
cookie-consent | - | Visitor's cookie consent status. See values. | |
company-id | - | Alternative to shop-domain for setups with no public domain. See below. |
template-name values
Use the string exactly as written (case-sensitive, hyphens / underscores / slashes preserved).
| Value | Page |
|---|---|
index | Homepage |
product | Product detail page (PDP) |
collection | Collection / category listing |
list-collections | Index of all collections |
search | Search results |
cart | Cart |
page | CMS / static page |
blog | Blog index |
article | Blog post / article |
gift_card | Gift card purchase page |
password | Password-protected storefront splash |
404 | Not-found page |
metaobject | Shopify metaobject page |
robots.txt | robots.txt route (edge case) |
customers/account | Customer account dashboard |
customers/login | Customer login |
customers/register | Customer signup |
customers/order | Order detail |
customers/addresses | Address book |
customers/reset_password | Password reset |
customers/activate_account | Account activation |
If none of these fit (a checkout flow, a contact page, a bespoke route), talk to your integration lead before picking a value.
cookie-consent values
By default, Humind doesn't require consent and doesn't show any consent UI. The chat works immediately on first message. The widget stores nothing in cookies (it uses localStorage for conversation resume and visitor ID) and doesn't gate chat behind acceptance.
If you need GDPR-style consent gating, turn on Require cookie consent in the dashboard at Chat survey settings. Once enabled, the widget shows an inline consent form on the first message and won't forward the message to the assistant until the visitor accepts.
The cookie-consent attribute is optional and only meaningful when "Require consent" is on. Use it to forward the status from your own consent manager (OneTrust, Didomi, Cookiebot, Axeptio…) so shoppers who already accepted site-wide don't see a second prompt inside the chat.
| Value | What it does |
|---|---|
accepted | Visitor has granted consent elsewhere on your site. The widget skips the inline prompt and persists the acceptance. |
rejected | Visitor has declined elsewhere. The widget shows the inline prompt on the first message so shoppers can still opt in from the chat. |
pending | Consent not yet answered. Same behavior as rejected. |
Omit the attribute entirely to fall back to the per-company dashboard setting. If consent is not required in the dashboard, omitting the attribute means no prompt ever appears.
No public domain? Use company-id
For dashboard playground sessions, headless backends, or staging environments without a registered domain, pass company-id instead of shop-domain:
<humind-widget
company-id="YOUR_COMPANY_ID"
template-name="index"
integration="playground"
></humind-widget>Grab YOUR_COMPANY_ID from the Developer Credentials page in your dashboard. The YOUR_COMPANY_ID text is clickable in the snippet above.
Theming
The widget's colors, the add-to-cart button style, and the assistant's visual identity are configured per company in the dashboard on the Chat interface page. Changes propagate to every embedded widget on reload.
The widget ships with DM Sans as its default font (loaded inside the Shadow DOM) and does not inherit typography from the host site. Reach out to support if you need a custom font.
Next
- Trigger the chat from your own UI — wire a CTA button, product card, or any element to open the chat.
- Troubleshooting — widget not rendering, CSP issues, event wiring.
- FAQ — common questions when embedding Humind.