빌드하기
SPREEAI.
통합 방식 선택부터 검증된 출시까지 실질적인 경로를 제시합니다. 하나의 상거래 여정으로 시작하고, 발급된 테스트 액세스 권한을 활용하며, 자격 증명을 브라우저 코드에 포함시키지 마십시오.
통합 경로를 선택하세요
Shopify 앱
스토어가 Shopify에서 운영되고 사용자 지정 백엔드가 필요하지 않은 경우 관리형 앱을 사용하세요. 현재 온보딩 흐름은 계약 및 구독 후 스토어를 연결하며, 설정 화면에 API 키를 복사할 필요가 없습니다.
- 공식 SPREEAI 앱을 설치하고 관리형 동의 절차를 완료하세요.
- 초기 카탈로그 그룹을 동기화하고 제품 준비 상태를 검토합니다.
- 복제된 테마에서 배치 및 스타일을 사용자 지정할 수 있습니다.
- 적합한 제품, 변형 상품, 모바일 행동 및 장바구니 담기 기능을 검증합니다.
- 브랜드 및 품질 관리 승인을 받은 후에만 게시하십시오.
웹 SDK 빠른 시작
사용 @spreeai/web-sdk 배치, 스타일, 이벤트, 크기 및 장바구니 동작을 사용자 지정하기 위한 것입니다.
npm install @spreeai/web-sdk@3.0.0
import { init } from "@spreeai/web-sdk";
import "@spreeai/web-sdk/dist/web-sdk.css";
// Add <div id="spreeai-try-on"></div> to the product page first.
const sdk = await init({ clientId: "your-client-id" });
if (sdk) {
await sdk.renderTryOnButton({
elementId: "spreeai-try-on",
garments: [{ garmentId: "your-garment-id" }],
enableAddToCart: true,
});
}
한 번만 초기화하고, 적합한 제품에 대해서만 렌더링하며, 문서화된 클라이언트 콜백을 기존 분석 기능에 연결합니다. 현재 인터페이스를 확인하세요. 공식 웹 SDK API 참조
API 접근
온보딩 과정에서 승인된 서버 측 워크플로에만 공개 Swagger 참조를 사용하십시오. 비밀 정보는 서버에 안전하게 보관하고, 테스트 환경과 프로덕션 환경에 대한 접근 권한을 분리하며, 자격 증명은 필요한 최소한의 환경에만 사용하도록 제한하십시오.
승인된 공개 참조에 없는 직접 REST 엔드포인트, 웹훅 또는 인증 동작은 파트너 엔지니어링 팀에서 확인하기 전까지는 사용할 수 없는 것으로 간주해야 합니다.
의류 자산 기준선
- JPEG 또는 PNG 형식, 최소 2,000 × 2,000 픽셀, 약 4K 픽셀 권장.
- 이미지당 의류 한 벌씩, 중앙에 배치하고 가장자리가 깔끔하며 조명이 고르게 분포되어 있습니다.
- 정면 보기 필수; 후면 보기 기능이 활성화된 경우 후면 보기를 권장합니다.
- 파일 이름과 카탈로그 기록에 안정적인 SKU, 스타일 또는 의류 ID가 포함되어야 합니다.
- 손, 옷걸이, 스타일링 소품, 워터마크 또는 관련 없는 의류가 제품을 가리지 않아야 합니다.
- 경험을 활성화하기 전에 변형 매핑을 확인했습니다.
QA 및 출시
- 현재 사용 중인 모바일 및 데스크톱 브라우저에서 고객 여정 전체를 테스트하십시오.
- 제품 및 변형 매핑, 의류 준비 상태 및 장바구니 동작을 확인합니다.
- 키보드 접근성, 포커스 순서, 접근 가능한 이름 및 대체 동작을 확인하십시오.
- SPREEAI을 활성화하기 전후의 제품 페이지 성능을 측정합니다.
- 연습 문제 로딩, 비어 있음, 사용 불가, 시간 초과 및 재시도 상태.
- 동의 문구와 고객 이미지 처리 방식에 대한 승인 여부를 확인하십시오.
- 생산 전에 엔지니어링, 영업, 품질 보증 및 브랜드 승인을 모두 받아야 합니다.
문제 해결
버튼이 나타나지 않습니다
SDK 초기화, 클라이언트 식별자, 호스트 요소 ID, 제품 적합성, 의류 준비 상태 및 변형 매핑을 확인합니다. 그런 다음 토큰을 공유하지 않고 브라우저 콘솔과 네트워크 오류를 확인합니다.
잘못된 제품 또는 변형 상품이 표시됩니다.
스토어프런트 제품 및 변형 ID를 SPREEAI으로 전송된 레코드와 비교합니다. 구매자가 변형을 변경할 때 렌더링된 요청이 변경되는지 확인합니다.
해당 서비스가 느리거나 이용할 수 없습니다.
검증된 제품을 테스트하고, 활성 환경을 확인하고, 차단된 요청을 검사하고, 정상적인 브라우저 세션과 비교합니다. 지원을 위해 타임스탬프와 재현 가능한 순서를 캡처합니다.
개발자 지원을 받으세요
이메일 support@spreeai.com 환경, 제품 또는 의류 ID, 브라우저 또는 장치, 대략적인 타임스탬프, 예상되는 동작 및 재현 단계를 포함하십시오. 기밀 정보나 고객 이미지는 포함하지 마십시오.