SPREEAI 开发者专区

搭建试衣间
进入每一个屏幕。.

从 Shopify、Web SDK 或经批准的 API 集成开始。此中心可帮助您的团队从最初的决策走向经过测试的上线。.

开始构建打开完整文档 ↗

04: 集成路径
v2.1: 当前 Web SDK
01: 发射检查清单

开发者视角姆里纳尔·舒克拉工程负责人

选择你的道路

从你的
商业技术栈依然存在。.

选择最适合您店面的最快路径。随着体验的增长，您可以从托管应用转向自定义 SDK 或 API 集成。.

直播

最快路径

Shopify 应用

安装、同步服装、自定义并在没有自定义后端的情况下启动。.最适合 Shopify 店面 ↗ v2.1.0

自定义网站

网页 SDK

控制位置、样式、事件、大小和加入购物车行为。.JavaScript + TypeScript ↗ 文档

原生移动端

iOS SDK

将 SPREEAI 体验融入现有的 iOS 购物流程中。.打开 iOS 指南 ↗ 文档

原生移动端

Android SDK

将试穿功能融入具有原生控件的 Android 产品体验中。.打开安卓指南 ↗ 合作伙伴访问权限

定制系统

公开 API

请使用经批准的 API 参考进行服务器端和目录工作流。.Open API 参考 ↗

即将推出

市场

亚马逊合作伙伴网络

我们正在开发一条可直接在市场上架的与亚马逊的集成路径。.更新内容将首先在这里显示

Web SDK 快速入门

从安装到
正常工作的按钮.

身份验证一次，即可在页面上的任何位置渲染试穿或尺码。请使用在入职培训期间颁发的测试凭据，切勿将客户端密钥放入浏览器代码中。.

npm install @spreeai/web-sdk

# 或
yarn add @spreeai/web-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) => {
    // 连接到您现有的购物车工作流。
  },
}

集成模型

四个系统。.
一个客户的高光时刻。.

01您的目录

产品ID、变体、图像和营销内容。.

02SPREEAI 数据接入

服装经历加工、审核和就绪状态。.

03SDK 或 API

您的店面请求符合条件的商品体验。.

04客户操作

试穿，寻找尺码，搭配造型，然后返回结账。.

生产路径

进行积分
冲过终点线.

一次成功的上线远不止一个正常工作的按钮。请使用以下步骤来统一访问权限、资产、行为、质量和衡量标准。.

01
界定第一个历程
选择一个渠道、一个商品目录组、一个客户时刻和一个成功指标。.
所有者 · 产品与商业
02
准备访问
确认合作伙伴 ID、已批准的客户端凭据、店面权限和暂存环境。.
所有者 · 工程
03
提交整洁的资源
每张图片提供一件服装，必须为正面视角，高分辨率，光线清晰，并使用与SKU对齐的文件名。.
所有者 · 目录团队
04
集成到预发布环境
仅在符合条件的产品上渲染，将变体与购物车行为连接起来，并使入口点与品牌相匹配。.
所有者 · 前端
05
运行发布质量 assurance
测试移动端和桌面端、浏览器覆盖范围、无障碍性、性能、视觉保真度以及故障状态。.
所有者 · 质量保证 + 品牌
06
启用并测量
启用就绪产品，发布暂存体验并监控采用率、完成率和转化率。.
所有者 · 商务 + 分析

资产基线

优质的输入带来更好的结果。.

JPEG 或 PNG
最小 2,000 × 2,000 像素
需要正面视图
推荐背面照
中性、均匀的照明
文件名中的 SKU 或款式 ID

打开资产清单 ↗

开发者参考

查找下一个
有用的回答。.

/

从这里开始

入门

了解访问权限、支持的平台以及您的团队需要做出的首要决策。.

官方参考 ↗ 托管集成

Shopify 商家入驻

安装应用程序，接受协议，同步服装，自定义按钮并开始直播。.

官方参考 ↗ 网页 SDK

API 表面

审查初始化、渲染选项、大小调整、自定义和类型化接口。.

官方参考 ↗ 合作伙伴 API

公共 API 参考

探索面向已认证合作伙伴的已批准服务器端接口。.

Swagger 参考 ↗ 质量

服装资产

准备能够顺利通过导入和审核的产品图像与元数据。.

SPREEAI 指南 ↗ 生产

质量保证与发布

使用共享浏览器、性能、无障碍访问和上线检查清单。.

SPREEAI 指南 ↗ 支持

故障排除

解决最常见的身份验证、资格验证、渲染和性能问题。.

SPREEAI 指南 ↗ 文档

实施指南

浏览公开的快速入门、资产标准、发布检查清单和故障排除指南。.

打开文档 ↗

构建生产版本

保护的细节
客户体验。.

安全

将机密保存在服务器端，仅使用发放的环境，并通过合作伙伴工作流程轮换凭据。.

隐私

请在获得明确同意的情况下收集客户图像，并根据您批准的集成计划规范数据处理。.

性能

在需要的地方加载体验，测试真实设备并监控产品页面回归。.

无障碍

当体验不可用时，请保留键盘访问权限、焦点顺序、无障碍名称和可用的路径。.

开发者常见问题解答

之前的问题
首次提交。.

我们应该选择哪个集成？

使用 Shopify 应用以获得最快的托管路径，使用 Web SDK 实现自定义或无头网页布局，使用原生 SDK 实现应用体验，并使用在接入培训期间商定的已批准 API 参考来实现服务器端工作流。.

凭据来自哪里？

SPREEAI会在入驻流程中发放合作伙伴ID和获批的凭据。浏览器SDK使用客户端ID和合作伙伴ID。绝不能将客户端密钥嵌入前端代码中。.

Shopify 应用需要 API 密钥吗？

当前的 Shopify 应用引导流程在完成必需的协议和订阅步骤后连接店铺；托管应用无需将密钥复制到设置界面中。.

为什么“试穿”按钮没有显示？

请确认服装已完成处理、已启用试穿功能、已映射到当前的产品或变体，并且产品模板上已包含应用块或 SDK 容器。.

哪些客户端事件可用？

已记录的SDK回调涵盖了试穿按钮点击和加入购物车交互。将其连接到您的分析层，但不要包含客户图像或不必要的个人数据。.

服务器 Webhook 可用吗？

服务器推送式 Webhook 不属于当前已发布的 SDK 文档的一部分。在依赖任何服务端事件需求之前，请与合作伙伴工程团队（Partner Engineering）确认范围。.

开发者在哪里寻求帮助？

使用入职培训期间提供的技术支持路径或发送电子邮件 support@spreeai.com. 包含环境、产品ID、浏览器或设备、时间戳以及简明的复现路径——切勿发送任何机密信息。.

亚马逊合作伙伴网络支持何时可用？

亚马逊伙伴网络集成正在开发中。在入驻和生产界面准备好供外部开发人员使用之前，它被有意标记为“即将推出”。.

准备好构建了吗？

选择路径。.
我们来帮你发货。.

预约技术探索浏览所有文档 ↗打开合作伙伴工作区 ↗

搭建试衣间进入每一个屏幕。.

从你的商业技术栈依然存在。.

Shopify 应用

网页 SDK

iOS SDK

Android SDK

公开 API

亚马逊合作伙伴网络

从安装到正常工作的按钮.

四个系统。.一个客户的高光时刻。.

进行积分冲过终点线.

界定第一个历程

准备访问

提交整洁的资源

集成到预发布环境

运行发布质量 assurance

启用并测量