Developers

Embed

Load the script once, then put the element where the configurator should appear. Each product’s Publish step in Studio has its own snippet, with the manifest address filled in.

<script type="module" src="https://dev.huesix.com/embed/huesix.js"></script>
<huesix-configurator
  src="https://dev.huesix.com/studio/api/public/<workspace>/<product>/manifest.json"
></huesix-configurator>

It sizes to its container’s width; set its height with the --huesix-height CSS property. In React or Next.js, load the script in your layout and render <huesix-configurator> like any element. Style it from your site’s CSS with the parts and properties listed in Studio’s Publish step.

Attributes

Events

Dispatched on the element; they bubble, so you can listen on the document. The configuration in them carries the selection, summary, price, bill of materials, lead time and a share link.

const el = document.querySelector('huesix-configurator');
el.addEventListener('huesix:change', (e) => {
  const { price, shareUrl } = e.detail.configuration;
  document.querySelector('#total').textContent = price.formatted;
});

Methods

Each returns a promise that waits until the configurator has started.

• select('group:option'), deselect(), toggle(), setSelection(): choose options.
• getConfiguration(): selection, summary, price, bill of materials, lead time and share link.
• getState(): every group and option, for a custom panel.
• setCamera(id), snapshot(width, height): views and pictures.
• addToCart(), undo(), redo(), reset().
• setLanguage(code), getLanguage().
• trackConversion(kind, data): count your own conversion (a checkout, a booking) against the configuration, in huesix’s analytics too.
• setAnalyticsConsent(true): the same as the attribute.

Carts and prices

Never charge the price the browser sends. Check it with the quote API, which works it out from the published product:

GET /studio/api/public/<workspace>/<product>/quote?code=<share code>&v=<version>

It returns the price (before and with tax), the summary, the bill of materials, the lead time and a share link. A configuration that breaks the product’s rules comes back repaired, with valid: false. Shopify and WooCommerce do this for you with huesix’s app and plugin.

Enquiry webhooks

In Studio, Integrations sends each enquiry to your CRM or any address as it arrives. The webhook posts JSON signed with your workspace’s secret:

POST https://your-server.example/hooks/huesix
content-type: application/json
x-huesix-event: enquiry
x-huesix-signature: sha256=<HMAC-SHA256 of the raw body, hex>

{ "type": "enquiry", "enquiry": { "id", "productName", "name", "email", "phone",
  "message", "design": { "summary", "price", "leadTimeDays" }, "shareUrl", "createdAt" } }

Check the signature before trusting it, against the raw body:

import { createHmac, timingSafeEqual } from 'node:crypto';

function fromHuesix(rawBody, header, secret) {
  const expected = 'sha256=' + createHmac('sha256', secret).update(rawBody).digest('hex');
  return header?.length === expected.length &&
    timingSafeEqual(Buffer.from(header), Buffer.from(expected));
}

Connections can instead post in your system’s own shape, as JSON or a form, with the headers its API needs (kept encrypted).

REST API

Make a key in Studio → Integrations → API keys (the Pro plan and up). It’s shown once; send it in the Authorization header. Keys are for servers: never put one in a web page.

curl https://dev.huesix.com/studio/api/v1/products \
  -H "Authorization: Bearer hx_…"

Errors come back as {"error": "…"} with the HTTP status: 401 for a missing or deleted key, 402 when the plan doesn’t include the API, 404, and 429 past 120 requests a minute per key.

Analytics and consent

Published configurators report what shoppers do to huesix, for each product’s Analytics page in Studio: views, interactions, options chosen, AR and VR, shares, enquiries, carts and load times. It’s built to need no consent banner:

• No cookies, and nothing stored on the shopper’s device for it.
• No IP address or browser details kept: a visitor is counted with a hash whose salt is replaced every day, so no one can be followed from one day to the next.
• Only what the configurator does; never what shoppers type.
• Browsers that send Global Privacy Control or Do Not Track aren’t counted at all.
• Kept 400 days. A workspace can turn it off in Studio → Settings.

To wait for your own cookie banner anyway, add analytics-consent="false": events wait in memory (not sent, not stored) and go once you set it to true; they’re dropped if the shopper leaves first.

Every event is also dispatched to your page as huesix:analytics and, when the page has Google Tag Manager, pushed to its dataLayer as huesix_<event> (for example huesix_option), so you can send them to GA4 under your own consent rules.

Your own domain

Workspaces with their own domain (the Pro plan and up) can put configurators on their own address, like configure.yourbrand.com: each product at configure.yourbrand.com/<product>, and embed snippets loading from it. In Studio → Settings → Your domain, enter it and add the two records shown at your DNS provider:

• A TXT record, _huesix-verify.<your domain>, proving the domain is yours.
• A CNAME to cname.vercel-dns.com (or, for a bare domain like yourbrand.com, an A record to 76.76.21.21).

Studio checks them while the page is open and daily after, and the domain goes live with its certificate once they’re found. Links on huesix’s own address keep working.

Game engines

Each product’s Publish step offers it as a package for Unity, Unreal and PlayCanvas: the model, its finishes and the same option rules and prices, to build into a game or an installation.