Een scorecard insluiten

Een gepubliceerde scorekaart kan rechtstreeks op je eigen website draaien. Je voegt één script-tag toe; deze maakt een responsieve iframe aan die zijn hoogte automatisch aanpast naarmate de bezoeker vordert in de vragenlijst.

WordPress-plugin

Gebruik je WordPress? Met de officiële DimensionKit voor WordPress-plugin sluit je scorecards eenvoudig in met een Gutenberg-blok of shortcode zonder code te bewerken.

Insluiten inschakelen

Insluiten staat standaard uitgeschakeld en moet per scorekaart worden geactiveerd.

1. Ga naar het beheerpaneel op https://app.dimensionkit.com/admin
2. Bewerk de scorekaart en open het tabblad Embed
3. Zet de optie Embed aan
4. Geef de lijst met goedgekeurde domeinen (origins) op
5. Kopieer het gegenereerde codefragment

Alleen gepubliceerde scorekaarten kunnen worden ingesloten. Een concept retourneert een 404-fout.

Toegestane origins

Een origin bestaat uit schema (protocol), host en poort — zonder subpagina-paden of afsluitende slashes:

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

https://example.com en https://www.example.com zijn twee verschillende origins. Als je website op beide bereikbaar is, geef ze dan beide op.

Het script geeft aan het platform door op welke pagina het wordt uitgevoerd. Bevindt die origin zich niet op de goedgekeurde lijst, dan weigert het iframe met statuscode 403. Dit wordt server-side afgedwongen via de Content-Security-Policy: frame-ancestors-header en blijft effectief, zelfs als iemand jouw code op een andere website plaatst.

Het codefragment

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

Kenmerk	Verplicht	Functie
data-dk-scorecard	ja	De slug van de scorekaart
data-dk-target	ja	CSS-selector van het doelelement
data-dk-min-height	nee	Aanvangshoogte in pixels voor de eerste schaalaanpassing
data-dk-title	nee	Toegankelijkheidstitel voor de iframe

Handmatig aanroepen via JavaScript

Als je de insluiting dynamisch wilt aansturen — in een Single Page Application of via een CMS:

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

Reageren op acties van de bezoeker

Het component activeert custom events op het doelelement, zodat je analytics kunt aansturen of informatie kunt onthullen zodra de bezoeker klaar is:

document.querySelector('#scorecard')
  .addEventListener('dimensionkit:completed', () => {
    // De bezoeker heeft de resultatenpagina bereikt
  });

Event	Moment van afvuren
dimensionkit:loaded	De scorekaart is geladen en gereed voor gebruik
dimensionkit:resize	De hoogte is gewijzigd; de iframe past zich aan
dimensionkit:completed	De bezoeker heeft de resultatenpagina bereikt
dimensionkit:error	Fout bij het laden van de scorekaart of het verzenden van antwoorden

Dezelfde gebeurtenissen worden via postMessage ook doorgegeven aan het bovenliggende venster.

Problemen oplossen

Een lege ruimte op de plek van de scorekaart. Vrijwel altijd een origin-probleem. Open de browserconsole: 403 duidt erop dat het domein niet op de lijst staat. Let op www. en het verschil tussen http en https.

Een 404-fout in plaats van de scorekaart. De slug klopt niet, de scorekaart staat nog als concept of de insluitoptie is in het beheerpaneel niet geactiveerd.

De scorekaart laadt wel, maar schaalt niet mee in de hoogte. Een bovenliggend element op je pagina blokkeert de hoogte. Het script past het iframe aan, maar kan niet groter worden dan een container met een vaste hoogte of overflow: hidden.