임베드 코드 생성기

몇 분 안에 Society Speaks 투표 위젯을 기사에 추가하세요. 개발자는 깔끔한 iframe과 커스터마이제이션 컨트롤을 얻습니다. 편집자는 댓글 소음이 아닌 체계적인 인사이트를 얻습니다.

임베드는 Society Speaks 기본 토론에서 사용 가능합니다.

구현 체크리스트

도메인이 허용 목록에 있는지 확인
아래에서 iframe 생성
원활한 UX를 위해 자동 크기 조정 추가

프로덕션 온보딩을 위해 파트너 포털 사용

파트너 포털에서 테스트 키를 생성하고 도메인을 확인한 후 라이브 키를 활성화합니다. 규모 확대의 경우 API를 사용하여 토론을 생성하고 반환된 토론 ID를 CMS에 저장합니다. 프로그래밍 방식의 워크플로우는 API 참조를 참조하세요.

개발자용

경량 iframe, 예측 가능한 파라미터, postMessage 크기 조정 훅.

편집자용

체계적인 참여, 명확한 합의 신호, 감시 가능한 방법론.

사용자용

몇 초 안에 투표하고, 대중의 의견이 일치하는 부분을 확인하고, 더 깊이 있는 분석을 살펴보세요.

규모 확대 흐름

1) 기사 URL로 조회, 2) 없으면 생성, 3) 토론 ID 저장.

토론 ID란 무엇인가요?

토론이 생성되거나 발견될 때 API에서 반환하는 고유 식별자입니다.

아직 토론이 없으신가요?

POST /api/partner/discussions를 호출하여 토론을 생성한 후 즉시 임베드하세요.

1. 토론 찾기

기사 URL

또는

토론 ID

토론이 생성되거나 발견될 때 API에서 반환됩니다.

2. 테마 선택

Default

Dark

Editorial

Georgia

Minimal

Bold

Muted

또는 색상 커스터마이제이션:

기본 색상

배경

글꼴

3. 참조 추가 (선택)

파트너 참조

분석에 사용됩니다. 소문자, 공백 없음.

미리보기

토론 ID를 입력하거나 기사 URL을 조회하여 미리보기 확인

임베드 코드

<!-- 토론 ID를 입력하여 임베드 코드 생성 -->

자동 크기 조정 스니펫

<script>
window.addEventListener('message', (event) => {
  if (event.data && event.data.type === 'societyspeaks:embed:resize') {
    const iframe = document.getElementById('societyspeaks-embed');
    if (iframe) iframe.style.height = event.data.height + 'px';
  }
});
</script>

성능 팁

<link rel="preconnect" href="https://societyspeaks.io">
<link rel="dns-prefetch" href="https://societyspeaks.io">

팁

반응형 임베드를 위해 iframe 너비를 100%로 설정하세요
기본 높이는 600px입니다. 진술 수에 따라 조정하세요
ref를 추가하여 사이트의 참여를 추적하세요
임베드는 동적 크기 조정을 위해 postMessage를 통해 높이를 전송합니다
스크롤바를 피하려면 자동 크기 조정 스니펫을 추가하세요
첫 번째 페인트 속도를 높이려면 preconnect 힌트를 사용하세요