Embedding a scorecard

A published scorecard can run on your own site. You add one script tag; it creates a responsive iframe that resizes itself as the visitor moves through the questions.

Turn embedding on

Embedding is off until you enable it per scorecard.

1. Open the admin at https://app.dimensionkit.com/admin
2. Edit the scorecard and open its Embed tab
3. Switch Embed on
4. List the origins allowed to embed it
5. Copy the generated snippet

Only published scorecards can be embedded. A draft returns 404.

Allowed origins

An origin is a scheme, host and port — not a page URL, and no trailing path:

https://example.com
https://www.example.com
http://localhost:3000

https://example.com and https://www.example.com are different origins. If your site serves both, list both.

The loader tells the app which page it is running on. If that origin is not on the list, the iframe returns 403 rather than rendering. This is enforced server-side with a Content-Security-Policy: frame-ancestors header, so it holds even if someone copies your snippet onto another site.

The snippet

<div id="scorecard"></div>
<script
  src="https://app.dimensionkit.com/embed.js"
  data-dk-scorecard="your-scorecard-slug"
  data-dk-target="#scorecard"
></script>

Attribute	Required	What it does
data-dk-scorecard	yes	The scorecard slug
data-dk-target	yes	CSS selector for the element to mount into
data-dk-min-height	no	Starting height in pixels, before the first resize
data-dk-title	no	Accessible title for the iframe

Mounting it yourself

If you need to decide at runtime — a single-page app, or a scorecard chosen from a CMS — call the loader directly instead:

<div id="scorecard"></div>
<script src="https://app.dimensionkit.com/embed.js"></script>
<script>
  window.DimensionKit.embed({
    target: '#scorecard',
    scorecard: 'your-scorecard-slug',
    minHeight: 640,
    title: 'Scorecard',
  });
</script>

Reacting to what the visitor does

The embed emits events on the target element, so you can fire analytics or reveal something once a visitor finishes:

document.querySelector('#scorecard')
  .addEventListener('dimensionkit:completed', () => {
    // the visitor reached their results
  });

Event	Fires when
dimensionkit:loaded	The scorecard has loaded and is ready
dimensionkit:resize	Content height changed; the loader resizes the iframe
dimensionkit:completed	The visitor reached their results
dimensionkit:error	The scorecard failed to load or a submission failed

The same names are also posted to the parent window with postMessage, if you would rather listen for those.

If it does not appear

A blank space where the scorecard should be. Almost always the origin. Open your browser console: a 403 means the page’s origin is not on the allowlist. Check for www. and for http versus https.

404 instead of the scorecard. Either the slug is wrong, or the scorecard is still a draft, or embedding was never switched on for it.

It loads but never resizes. Something on your page is constraining the container. The loader sets the iframe height; it cannot grow past a parent with a fixed height or overflow: hidden.