자체 구축 스토어 개발자 연동#

ideal.house SDK를 불러오고 스토어의 productCode 값을 카탈로그에 매핑하세요.

SDK를 불러오기 전에: Dashboard → Settings를 열고 **Allowed Origins (CORS)**에 스토어 출처를 추가한 다음 저장을 클릭하세요. 배포된 호스트 이름과 사용 중인 미리보기 또는 스테이징 출처를 포함하고, 여러 출처는 쉼표로 구분하세요. 설정 절차를 참고하세요.

1. SDK 불러오기#

html

<script
  src="https://sdk.ideal.house/sdk.js"
  data-shop-id="<SHOP_ID>"
  data-publishable-key="<PUBLISHABLE_KEY>"
  async
></script>

2. 버튼 방식 하나 선택#

방식 A: SDK가 생성하는 버튼#

대상 컨테이너를 렌더링하세요. 상품 검증 후 SDK가 하위 버튼을 생성합니다.

html

<div data-idealhouse-button-container data-product-code="<PRODUCT_CODE>"></div>

방식 B: 직접 작성한 버튼#

버튼을 직접 렌더링하고 스타일을 지정하세요. SDK는 DOM을 유지하면서 사용 요건 확인 및 클릭 동작을 연결합니다.

html

<button
  type="button"
  data-idealhouse-authored-button
  data-product-code="<PRODUCT_CODE>"
  style="visibility: hidden;"
>
  View in my room
</button>

3. productCode를 카탈로그와 동일하게 유지#

<PRODUCT_CODE>

카탈로그 productCode와 스토어 data-product-code는 대소문자를 포함하여 동일해야 합니다.
렌더링할 때마다 변경 가능한 이름으로 productCode를 다시 생성하지 마세요. 변경이 필요하면 카탈로그와 스토어를 함께 갱신하세요.

4. 동적 페이지 및 선택한 상품 처리#

SDK는 페이지 로드 후 삽입되는 대상 요소를 감지합니다. 선택한 상품이 바뀌면 애플리케이션에서 대상 속성을 갱신하고 이전 SDK 상태를 초기화해야 합니다.

선택 변경 후 직접 작성한 버튼 갱신#

const button = document.querySelector('[data-idealhouse-authored-button]')

function selectProduct(product) {
  button.dataset.productCode = product.productCode
  button.dataset.active = 'false'
  button.style.visibility = 'hidden'

  delete button.dataset.rvProductCode
  delete button.dataset.rvProductType
  delete button.dataset.rvProductId
  delete button.dataset.rvProductIds
}

5. 연동 검증#

네트워크 패널에 sdk.js가 HTTP 200으로 불러와진 것으로 표시되는지 확인하세요.
매칭된 대상 요소의 data-product-code가 카탈로그와 정확히 일치하는지 확인하세요.
사용 가능한 상품에만 생성된 버튼 또는 직접 작성한 버튼이 표시되는지 확인하세요.
동적으로 상품이 바뀌면 고객이 클릭하기 전에 대상 요소가 갱신되는지 확인하세요.
버튼을 클릭하면 선택한 상품으로 ideal.house Viewer가 열리는지 확인하세요.

고급 설정#

서버 생성 실행 토큰#

백엔드에서 유효 기간이 짧은 실행 토큰을 발급하는 경우 이 모드를 사용하세요. Client Secret은 브라우저 JavaScript에 절대 나타나면 안 됩니다.

html

<script
  src="https://sdk.ideal.house/sdk.js"
  data-shop-id="<SHOP_ID>"
  data-launch-token="<SERVER_GENERATED_LAUNCH_TOKEN>"
  async
></script>

bash

# Run on your server. Never expose CLIENT_SECRET in browser JavaScript.
curl -X POST "<IDEALHOUSE_API_URL>/shops/<SHOP_ID>/sdk-launch-token" \
  -H "Content-Type: application/json" \
  -H "x-client-id: <CLIENT_ID>" \
  -H "x-client-secret: <CLIENT_SECRET>" \
  -d '{"origin":"https://your-store.example"}'

사용자 지정 상품 크기#

매칭된 요소에 너비, 높이 및 소문자 단위(ft, in 또는 cm)를 함께 지정하세요. SDK는 클릭 시 최신 값을 읽습니다.

html

<button
  data-idealhouse-authored-button
  data-product-code="<PRODUCT_CODE>"
  data-product-width="8"
  data-product-height="10"
  data-product-size-unit="ft"
  style="visibility: hidden;"
>View in my room</button>