One script tag. Or one React component.

Quickstart: script tag

Put the target where the launcher should appear (usually under your product media):

<div id="trialhood-product"></div>
<script defer src="https://cdn.trialhood.com/sdk/v1/loader.js"
        data-api-base="https://analyst-attached-piece-him.trycloudflare.com"></script>
<script>
  function mountTrialhood() {
    Trialhood.mount({
      target: '#trialhood-product',
      storeId: 'st_…',          // public store id, never a secret
      productId: 'SKU-123',      // your product id
      variantId: 'SKU-123-BLK',  // optional
      consent: { analytics: false },
      strings: { tryOn: 'Try these on' },
    });
  }
  if (window.Trialhood) mountTrialhood();
  else window.addEventListener('trialhood:ready', mountTrialhood, { once: true });
</script>

Mount is idempotent per target. Call instance.update({ variantId }) when the shopper picks another variant, and instance.setConsent({ analytics }) when your cookie banner changes.

React and Shopify Hydrogen

import { Trialhood } from '@trialhood/sdk-react';

<Trialhood
  storeId="st_…"
  productId={productId}
  variantId={variantId}
  consent={{ analytics: consentGiven }}
  onStateChange={(d) => setState(d.state)}
/>;

The server renders an empty element and the runtime mounts after hydration, with its space reserved so the page does not shift. A Hydrogen product route example is in our repository (shared with pilot partners).

Weight and loading

• Loader: 19.6 KB gzip (CI budget 30 KB), loads with your page.
• 3D viewer and try-on: separate chunks, loaded on the first tap.
• Face tracking: model and WASM self-hosted on our CDN, downloaded only after the shopper accepts the consent screen. The camera and tracking start only after Start camera.
• Failure: any error or timeout (8 s) collapses the widget; your original media stays.

Content Security Policy

Events

The runtime sends only allowlisted events. Operational events (for example consent shown or try-on ready) are sent without analytics consent; behavioural events need it.

Developer questions