Authenticate once, then render try-on or sizing anywhere on the page. Use test credentials issued during onboarding and never put a client secret in browser code.

npm 安裝 @ spreeai /web-sdk # 或 yarn add @ spreeai 網頁Sdk

import { init } from "@spreeai/web-sdk";

const sdk = await init({
  clientId: "your-client-id",
  partnerId: "your-partner-id",
});

if (sdk) {
  await sdk.renderTryOnButton({
    elementId: "spreeai-try-on",
    garments: [{ garmentId: "your-garment-id" }],
    enableAddToCart: true,
  });
}

events: {
  onTryOnButtonClick: (event) => {
    analytics.track("try_on_started", event);
  },
  onAddToCartClicked: async (event) => {
    // Connect to your existing cart workflow.
  },
}

整合模式

四種系統。
客戶一刻

01你的目錄

產品ID、變量、圖像和交易背景。

02SPREEAI 入口

服裝通過加工、審查和準備狀態移動。

03SDK 或 API

您的商店前面需要獲得合格產品的經驗。

04客戶行動

繼續嘗試,找到一個尺寸,完成查看並返回支票。

一個專注的路徑,以啟動

準備好。連接。
生活在自信心。

三英里,每個實用檢查列表。

01 準備
一個明確的起點。
調整旅行、訪問和目錄。
準備檢查列表
- 選擇一個頻道、目錄組和成功測量。
- 確認合作伙伴訪問、認證和排序許可。
- 提供清潔、SKU合規的服裝圖像。
產品 · 工程 · 目錄
02 連接
讓它感覺原生。
建在站臺上。整個旅程都測試了。
集成檢查列表
- 租借合格的產品,並連接變量和車輛行為。
- 與品牌相匹配的經驗。
- 檢查移動、桌面、可用性、性能和失敗狀態。
首頁 > QA > 品牌
03 啟動
學習從真正的使用。
可供準備的產品和測量。
啟動檢查列表
- 確認產品準備,併發布實時體驗。
- 監測採用、完成和轉換。
- 使用結果來指導下一個類別或旅行。
商業 · 分析

資產基線

良好的輸入會帶來更好的結果。

JPEG 或 PNG
2000×2000px 最小
前景需要
推薦回視
中性,甚至照明
SKU 或 Style ID 在文件名中

開啟資產檢查列表

開發者參考

找下一個
有用的答案。

/

開始這裡

海上船上 Shopify

Install the app, accept agreements, sync garments, customize the button and go live.

官方參考網頁 SDK

火災表面

Review initialization, render options, sizing, customization and typed interfaces.

官方參考合作伙伴火災

服裝資產

Prepare product imagery and metadata that move cleanly through ingestion and review.

SPREEAI 指南生產

QA & 發射

使用共享瀏覽器、性能、可用性和 go-live 檢查列表。

SPREEAI 指南支持

麻煩解決

Resolve the most common authentication, eligibility, rendering and performance issues.

SPREEAI 指南文檔

實施指南

Browse public quickstarts, asset standards, launch checklists and troubleshooting guidance.

開放文檔

建造生產

保護的細節
客戶體驗。

安全

Keep secrets server-side, use only issued environments and rotate credentials through the partner workflow.

隱私

Request customer imagery with clear consent and align data handling with your approved integration plan.

表演

充電需要的體驗,測試實體 vic 並監測產品頁面迴歸。

可用性

Preserve keyboard access, focus order, accessible names and a usable path when the experience is unavailable.

開發人員 FAQ

提前的疑問
第一個承諾。

哪個集成應該選擇?

Use the Shopify App for the fastest managed path, the Web SDK for custom or headless web placement, the native SDKs for app experiences, and the approved API reference for server-side workflows agreed during onboarding.

信號從哪裡來?

SPREEAI 在登機期間發出合作伙伴身份證和批准的認證。瀏覽器 SDK 使用客戶端 ID 和合作伙伴 ID。永遠不要把客戶端秘密放在前端代碼中。

Shopify 應用程式需要 API 關鍵嗎?

The current Shopify App onboarding flow connects the store after the required agreements and subscription step; the managed app does not require copying keys into the setup screen.

為什麼不顯示試點按鈕?

Confirm the garment has completed processing, is enabled for Try-On, maps to the active product or variant, and that the app block or SDK container is present on the product template.

哪些客戶活動可用?

The documented SDK callbacks cover Try-On button clicks and add-to-cart interactions. Connect them to your analytics layer without including customer imagery or unnecessary personal data.

服務器Webhooks是否可用?

Server-push webhooks are not part of the currently published SDK documentation. Scope any server-side event requirement with Partner Engineering before relying on it.

開發人員在哪裡得到幫助?

使用在登機或電子郵件期間提供的技術支持路徑 support@spreeai.com. Include the environment, product ID, browser or device, timestamp and a concise reproduction path—never send secrets.

什麼時候會提供Amazon合作伙伴網絡支持?

The Amazon Partner Network integration is in development. It is intentionally marked Coming Soon until the onboarding and production interface are ready for external developers.

準備好建造?

選擇路徑。
我們將幫助你運送。

寫下技術發現查看所有DOCS 開啟合作夥伴工作區

建造合適的房間
到每個屏幕。

開始你的
商店生活的。

Shopify 應用程式

網頁 SDK

此分類上一篇: SDK

Android SDK 端口

公共 APIs

亞馬遜合作夥伴網路

您的第一次融入

四種系統。
客戶一刻

準備好。連接。
生活在自信心。

一個明確的起點。

讓它感覺原生。

學習從真正的使用。

良好的輸入會帶來更好的結果。

找下一個
有用的答案。

開始的

海上船上 Shopify

火災表面

公共 API 參考

服裝資產

QA & 發射

麻煩解決

實施指南

保護的細節
客戶體驗。

安全

隱私

表演

可用性

提前的疑問
第一個承諾。

選擇路徑。
我們將幫助你運送。

選擇你的語言。

建造合適的房間到每個屏幕。

開始你的商店生活的。

Shopify 應用程式

網頁 SDK

此分類上一篇: SDK

Android SDK 端口

公共 APIs

亞馬遜合作夥伴網路

您的第一次融入

四種系統。客戶一刻

準備好。 連接。生活在自信心。

一個明確的起點。

讓它感覺原生。

學習從真正的使用。

良好的輸入會帶來更好的結果。

找下一個有用的答案。

開始的

海上船上 Shopify

火災表面

公共 API 參考

服裝資產

QA & 發射

麻煩解決

實施指南

保護的細節客戶體驗。

安全

隱私

表演

可用性

提前的疑問第一個承諾。

選擇路徑。我們將幫助你運送。

建造合適的房間
到每個屏幕。

開始你的
商店生活的。

四種系統。
客戶一刻

準備好。連接。
生活在自信心。

找下一個
有用的答案。

保護的細節
客戶體驗。

提前的疑問
第一個承諾。

選擇路徑。
我們將幫助你運送。