Embed the face shape finder

Updated 2026-10-17

A free face shape finder for your own site. The visitor chooses a photo, the measurement runs in their browser with no sign-up, and the widget shows their face shape, fWHR and symmetry. Three ways to add it: a script tag, a web component or a React component.

A code builder with a live preview is on thefaceanalysis.com/embed.

Script tag

<div data-tfa-widget="face-shape" data-size="standard"></div>
<script async src="https://thefaceanalysis.com/embed.js"></script>

The script builds the iframe, keeps its height equal to its content and writes a visible credit link under it into your page.

npm: web component

npm install thefaceanalysis-embed

<script type="module">import "thefaceanalysis-embed";</script>
<face-analysis-widget tool="face-shape" size="standard"></face-analysis-widget>

npm: React

import { FaceAnalysisWidget } from "thefaceanalysis-embed/react";

<FaceAnalysisWidget size="wide" />

The wrapper loads the web component on the client only, so it is safe in server-rendered apps.

Plain iframe

For pages that block scripts. Include the credit link yourself.

<iframe src="https://thefaceanalysis.com/embed/face-shape" title="Face shape detector by The Face Analysis" width="480" height="600" style="border:0;width:100%;max-width:480px" loading="lazy"></iframe>
<p style="text-align:center;font:12px system-ui,sans-serif">Face analysis by <a href="https://thefaceanalysis.com/face-shape" target="_blank" rel="noopener">The Face Analysis</a></p>

Options

Resize messages

The widget posts its content height to the parent window so the iframe can match it. The script and the web component handle this for you; with a plain iframe you can listen yourself.

window.addEventListener("message", (e) => {
  if (e.origin !== "https://thefaceanalysis.com") return;
  const m = e.data;
  if (m && m.source === "tfa-embed" && m.type === "resize") {
    iframe.style.height = Math.ceil(m.height) + "px";
  }
});

Privacy and what is counted

The measurement runs in the visitor's browser: the page is free, needs no sign-up and loads the face landmark model only after a photo is chosen. We count widget use per embedding site (the hostname only) to see which embeds are used; no photo, measurement or result is part of that count.

Terms of use

• Free to use on any website, including commercial ones.
• Keep the credit link under the widget visible. Do not hide it, restyle it to invisibility or remove it.
• Do not alter the widget's content or present its reading as a medical or cosmetic diagnosis. It measures proportions in one photo.
• We may change or retire the widget.

Source: thefaceanalysis-embed.