Embed Widgets

True Light 위젯을 외부 웹사이트에 간단하게 삽입할 수 있습니다. WordPress, Wix, Squarespace, 또는 일반 HTML 사이트 어디서든 사용 가능합니다.

빠른 시작

원하는 위치에 div 태그와 스크립트를 추가하면 됩니다.

<!-- True Light 위젯 -->
<div
  data-tenant="your-tenant-slug"
  data-type="sermons"
  data-limit="6"
  data-theme="light"
></div>
<script src="https://truelight.app/embed.js"></script>

속성 (Attributes)

속성	필수	설명	기본값
data-tenant	필수	교회 테넌트 슬러그	-
data-type	필수	위젯 유형: sermons, bulletins, albums, events, staff	-
data-limit	선택	표시할 항목 수	6
data-theme	선택	테마: `light` 또는 `dark`	light

위젯 유형별 예제

sermons

설교

최근 설교를 카드 그리드 형식으로 표시합니다. 유튜브 썸네일, 제목, 날짜, 설교자 정보가 포함됩니다.

<div
  data-tenant="bethelfaith"
  data-type="sermons"
  data-limit="6"
  data-theme="light"
></div>

bulletins

주보

최근 주보를 목록 형식으로 표시합니다. 날짜와 PDF 다운로드 링크가 포함됩니다.

<div
  data-tenant="bethelfaith"
  data-type="bulletins"
  data-limit="4"
  data-theme="light"
></div>

albums

앨범

교회 앨범을 이미지 그리드 형식으로 표시합니다. 대표 이미지와 제목이 오버레이로 표시됩니다.

<div
  data-tenant="bethelfaith"
  data-type="albums"
  data-limit="6"
  data-theme="light"
></div>

events

행사

교회 행사를 카드 형식으로 표시합니다. 날짜 배지, 행사명, 장소 정보가 포함됩니다.

<div
  data-tenant="bethelfaith"
  data-type="events"
  data-limit="4"
  data-theme="light"
></div>

staff

교역자

교역자 정보를 그리드 형식으로 표시합니다. 사진, 이름, 직분, 부서 정보가 포함됩니다.

<div
  data-tenant="bethelfaith"
  data-type="staff"
  data-limit="8"
  data-theme="light"
></div>

여러 위젯 동시 사용

한 페이지에 여러 위젯을 배치할 수 있습니다. 스크립트는 한 번만 포함하면 모든 위젯을 자동으로 초기화합니다.

<!-- 하나의 페이지에 여러 위젯 사용 가능 -->
<h2>최근 설교</h2>
<div data-tenant="bethelfaith" data-type="sermons" data-limit="3"></div>

<h2>이번 주 주보</h2>
<div data-tenant="bethelfaith" data-type="bulletins" data-limit="1"></div>

<h2>교회 앨범</h2>
<div data-tenant="bethelfaith" data-type="albums" data-limit="4"></div>

<!-- 스크립트는 한 번만 포함하면 됩니다 -->
<script src="https://truelight.app/embed.js"></script>

WordPress에서 사용하기

WordPress 편집기에서 "사용자 정의 HTML" 블록을 추가합니다.
아래 코드를 붙여넣고 your-tenant-slug을 교회 슬러그로 변경합니다.
저장하면 위젯이 자동으로 표시됩니다.

<!-- WordPress 페이지/포스트 HTML 블록에 붙여넣기 -->
<div
  data-tenant="your-tenant-slug"
  data-type="sermons"
  data-limit="6"
  data-theme="light"
></div>
<script src="https://truelight.app/embed.js"></script>

다크 테마

어두운 배경의 웹사이트에서는 data-theme="dark"를 사용하세요.

<div
  data-tenant="bethelfaith"
  data-type="sermons"
  data-limit="6"
  data-theme="dark"
></div>

SPA / 동적 페이지에서 사용

React, Vue 등 SPA 환경에서 동적으로 위젯 컨테이너를 추가한 뒤, 아래 함수를 호출하면 새 위젯을 초기화합니다.

<!-- SPA 환경에서 동적으로 위젯 재초기화 -->
<script>
  // 새 위젯을 추가한 뒤 호출
  window.DWChurchEmbed.init();
</script>

참고 사항

위젯은 CORS가 활성화된 API를 통해 데이터를 가져옵니다. 별도의 API 키는 필요하지 않습니다.
위젯 내 링크를 클릭하면 truelight.app의 해당 교회 페이지로 이동합니다.
CSS는 스크립트 내에 포함되어 있어 별도의 스타일시트를 로드할 필요가 없습니다.
모든 클래스는 dw- 접두어를 사용하므로 기존 스타일과 충돌하지 않습니다.
위젯은 반응형으로, 모바일부터 데스크톱까지 자동으로 레이아웃이 조정됩니다.