What you need to get started

A TrueToForm Pro plan account with API access. Contact [email protected] in order to get your unique Share Code, API key, and Access Token.

**Make sure to keep your Access Token secret and secure! Anyone with this token will be able to access your account data.

Integrate the measurement widget

For brands looking to collect measurements from their customers remotely, adding our measurement widget to your site is simple, and will take less than 5 minutes.

First, make sure you have created a TrueToForm account. You will need to provide us with the Share Code associated with your account and the domain of your website so that we can whitelist the use of the widget on your site. Email us at [email protected] with this information to obtain your unique API Key.

Next, copy this snippet of code and fill in your own API Key. This is the code that will load our measurement widget onto your website page. We recommend setting a height for the container to avoid layout shifts when the widget mounts. The default font theme uses Hind Siliguri. We also support Inter and Spectral as font options — switch font families by setting data-theme="inter" or data-theme="spectral" on the div.

<div id="TTF_WIDGET_CONTAINER" data-api-key="<api-key>" data-mode="mtm" style="height: 48px;"></div>
<script>
  // listen for events from the TTF widget
  window.addEventListener("ttf:session:ready", (event) => {
    // do your logic here
    const widgetSessionData = event.detail;
  });

  window.addEventListener("ttf:scan-ready", (event) => {
    // do your logic here
    const scanData = event.detail;
  });

  // load the widget
  window.addEventListener("load", () => {
    if (window.__ttfWidgetLoaded) return;
    window.__ttfWidgetLoaded = true;

    const script = document.createElement("script");
    script.type = "module";
    script.src = "<https://ttf-widget.pages.dev/assets/integrations/custom.js>";
    document.body.appendChild(script);
  }, { once: true });
</script>

The data-mode="mtm" attribute is what puts the widget in measurement mode. In this mode the widget shows a "Send Measurements" button; once a customer shares a scan, the button updates to "Measurements Sent".

When a scan session is created — as the customer starts the scan-sharing flow — you will receive a ttf:session:ready event. This event contains the following information:

type WidgetSessionData = {
  sessionId: string; // unique identifier for the session
};

When a user completes the scan sharing flow and shares a scan with your site, you will receive a ttf:scan-ready event. This event contains the following information:

type ScanData = {
  scanId: string;        // unique identifier for the user's scan
  isProcessing: boolean; // if the scan data is still being processed to create an avatar/measurements
  name: string;          // scanner name
  timestamp: number;     // the timestamp when the user took the scan
  sessionId: string;     // the same session id from the ttf:session:ready event
};

You can see the avatar and its corresponding measurements on the TrueToForm web dashboard for any given scanId at: https://app.truetoform.fit/avatars/viewer/<scanId>

For automated backend functionality, you can configure webhooks to receive session data pushed directly to your server. This approach is ideal when you need to:

• Process measurement data server-side
• Trigger automated workflows (e.g., inventory checks, personalized recommendations)
• Store session data in your database
• Perform backend logic without relying on client-side events

Webhooks can be used instead of or in addition to the client-side ttf:scan-ready event messages, depending on your integration needs. Each webhook notification contains the same sessionId identifier that you receive from the ttf:session:ready event on the client-side.