Найшвидший шлях
SPREEAI для розробників
Збудуйте примірочну
на кожен екран.
Підключіть свій каталог. Сформуйте шлях клієнта. Впровадьте Always On у свій магазин за допомогою шляху інтеграції, який підходить вашій команді.
Оберіть свій шлях
Почніть там, де ваш
стек комерції живе.
Використовуйте Shopify для керованого налаштування або інтегруйтеся з нашими SDK та API. Виберіть функції, необхідні вашому бізнесу, та збережіть шлях покупок вашого бренду.
Користувацький веб-сайт
Веб-SDK
Керуйте розміщенням, стилем, подіями, розміром та поведінкою додавання до кошика.JavaScript + TypeScript ДокументиРідний мобільний
SDK для iOS
Впровадьте SPREEAI у існуючий процес покупок на iOS.Відкрити посібник iOS ДокументиРідний мобільний
SDK для Android
Інтегруйте функцію примірки в інтерфейс Android-продукту за допомогою вбудованих елементів керування.Відкрити посібник Android Доступ для партнерівСистеми на замовлення
Публічні API
Використовуйте затверджений довідник API для робочих процесів на стороні сервера та каталогу.Довідник з відкритого APIТорговий майданчик
Партнерська мережа Amazon
Незабаром у партнерській мережі Amazon та на інших платформах, з додатковими способами інтеграції SPREEAI у ваш комерційний стек.Оновлення з'являтимуться тут першимиКороткий посібник з веб-SDK
Ваша перша інтеграція.
Пройдіть автентифікацію один раз, а потім відтворіть примірку або змініть розмір будь-де на сторінці. Використовуйте тестові облікові дані, видані під час реєстрації, і ніколи не додавайте секретний ключ клієнта до коду браузера.
npm install @spreeai/web-sdk@3.0.0
# or
yarn add @spreeai/web-sdk@3.0.0import { 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,
});
}// Pass events inside renderTryOnButton's options.
await sdk?.renderTryOnButton({
elementId: "spreeai-try-on",
garments: [{ garmentId: "your-garment-id" }],
events: {
onTryOnButtonClick: (event) => {
console.info(event.name);
},
onAddToCartClicked: (event) => {
// Connect event.garments to your storefront's cart.
},
},
});Модель інтеграції
Чотири системи.
Один момент для клієнта.
Ідентифікатори продуктів, варіанти, зображення та контекст мерчандайзингу.
Одяг проходить стадії обробки, перевірки та готовності.
Ваша вітрина запитує можливість використання відповідного продукту.
Приміряйте, знайдіть розмір, завершіть образ і поверніться до оформлення замовлення.
Цілеспрямований шлях до запуску
Підготуйтеся. Підключіться.
Іди жити з упевненістю.
Три ключові етапи з практичним контрольним списком для кожного з них.
- 01 · Підготовка
Чітка відправна точка.
Узгодьте шлях, доступ та каталог.
Контрольний список підготовки
- Виберіть один канал, групу каталогу та показник успіху.
- Підтвердьте доступ партнера, облікові дані та дозволи на перевірку.
- Надайте чіткі зображення одягу, що відповідають артикулу.
- 02 · З’єднатися
Зробіть так, щоб це відчувалося рідним.
Вбудуйте проміжні етапи. Тестуйте весь процес.
Контрольний список інтеграції
- Відображати відповідні товари та підключати варіанти й поведінку кошика.
- Зіставте досвід із брендом.
- Перевірте стани мобільних пристроїв, комп’ютерів, доступності, продуктивності та збоїв.
- 03 · Запуск
Навчайтеся на реальному використанні.
Увімкніть готові продукти та виміряйте.
Контрольний список запуску
- Підтвердіть готовність продукту та опублікуйте поетапний досвід.
- Контролюйте впровадження, завершення та конверсію.
- Використовуйте результати, щоб скерувати наступну категорію або подорож.
Базовий рівень активів
Гарний внесок дає кращий результат.
- JPEG або PNG
- Мінімум 2000 × 2000 пікселів
- Потрібен вид спереду
- Рекомендований вид ззаду
- Нейтральне, рівномірне освітлення
- SKU або ідентифікатор стилю в назві файлу
Довідка розробника
Знайти наступний
корисна відповідь.
Почніть тут
Початок роботи
Зрозумійте доступ, підтримувані платформи та перші рішення, які має прийняти ваша команда.
Офіційне посилання Керована інтеграціяShopify адаптація
Встановіть застосунок, прийміть угоди, синхронізуйте одяг, налаштуйте кнопку та запустіть.
Офіційне посилання Веб-SDKПоверхня API
Перегляньте ініціалізацію, параметри рендерингу, розміри, налаштування та типізовані інтерфейси.
Офіційне посилання API партнераДовідник публічного API
Ознайомтеся зі схваленим серверним інтерфейсом, доступним для автентифікованих партнерів.
Посилання на Сваґґера ЯкістьАктиви одягу
Підготуйте зображення та метадані продукту, які легко пройдуть процес обробки та перевірки.
Посібник SPREEAI ВиробництвоКонтроль якості та запуск
Використовуйте спільний контрольний список браузера, продуктивності, доступності та запуску.
Посібник SPREEAI ПідтримкаУсунення несправностей
Вирішіть найпоширеніші проблеми з автентифікацією, відповідністю вимогам, рендерингом та продуктивністю.
Посібник SPREEAI ДокументаціяПосібники з впровадження
Перегляньте загальнодоступні швидкі посібники, стандарти активів, контрольні списки запуску та інструкції з усунення несправностей.
Відкрита документаціяНемає відповідних ресурсів для розробників. Спробуйте «Shopify», «SDK», «активи» або «QA».
Збірка для виробництва
Деталі, що захищають
досвід клієнта.
Безпека
Зберігайте секрети на стороні сервера, використовуйте лише видані середовища та ротуйте облікові дані в робочому процесі партнера.
Конфіденційність
Запитуйте зображення клієнтів за їх чіткою згодою та узгодьте обробку даних із вашим затвердженим планом інтеграції.
Продуктивність
Завантажуйте інтерфейс там, де це потрібно, тестуйте реальні пристрої та відстежуйте регресії на сторінках товарів.
Доступність
Зберегти доступ з клавіатури, порядок фокусування, доступні імена та зручний шлях, коли інтерфейс недоступний.
Найчастіші запитання розробників
Питання перед
перший коміт.
Яку інтеграцію нам слід обрати?
Використовуйте додаток Shopify для найшвидшого керованого шляху, веб-SDK для налаштованого або безголового розміщення в Інтернеті, нативні SDK для взаємодії з додатками та затверджений довідник API для робочих процесів на стороні сервера, узгоджений під час адаптації.
Звідки беруться посвідчення?
SPREEAI видає ідентифікатор партнера та затверджені облікові дані під час реєстрації. SDK браузера використовує ідентифікатор клієнта та ідентифікатор партнера. Ніколи не вбудовуйте секретний ключ клієнта у код інтерфейсу.
Чи потрібні ключі API для застосунку Shopify?
Поточний процес реєстрації застосунку Shopify підключається до магазину після етапу укладання необхідних угод та підписки; керований застосунок не потребує копіювання ключів на екран налаштування.
Чому кнопка «Приміряти» не відображається?
Переконайтеся, що обробка одягу завершена, він увімкнений для примірки, відповідає активному продукту або варіанту, а також що блок програми або контейнер SDK присутній у шаблоні продукту.
Які клієнтські події доступні?
Задокументовані зворотні виклики SDK охоплюють натискання кнопки «Спробувати» та взаємодії з додаванням товарів до кошика. Підключіть їх до рівня аналітики, не додаючи зображення клієнтів чи зайві персональні дані.
Чи доступні вебхуки сервера?
Вебхуки, що надсилаються сервером, не входять до опублікованої документації SDK. Перш ніж покладатися на будь-які вимоги щодо подій на стороні сервера, зверніться до інженерної служби партнерів.
Де розробники отримують допомогу?
Скористайтеся способом технічної підтримки, наданим під час реєстрації, або електронною поштою support@spreeai.comВкажіть середовище, ідентифікатор продукту, браузер або пристрій, позначку часу та короткий шлях відтворення — ніколи не надсилайте секрети.
Коли буде доступна підтримка партнерської мережі Amazon?
Інтеграція з партнерською мережею Amazon перебуває в розробці. Вона навмисно позначена як «Скоро в розробці», доки інтерфейс адаптації та продакшену не будуть готові для зовнішніх розробників.
Готові будувати?