Самый быстрый путь
SPREEAI для разработчиков
Построить примерочную
на каждый экран.
Подключите свой каталог. Формируйте путь клиента. Добавьте Always On в свою витрину, выбрав путь интеграции, который подходит вашей команде.
Выберите свой путь
Начните с того, с чего вы
Коммерческий стек живет.
Используйте Shopify для управляемой настройки или интегрируйте с нашими SDK и API. Выберите функции, необходимые вашему бизнесу, и обеспечьте бесперебойный процесс совершения покупок для вашего бренда.
Пользовательский веб-сайт
Веб-SDK
Управляйте размещением, стилем, событиями, размером и поведением добавления в корзину.JavaScript + TypeScript ДокументыНативная мобильная версия
iOS SDK
Внесите опыт SPREEAI в существующий процесс совершения покупок на iOS.Руководство по открытию iOS ДокументыНативная мобильная версия
Android SDK
Интегрируйте функцию примерки в пользовательский интерфейс Android-устройства с помощью встроенных элементов управления.Руководство по открытию Android Партнерский доступПользовательские системы
Общедоступные API
Для серверных и каталоговых рабочих процессов используйте утвержденный справочник API.Справочник по открытому APIТорговая площадка
Партнерская сеть Amazon
Скоро появится в партнерской сети Amazon и на других платформах и предложит больше способов интеграции SPREEAI в ваш коммерческий стек.Обновления будут появляться здесь в первую очередь.Быстрый старт Web 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 пикселей
- Требуется вид спереди.
- Рекомендуется вид сзади
- Нейтральное, равномерное освещение
- Артикул или идентификатор стиля в имени файла
Справочник разработчика
Найдите следующий
Полезный ответ.
Начните здесь
Начиная
Разберитесь в вопросах доступа, поддерживаемых платформах и первых решениях, которые должна принять ваша команда.
Официальная ссылка Управляемая интеграцияShopify ввод в должность
Установите приложение, примите условия соглашения, синхронизируйте одежду, настройте кнопку и запустите.
Официальная ссылка Веб-SDKповерхность API
Просмотрите параметры инициализации, настройки отображения, определения размеров, персонализации и типизированных интерфейсов.
Официальная ссылка Партнерский APIСправочник по общедоступному API
Изучите утвержденный серверный интерфейс, доступный проверенным партнерам.
отсылка к Swagger КачествоШвейные активы
Подготовьте изображения продукта и метаданные, которые будут беспрепятственно проходить этапы загрузки и проверки.
путеводитель SPREEAI ПроизводствоКонтроль качества и запуск
Используйте общий контрольный список по браузерам, производительности, доступности и запуску в эксплуатацию.
путеводитель SPREEAI ПоддерживатьПоиск неисправностей
Устраните наиболее распространенные проблемы, связанные с аутентификацией, соответствием требованиям, отображением и производительностью.
путеводитель SPREEAI ДокументацияРуководства по внедрению
Просмотрите общедоступные краткие руководства, стандарты активов, контрольные списки запуска и рекомендации по устранению неполадок.
Открытая документацияНе найдено подходящих ресурсов для разработчиков. Попробуйте «Shopify», «SDK», «assets» или «QA».
Сборка для производства
Детали, которые защищают
клиентский опыт.
Безопасность
Храните секретные данные на стороне сервера, используйте только выданные среды и осуществляйте ротацию учетных данных в рамках партнерского рабочего процесса.
Конфиденциальность
Запрашивайте изображения клиентов с их явного согласия и согласовывайте обработку данных с утвержденным планом интеграции.
Производительность
Размещайте пользовательский интерфейс там, где это необходимо, тестируйте на реальных устройствах и отслеживайте регрессии на страницах продукта.
Доступность
Сохраняйте доступ к клавиатуре, порядок фокусировки, доступные имена и удобный путь при недоступности данной функции.
Часто задаваемые вопросы для разработчиков
Вопросы перед
первый коммит.
Какую интеграцию нам следует выбрать?
Используйте приложение Shopify для самого быстрого управляемого пути, Web SDK для пользовательского или безголового веб-размещения, нативные SDK для работы с приложениями, а также утвержденный справочник API для серверных рабочих процессов, согласованный во время внедрения.
Откуда берутся учетные данные?
SPREEAI выдает идентификатор партнера и утвержденные учетные данные во время регистрации. SDK браузера использует идентификатор клиента и идентификатор партнера. Никогда не встраивайте секретный ключ клиента во фронтенд-код.
Требуются ли для приложения Shopify ключи API?
Текущий процесс подключения приложения Shopify подключает магазин после выполнения необходимых соглашений и подписки; для управляемого приложения не требуется копировать ключи на экран настройки.
Почему кнопка «Примерка» не отображается?
Убедитесь, что предмет одежды завершил обработку, включен для примерки, соответствует активному продукту или варианту и что блок приложения или контейнер SDK присутствует в шаблоне продукта.
Какие мероприятия для клиентов доступны?
Документированные обратные вызовы SDK охватывают нажатия кнопки «Примерка» и действия добавления товара в корзину. Подключите их к уровню аналитики, не включая изображения клиентов или ненужные персональные данные.
Доступны ли серверные вебхуки?
Веб-хуки, отправляющие данные на сервер, не входят в текущую опубликованную документацию SDK. Прежде чем полагаться на них, обсудите любые требования к серверным событиям с отделом технической поддержки партнеров.
Где разработчики могут получить помощь?
Воспользуйтесь формой технической поддержки, предоставленной во время регистрации, или электронной почтой. support@spreeai.com. Укажите среду, идентификатор продукта, браузер или устройство, метку времени и краткий путь воспроизведения — никогда не отправляйте секреты.
Когда станет доступна поддержка партнерской сети Amazon?
Интеграция с партнерской сетью Amazon находится в разработке. Она намеренно помечена как «Скоро будет доступно» до тех пор, пока не будут готовы интерфейс для подключения и использования сторонними разработчиками.
Готовы к строительству?