Embedding & subdomain

How the hearing test is hosted on its own subdomain and embedded into a parent site via an iframe.

Hosting

The application is deployed as a standalone Next.js site at its own subdomain:

https://app.audionycs.com/

It is a self-contained web app — open the URL directly and the full test flow (landing page → profile setup → tone test → audiogram) runs inside it, with no dependency on the parent site.

Why a separate subdomain

Running the test on app.audionycs.com rather than as a sub-path of the marketing site gives a few practical benefits:

Independent deploys. The test app can be released, rolled back, and cache-busted without touching the parent site.
Cookie & storage isolation. The app uses localStorage (for the user’s first name) and Klaviyo’s own cookies. Keeping them on a separate origin means they do not mix with the parent site’s session.
Simpler CSP. The app loads third-party scripts (Klaviyo, audio assets). A dedicated subdomain keeps its Content-Security-Policy independent from the parent.
Portability. The same subdomain can be embedded into multiple landing pages or campaigns without duplicating the app.

Embedding with an iframe

To embed the test inside a parent page, drop this snippet where you want it to appear:

<iframe
  src="https://app.audionycs.com/"
  title="Online Hearing Test"
  width="100%"
  height="900"
  style="border: 0; display: block;"
  allow="autoplay; microphone"
  loading="lazy"
></iframe>

About the attributes

allow="autoplay" — the tone test plays pure tones. Without this, some browsers will block playback inside an iframe.
loading="lazy" — defers loading until the iframe scrolls into view, keeping the parent page fast.
height="900" — the test is long enough that a fixed tall height works better than trying to auto-resize the iframe.

Responsive embed

For a responsive, full-viewport embed, wrap the iframe in a container with a fixed aspect ratio or a viewport-based height:

<div style="width: 100%; height: 100vh; min-height: 700px;">
  <iframe
    src="https://app.audionycs.com/"
    title="Online Hearing Test"
    style="width: 100%; height: 100%; border: 0;"
    allow="autoplay"
  ></iframe>
</div>

Headphones required

The test requires headphones for accurate left/right channel separation. Make sure the parent page tells the user this before they reach the embed, so they are ready when the landing page inside the iframe asks them to plug in.

Frame-ancestor policy

The application does not set a restrictive X-Frame-Options or Content-Security-Policy: frame-ancestors header, so it can be embedded by any parent origin. If you need to restrict which domains are allowed to embed the test, add a frame-ancestors directive to the deploy configuration.