스코어카드 임베드하기

발행된 스코어카드는 귀하의 웹사이트에 직접 삽입하여 운영할 수 있습니다. 스크립트 태그 한 줄만 추가하면 방문자의 진행 상황에 맞춰 높이가 자동으로 조절되는 반응형 iframe이 생성됩니다.

임베드 활성화하기

임베드 기능은 기본적으로 비활성화되어 있으며 각 스코어카드별로 켜주어야 합니다.

https://app.dimensionkit.com/admin 에서 관리자 화면 열기
스코어카드를 편집하고 Embed 탭 선택
Embed 스위치 켜기
임베드를 허용할 오리진(도메인) 등록
생성된 코드 스니펫 복사

발행(published) 상태의 스코어카드만 임베드할 수 있습니다. 초안 상태인 경우 404가 반환됩니다.

허용된 오리진 (Allowed origins)

오리진은 프로토콜, 호스트, 포트로 구성되며 하위 경로나 슬래시를 포함하지 않습니다:

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

https://example.com과 https://www.example.com은 서로 다른 오리진입니다. 사이트가 두 주소 모두를 서비스한다면 둘 다 등록해야 합니다.

코드 스니펫

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

속성	필수 여부	역할
`data-dk-scorecard`	필수	스코어카드 슬러그
`data-dk-target`	필수	스코어카드를 마운트할 컨테이너의 CSS 선택자
`data-dk-min-height`	선택	첫 리사이즈 발생 전 초기 높이(px)
`data-dk-title`	선택	iframe 접근성 타이틀

JavaScript로 직접 마운트하기

SPA나 CMS 환경에서 동적으로 마운트해야 하는 경우 로더 함수를 직접 호출할 수 있습니다:

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

방문자 인터랙션 이벤트 연동

임베드 컴포넌트는 대상 요소에 커스텀 이벤트를 발생시키므로 웹 애널리틱스를 추적하거나 완료 시 후속 UI를 노출할 수 있습니다:

document.querySelector('#scorecard')
  .addEventListener('dimensionkit:completed', () => {
    // 방문자가 결과 화면에 도달했을 때 실행할 코드
  });

이벤트 이름	발생 시점
`dimensionkit:loaded`	스코어카드 로딩이 완료되어 준비되었을 때
`dimensionkit:resize`	콘텐츠 높이가 변경되어 iframe이 리사이즈되었을 때
`dimensionkit:completed`	방문자가 결과 화면에 도달했을 때
`dimensionkit:error`	로딩 실패 또는 응답 제출 실패 시

동일한 이벤트가 부모 창으로 postMessage를 통해서도 전달됩니다.

문제 해결

스코어카드 영역이 빈 공간으로 표시됨. 대부분 오리진 설정 문제입니다. 브라우저 콘솔을 열어보세요. 403 오류는 현재 도메인이 허용 목록에 없음을 의미합니다. www. 누락 여부나 http와 https 구분을 확인하세요.

스코어카드 대신 404 오류 발생. 슬러그가 올바르지 않거나 스코어카드가 아직 초안 상태이거나 관리자 설정에서 임베드가 활성화되지 않은 상태입니다.

로딩은 되지만 높이 조절이 되지 않음. 웹사이트의 상위 요소가 높이를 제한하고 있을 가능성이 높습니다. 부모 요소에 고정된 height나 overflow: hidden이 지정되어 있지 않은지 확인하세요.