Incrustar una scorecard

Cualquier scorecard publicada puede ejecutarse directamente en tu propia web mediante una sencilla etiqueta script que genera un iframe adaptable. Este se redimensiona automáticamente a medida que el usuario avanza por las preguntas.

Habilitar la incrustación

La incrustación está desactivada por defecto y debe autorizarse en cada scorecard.

Abre el panel de administración en https://app.dimensionkit.com/admin
Edita la scorecard y ve a la pestaña Embed
Activa la opción Embed
Especifica los orígenes autorizados para incrustarla
Copia el fragmento de código generado

Solo las scorecards publicadas pueden incrustarse. Los borradores devuelven un error 404.

Orígenes permitidos

Un origen está formado por protocolo, host y puerto, sin rutas añadidas ni páginas concretas:

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

https://example.com y https://www.example.com constituyen orígenes diferentes. Si tu web responde en ambos, debes incluir los dos.

El cargador comunica a la plataforma la página desde la que se ejecuta. Si el origen no está en la lista de permitidos, el iframe responde con un 403. Esta regla se aplica en el servidor mediante la cabecera Content-Security-Policy: frame-ancestors y permanece protegida aunque copien tu código en otro dominio.

El fragmento de código

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

Atributo	Obligatorio	Descripción
`data-dk-scorecard`	sí	El slug de la scorecard
`data-dk-target`	sí	Selector CSS del elemento contenedor
`data-dk-min-height`	no	Altura inicial en píxeles antes del primer reajuste
`data-dk-title`	no	Título de accesibilidad para el iframe

Carga manual mediante JavaScript

Si necesitas instanciar la incrustación dinámicamente —en una aplicación de página única (SPA) o mediante un gestor de contenidos:

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

Responder a las acciones del visitante

El widget emite eventos personalizados sobre el elemento de destino para sincronizarse con herramientas analíticas o mostrar contenido adicional al finalizar:

document.querySelector('#scorecard')
  .addEventListener('dimensionkit:completed', () => {
    // El usuario ha visualizado sus resultados
  });

Evento	Cuándo se dispara
`dimensionkit:loaded`	La scorecard ha completado su carga y está lista
`dimensionkit:resize`	La altura del contenido ha cambiado; el iframe se ajusta
`dimensionkit:completed`	El usuario ha llegado a la pantalla de resultados
`dimensionkit:error`	Fallo de carga o error en el envío de datos

Estos avisos también se remiten a la ventana principal a través de postMessage.

Resolución de incidencias

Aparece un espacio en blanco en lugar de la scorecard. Casi siempre se debe al origen no autorizado. Abre la consola del navegador: un 403 significa que el dominio actual no figura en la lista permitida. Revisa los subdominios www. y la diferencia entre http y https.

Aparece un error 404. El slug no es correcto, la scorecard sigue en borrador o no se activó la opción de incrustación en el panel.

La scorecard carga pero no ajusta su altura. Un contenedor padre en tu sitio está limitando el tamaño. El script adapta el iframe, pero no puede expandirse si un elemento superior tiene una altura fija o la propiedad overflow: hidden.