Intégrer une scorecard

Une scorecard publiée peut fonctionner directement sur votre site. Il vous suffit d’ajouter une simple balise script : celle-ci génère une iframe responsive qui adapte sa hauteur en temps réel au fur et à mesure que le visiteur progresse.

Extension WordPress

Vous utilisez WordPress ? L’extension officielle DimensionKit pour WordPress vous permet d’intégrer vos scorecards avec un bloc Gutenberg ou un shortcode sans modifier de code.

Activer l’intégration

L’intégration est désactivée par défaut et doit être activée pour chaque scorecard.

1. Rendez-vous dans l’administration sur https://app.dimensionkit.com/admin
2. Modifiez la scorecard et ouvrez l’onglet Embed
3. Activez l’option Embed
4. Renseignez la liste des origines autorisées à l’intégrer
5. Copiez l’extrait de code généré

Seules les scorecards publiées peuvent être intégrées. Un brouillon renvoie une erreur 404.

Origines autorisées

Une origine est composée d’un protocole, d’un hôte et d’un port — sans chemin ni URL de page spécifique :

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

https://example.com et https://www.example.com sont deux origines distinctes. Si votre site répond sur les deux, indiquez les deux.

Le script transmet à l’application la page sur laquelle il s’exécute. Si cette origine ne figure pas dans votre liste, l’iframe répond par une erreur 403. Ce contrôle est appliqué côté serveur via l’en-tête Content-Security-Policy: frame-ancestors et reste inviolable même si votre code est copié sur un autre site.

L’extrait de code

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

Attribut	Obligatoire	Rôle
data-dk-scorecard	oui	Le slug de la scorecard
data-dk-target	oui	Le sélecteur CSS de l’élément conteneur
data-dk-min-height	non	Hauteur initiale en pixels avant le premier redimensionnement
data-dk-title	non	Titre d’accessibilité pour l’iframe

Montage manuel en JavaScript

Si vous souhaitez déclencher l’intégration dynamiquement — dans une application monopage (SPA) ou via un CMS :

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

Réagir aux actions du visiteur

L’intégration émet des événements personnalisés sur l’élément cible, vous permettant de déclencher vos outils d’analytique ou d’afficher du contenu dès la fin du questionnaire :

document.querySelector('#scorecard')
  .addEventListener('dimensionkit:completed', () => {
    // Le visiteur a accédé à ses résultats
  });

Événement	Moment de déclenchement
dimensionkit:loaded	La scorecard est chargée et prête
dimensionkit:resize	La hauteur du contenu a changé ; l’iframe est redimensionnée
dimensionkit:completed	Le visiteur a atteint l’écran des résultats
dimensionkit:error	Échec du chargement ou de la soumission

Ces événements sont également relayés à la fenêtre parente via postMessage.

Résolution des problèmes

Un espace vide à la place de la scorecard. Il s’agit presque toujours d’un problème d’origine. Ouvrez la console du navigateur : une erreur 403 indique que le domaine n’est pas autorisé. Vérifiez la présence des www. et la distinction http / https.

Une erreur 404 à la place de la scorecard. Le slug est incorrect, la scorecard est encore au statut de brouillon, ou l’intégration n’a pas été activée dans l’administration.

La scorecard s’affiche mais ne se redimensionne jamais. Un élément conteneur sur votre site bloque la hauteur. Le chargeur ajuste l’iframe ; il ne peut pas dépasser un parent ayant une hauteur fixe ou un style overflow: hidden.