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.
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 and Share Code. Make sure to keep the quotations around each value in the code. This will be the code that will load our widget into your website page.
<script>
// listen for messages from TTF widget
window.addEventListener("message", (event) => {
if (event.origin === "<https://widget.truetoform.fit>") {
// the first expected message is a HANDSHAKE_REQUEST from TTF side
if (event.data.type === "HANDSHAKE_REQUEST") {
// we need the HANDSHAKE message to be sent once
// 👇 use source to send the HANDSHAKE message from your side
event.source.postMessage(
{
type: "HANDSHAKE",
payload: {
apiKey: "<YOUR_API_KEY>",
clientId: "<YOUR_CLIENT_ID>",
},
},
event.origin
);
// optional
event.source.postMessage(
{
type: "SET_BUTTON_TEXT",
payload: { text: "Send Measurements" }, // change the text as you wish
},
event.origin
);
}
// payload of the WIDGET_BUTTON_CLICKED message has type WidgetSessionData
if (event.data.type === "WIDGET_BUTTON_CLICKED") {
// do your logic here
const widgetSessionData = event.data.payload;
}
// payload of the GET_SCAN_DATA message has type ScanData
if (event.data.type === "GET_SCAN_DATA") {
// do your logic here
const scanData = event.data.payload;
}
}
});
</script>
<iframe src="<https://widget.truetoform.fit>" style="border: none; position: relative; width: 304px; height: 80px; margin: -15px 0;" name="TTF" id="TTF-widget"></iframe>
The only message we require from your side is the HANDSHAKE message containing your API Key and Share Code. You can optionally include a SET_BUTTON_TEXT message to change the text on the button displayed on your site. The default if this is not set is “Send Measurements”. Please note that the maximum string length that will be displayed is 20 characters long.
When a user clicks the widget button to open the scan experience, the user will be automatically redirected to the scan sharing flow, and you will receive a WIDGET_BUTTON_CLICKED event message. This event contains the following information:
type WidgetSessionData = {
url: string; // the redirect URL that sends the user to the scan experience
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 GET_SCAN_DATA event message on the client side. 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
}
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:
Webhooks can be used instead of or in addition to the client-side GET_SCAN_DATA event messages, depending on your integration needs. Each webhook notification contains the same sessionId identifier that you receive from the WIDGET_BUTTON_CLICKED event message on the client-side. To subscribe to webhook notifications, please see our webhook documentation here.