Webflow 연동#
Webflow 사용자 정의 코드와 CMS/전자상거래 필드를 사용하여 상품 코드가 ideal.house 카탈로그와 일치하는 Room Visualizer 버튼을 렌더링하세요.
검증 상태: 2026년 9월 7일에 Webflow 도움말 센터 문서를 검토했습니다. 고객 Webflow 사이트는 사용할 수 없었습니다. 사용자 정의 코드는 미리보기/배포 후 실행되며 Webflow는 임베드에서 서버 측 코드를 실행하지 않으므로 배포된 스테이징 도메인에서 테스트하세요.
SDK를 불러오기 전에: Dashboard → Settings를 열고 **Allowed Origins (CORS)**에 스토어 출처를 추가한 다음 저장을 클릭하세요. 배포된 호스트 이름과 사용 중인 미리보기 또는 스테이징 출처를 포함하고, 여러 출처는 쉼표로 구분하세요. 설정 절차를 참고하세요.
사전 준비 및 제한 사항#
사용자 정의 코드 또는 코드 임베드 사용 권한, 스테이징 도메인, Shop ID, Publishable Key 및 가져온 카탈로그 SKU 하나가 필요합니다. JavaScript 임베드에는 Webflow 요금제 요건이 적용됩니다. 브라우저에는 Publishable Key를 포함할 수 있지만 Client Secret 또는 AI API 키는 포함하면 안 됩니다.
SDK는 Webflow 전자상거래 데이터를 자동으로 읽지 않습니다. 템플릿이 SKU를 제공하거나 고객 측 어댑터가 신뢰할 수 있는 CMS 필드에서 해당 값을 구해야 합니다.
최소 SDK 연동 규약#
<script
src="https://sdk.ideal.house/sdk.js"
data-shop-id="<SHOP_ID>"
data-publishable-key="<PUBLISHABLE_KEY>"
async
></script>
<div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>
data-product-code는 가져온 ideal.house sku와 정확히 같아야 합니다.
로더 설치#
사이트 설정 → 사용자 정의 코드를 열고 푸터/본문 끝 영역에 SDK 스크립트 태그를 추가하세요. 자리표시자를 교체하고 저장한 다음 배포하세요. 사이트 수준에서 한 번만 설치하고 각 CMS 항목에 반복하지 마세요.
Webflow 디자이너 캔버스에서는 스크립트가 실행되지 않을 수 있습니다. 미리보기 또는 배포된 스테이징 URL에서 검증하고 실제 페이지 소스를 검사하세요.
항목별 버튼 추가#
예를 들어 Idealhouse SKU라는 일반 텍스트 CMS 필드를 만드세요. ideal.house sku로 가져온 것과 같은 값을 입력하세요. 상품 또는 CMS 컬렉션 템플릿에서 버튼 위치에 코드 임베드를 추가하세요.
<div
data-idealhouse-button-container
data-product-code="[bind this attribute to the current item's Idealhouse SKU]"
></div>
임베드 편집기의 Webflow 필드 추가 기능으로 현재 항목의 값을 삽입하세요. 위의 괄호 안 안내를 운영 마크업에 그대로 넣으면 안 됩니다. 배포 후 DOM을 검사하여 다음과 같은 일반 문자열이 되었는지 확인하세요.
<div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>
정적 페이지에는 실제 SKU를 붙여 넣으세요. 가져온 ideal.house SKU와 정확히 같은 값인 경우가 아니라면 페이지 슬러그 또는 Webflow 항목 ID를 사용하지 마세요.
상품 옵션 및 동적 렌더링#
Webflow의 표준 디자이너 바인딩이 모든 전자상거래 레이아웃에서 임의의 사용자 정의 코드에 최종 상품 옵션의 SKU를 제공하는 것은 아닙니다. 각 시각적 옵션마다 서로 다른 ideal.house 자산이 필요하다면 지원되는 Webflow 연동 또는 자체 데이터 계층에서 선택한 상품 옵션을 받아 컨테이너를 교체하는 고객 측 어댑터를 구현하세요.
function showIdealhouseVariant(host, sku) {
host.replaceChildren();
const code = typeof sku === 'string' ? sku.trim() : '';
if (!code) return;
const node = document.createElement('div');
node.dataset.idealhouseButtonContainer = '';
node.dataset.productCode = code;
host.append(node);
}
이는 고객 측 코드입니다. 실제 사용하는 상품 옵션 도구의 문서화된 콜백에서 호출하세요. 표시된 옵션 텍스트를 수집하거나 비공식 Webflow 이벤트가 있다고 가정하지 마세요.
Webflow 상호작용, CMS 필터, 타사 페이지 나누기 및 SPA와 유사한 전환은 컬렉션 항목을 추가하거나 교체할 수 있습니다. 각 항목 템플릿에 임베드를 포함하거나 도구의 문서화된 렌더링 콜백 후 연결 함수를 호출하세요. 처리된 SDK 마크업을 복제하지 말고 항상 새 컨테이너를 만드세요.
카탈로그 데이터 가져오기#
Webflow 상품/CMS 필드를 내보내고 Idealhouse SKU를 sku에 매핑하세요. 상품 업로드로 업로드하고 상품 가져오기, 작업 상태, 상품 목록 조회, 상품 수정, 상품 삭제 및 오류와 재시도를 따르세요.
브라우저 SDK는 Webflow 자동 동기화를 제공하지 않습니다. CMS API 내보내기, 웹훅 또는 자동화는 고객이 관리해야 합니다.
검증 및 제거#
스테이징에 배포하고 매핑된 항목, 필드 누락, 알 수 없는 SKU, 컬렉션 목록, 상품 템플릿, 필터/페이지 나누기, 모달, 모바일 중단점, 동의 제어 및 브라우저 뒤로 가기/앞으로 가기를 테스트하세요. SDK가 한 번만 불러와지고 각 렌더링 코드가 현재 항목과 일치하며 HTML에 서버 인증 정보가 나타나지 않는지 확인하세요.
제거하려면 사이트 수준의 SDK 사용자 정의 코드와 각 임베드/버튼 바인딩을 삭제하고 다시 배포한 다음 프록시/CDN 캐시를 비우세요. 배포된 사이트에서 스크립트 요청 및 data-idealhouse-* 요소가 사라졌는지 확인하세요.