Маркетплейс
SPREEAI для розробників
Облаштуйте примірочну
у кожен екран.
Почніть із Shopify, веб-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 за допомогою рідних елементів керування.Відкрити посібник для Android ↗ Партнерський доступНестандартні системи
Публічні API
Використовуйте затверджені довідкові матеріали API для серверних робочих процесів та робочих процесів каталогу.Відкрити довідник API ↗Швидкий старт із Web SDK
Від встановлення до
робоча кнопка.
Проведіть автентифікацію один раз, а потім відображайте примірку або підбір розміру в будь-якому місці сторінки. Використовуйте тестові облікові дані, видані під час підключення, і ніколи не вставляйте секрет клієнта в код браузера.
npm install @spreeai/web-sdk
# або
yarn add @spreeai/web-sdkimport { 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Власник · Продукт і комерція
Визначити обсяг першої подорожі
Виберіть один канал, групу каталогів, момент взаємодії з клієнтом та показник успіху.
- 02Власник · Інжиніринг
Підготувати доступ
Підтвердьте ідентифікатор партнера, затверджені облікові дані клієнта, дозволи вітрини та середовище тестування.
- 03Власник · Команда каталогу
Надішліть чисті ресурси
Один предмет одягу на зображення, обов'язковий вид спереду, висока роздільна здатність, чисте освітлення та назви файлів, що відповідають SKU.
- 04Власник · Front-end
Інтегрувати на стейджинг
Відображайте лише на відповідних товарах, зв'яжіть варіанти та поведінку кошика, а також узгодьте точку входу з брендом.
- 05Власник · Тестування + бренд
Запустити контроль якості запусків
Протестуйте мобільні та десктопні пристрої, охоплення браузерів, доступність, продуктивність, візуальну точність та стани збоїв.
- 06Власник · Комерція та аналітика
Увімкнути та виміряти
Увімкніть готові продукти, опублікуйте підготовлений інтерфейс та відстежуйте впровадження, завершення та конверсію.
Базовий стан активів
Добрий вхідний результат дає кращий результат.
- JPEG чи PNG
- мінімум 2000 × 2000 пікселів
- Потрібен вид спереду
- Рекомендується вигляд ззаду
- Нейтральне, рівне освітлення
- SKU або ідентифікатор стилю в назві файлу
Довідка для розробників
Знайди наступне
корисна відповідь.
Почати тут
Початок роботи
Зрозумійте доступ, підтримувані платформи та перші рішення, які має прийняти ваша команда.
Офіційне довідкове джерело ↗ Керована інтеграціяОнбординг у Shopify
Встановіть додаток, прийміть угоди, синхронізуйте одяг, налаштуйте кнопку та починайте трансляцію.
Офіційне довідкове джерело ↗ Веб-SDKПоверхня API
Огляньте ініціалізацію, параметри відтворення, визначення розмірів, налаштування та типізовані інтерфейси.
Офіційне довідкове джерело ↗ Партнерський APIДовідник публічного API
Досліслійте затверджений інтерфейс на боці сервера, доступний для автентифікованих партнерів.
Довідник Swagger ↗ ЯкістьЕлементи одягу
Підготуйте зображення та метадані товарів, які безперешкодно проходять завантаження та перевірку.
Посібник SPREEAI ↗ ВиробництвоТестування та запуск
Використовуйте спільний чекліст для браузерів, продуктивності, доступності та запуску.
Посібник SPREEAI ↗ ПідтримкаУсунення несправностей
Вирішіть найпоширеніші проблеми автентифікації, права на участь, відображення та продуктивності.
Посібник SPREEAI ↗ ДокументаціяПосібники з впровадження
Перегляньте публічні короткі інструкції, стандарти активів, контрольні списки для запуску та посібники з усунення несправностей.
Відкрити документацію ↗Немає ресурсів для розробників, що відповідають запиту. Спробуйте “Shopify”, “SDK”, “assets” або “QA”.”
Зібрати для продакшну
Деталі, що захищають
клієнтський досвід.
Безпека
Зберігайте секрети на сервері, використовуйте лише видані середовища та ротуйте облікові дані через робочий процес партнерів.
Конфіденційність
Запросіть зображення клієнтів за умови чіткої згоди та узгодьте обробку даних із вашим затвердженим планом інтеграції.
Продуктивність
Завантажуйте досвід там, де це необхідно, тестуйте реальні пристрої та відстежуйте регресії сторінок продуктів.
Доступність
Зберігайте доступ з клавіатури, порядок фокусування, доступні імена та зручний шлях, коли інтерфейс недоступний.
ЧаПи для розробників
Запитання перед
перший коміт.
Якую інтеграцію нам обрати?
Використовуйте додаток Shopify для найшвидшого керованого шляху, Web SDK для кастомного або безголового (headless) веб-розміщення, нативні SDK для додатків, а також затверджену довідкову документацію з API для серверних робочих процесів, погоджених під час інтеграції.
Звідки беруться облікові дані?
SPREEAI видає ідентифікатор партнера (partner ID) та затверджені облікові дані під час підключення. Браузерний SDK використовує ідентифікатор клієнта (client ID) та ідентифікатор партнера (partner ID). Ніколи не вбудовуйте секрет клієнта (client secret) у код інтерфейсної частини (front-end).
Чи потрібні додатку Shopify ключі API?
Поточний процес адаптації додатку Shopify підключає магазин після кроку необхідних погоджень та підписки; керований додаток не вимагає копіювання ключів на екрані налаштування.
Чому кнопка «Приміряти» не з'являється?
Підтвердьте, що обробку одягу завершено, його ввімкнено для примірки (Try-On), він прив'язаний до активного товару або варіанта, а блок додатка або контейнер SDK присутній у шаблоні товару.
Якие події клієнта доступні?
Документовані зворотні виклики SDK охоплюють кліки по кнопці «Приміряти» та взаємодії з додаванням до кошика. Підключіть їх до свого рівня аналітики без включення зображень клієнтів або непотрібних персональних даних.
Чи доступні вебхуки сервера?
Вебхуки на основі виштовхування сервером (server-push) не входять до поточної опублікованої документації SDK. Узгоджуйте будь-які вимоги щодо подій на стороні сервера з інженерною командою партнерів (Partner Engineering), перш ніж покладатися на них.
Де розробники беруть допомогу?
Використовуйте шлях технічної підтримки, наданий під час адаптації або в електронному листі support@spreeai.com. Включіть середовище, ідентифікатор продукту, браузер або пристрій, мітку часу та стислий шлях відтворення — ніколи не надсилайте секрети.
Коли буде доступна підтримка партнерської мережі Amazon?
Інтеграція з партнерською мережею Amazon перебуває в розробці. Вона навмисно позначена як "Скоро" (Coming Soon), доки інтерфейс адаптації та робочого середовища не будуть готові для сторонніх розробників.
Готові будувати?