Eine Scorecard einbetten

Eine veröffentlichte Scorecard kann direkt auf Ihrer Website eingebunden werden. Sie fügen ein einziges Script-Tag ein; dieses erzeugt einen responsiven iframe, der seine Höhe dynamisch anpasst, während der Besucher die Fragen beantwortet.

WordPress-Plugin

Nutzen Sie WordPress? Mit dem offiziellen DimensionKit for WordPress-Plugin können Sie Scorecards bequem per Gutenberg-Block oder Shortcode ohne Code-Bearbeitung einbinden.

Einbettung aktivieren

Die Einbettung ist standardmäßig deaktiviert und muss pro Scorecard freigeschaltet werden.

1. Öffnen Sie den Admin-Bereich unter https://app.dimensionkit.com/admin
2. Bearbeiten Sie die Scorecard und öffnen Sie den Reiter Embed
3. Aktivieren Sie Embed
4. Tragen Sie die zugelassenen Origins (Domains) ein
5. Kopieren Sie das generierte Code-Snippet

Nur veröffentlichte Scorecards können eingebettet werden. Ein Entwurf liefert 404.

Erlaubte Origins

Ein Origin besteht aus Schema (Protokoll), Host und Port – keine Unterseiten-URL und kein nachgestellter Pfad:

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

https://example.com und https://www.example.com sind unterschiedliche Origins. Wenn Ihre Website unter beiden erreichbar ist, tragen Sie beide ein.

Der Loader übermittelt der App, auf welcher Seite er ausgeführt wird. Befindet sich diese Origin nicht auf der Zulassungsliste, antwortet der iframe mit 403. Dies wird serverseitig über den Header Content-Security-Policy: frame-ancestors erzwungen und greift auch dann, wenn jemand Ihr Snippet auf eine fremde Seite kopiert.

Das Code-Snippet

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

Attribut	Erforderlich	Funktion
data-dk-scorecard	ja	Der Slug der Scorecard
data-dk-target	ja	CSS-Selektor des Zielelements zur Einbettung
data-dk-min-height	nein	Anfangshöhe in Pixeln vor der ersten Anpassung
data-dk-title	nein	Barrierefreier Titel für den iframe

Manuelles Einbinden per JavaScript

Wenn Sie die Einbindung zur Laufzeit steuern möchten – etwa in einer Single-Page-App oder über ein CMS:

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

Auf Besucheraktionen reagieren

Das eingebettete Element löst benutzerdefinierte Events auf dem Zielelement aus. So können Sie Web-Analytics anbinden oder Folgeaktionen einleiten, sobald ein Besucher fertig ist:

document.querySelector('#scorecard')
  .addEventListener('dimensionkit:completed', () => {
    // Der Besucher hat die Ergebnisseite erreicht
  });

Event	Auslöser
dimensionkit:loaded	Die Scorecard ist vollständig geladen und bereit
dimensionkit:resize	Die Inhaltshöhe hat sich geändert; der iframe wird angepasst
dimensionkit:completed	Der Besucher hat die Ergebnisseite erreicht
dimensionkit:error	Ladefehler der Scorecard oder fehlgeschlagene Einreichung

Die Events werden zusätzlich per postMessage an das übergeordnete Browserfenster gesendet.

Fehlersuche

Leere Fläche anstelle der Scorecard. Fast immer liegt es an der Origin. Prüfen Sie die Browser-Konsole: 403 bedeutet, dass die Domain nicht in der Zulassungsliste steht. Achten Sie auf www. sowie http gegenüber https.

404 statt der Scorecard. Entweder ist der Slug falsch, die Scorecard ist noch ein Entwurf oder die Einbettung wurde im Admin-Bereich nicht aktiviert.

Scorecard lädt, passt sich aber in der Höhe nicht an. Ein übergeordnetes Element auf Ihrer Seite schränkt die Höhe ein. Der Loader steuert die iframe-Höhe; er kann nicht über Container mit fester Höhe oder overflow: hidden hinauswachsen.