Incorporar uma scorecard

Uma scorecard publicada pode ser executada diretamente no seu site através de uma tag de script. Ela cria um iframe responsivo que ajusta sua altura automaticamente conforme o visitante responde às perguntas.

Plugin para WordPress

Usa o WordPress? O plugin oficial DimensionKit para WordPress permite incorporar scorecards com um bloco Gutenberg ou shortcode sem precisar editar código.

Ativar a incorporação

A incorporação vem desativada por padrão e deve ser habilitada em cada scorecard.

1. Acesse o painel em https://app.dimensionkit.com/admin
2. Edite a scorecard e abra a aba Embed
3. Ative a opção Embed
4. Adicione as origens (domínios) autorizadas
5. Copie o trecho de código gerado

Apenas scorecards publicadas podem ser incorporadas. Rascunhos retornam 404.

Origens autorizadas

Uma origem é formada por protocolo, host e porta — sem caminhos de páginas ou barras finais:

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

https://example.com e https://www.example.com são origens diferentes. Se seu site responde em ambas, cadastre ambas.

O carregador informa à aplicação a página onde está sendo executado. Se essa origem não estiver na lista autorizada, o iframe retorna 403. Esse bloqueio é imposto no servidor pelo cabeçalho Content-Security-Policy: frame-ancestors e continua ativo mesmo se alguém copiar seu código em outro site.

O trecho de código

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

Atributo	Obrigatório	O que faz
data-dk-scorecard	sim	O slug da scorecard
data-dk-target	sim	Seletor CSS do elemento onde será montada
data-dk-min-height	não	Altura inicial em pixels antes do primeiro ajuste
data-dk-title	não	Título de acessibilidade para o iframe

Carregamento manual com JavaScript

Se precisar instanciar a incorporação dinamicamente — em uma SPA ou via CMS:

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

Reagindo às ações do participante

O componente emite eventos personalizados no elemento de destino, permitindo integrar analytics ou exibir mensagens ao término:

document.querySelector('#scorecard')
  .addEventListener('dimensionkit:completed', () => {
    // O participante chegou aos resultados
  });

Evento	Quando ocorre
dimensionkit:loaded	A scorecard carregou e está pronta para uso
dimensionkit:resize	A altura do conteúdo mudou; o iframe é redimensionado
dimensionkit:completed	O participante concluiu e viu o resultado
dimensionkit:error	Falha ao carregar a avaliação ou ao enviar respostas

Os eventos também são enviados para a janela mãe via postMessage.

Solução de problemas

Espaço em branco no lugar da scorecard. Quase sempre indica problema de origem. Abra o console do navegador: o erro 403 significa que o domínio atual não está na lista autorizada. Verifique se falta www. ou se há divergência entre http e https.

Erro 404 em vez da scorecard. O slug está incorreto, a scorecard ainda é um rascunho ou a incorporação não foi ativada nas configurações.

Carrega mas não ajusta a altura. Algum elemento pai na sua página está travando a altura. O carregador ajusta o iframe, mas não consegue ultrapassar recipientes com altura fixa ou propriedade overflow: hidden.