Интеграция Web SDK

Для кого этот метод?

Web SDK — это простое решение для клиентов, которые не хотят разрабатывать кастомную интеграцию через API. Просто скопируйте код и вставьте на сайт — всё работает из коробки.

🆚 API vs Web SDK

Критерий	Web SDK (этот гайд)	Public API (см. гайд)
Сложность	✅ Копипаста кода	⚠️ Требует программирования
Кастомизация UI	⛔️ Ограничена	✅ Полный контроль
Время интеграции	✅ 5-15 минут	⚠️ 1-3 дня
Аутентификация	⛔️ Не требуется	✅ `applicationId` (Bearer токены появятся после релиза — см. Authentication)
Подходит для	Быстрое внедрение	Кастомные решения, мобильные приложения

📊 Что включает Web SDK?

Инфографика Web SDK

Web SDK предоставляет 3 готовых виджета:

Список стримов — страница с каталогом всех стримов (запланированных, live, завершённых)
Мини-плеер — виджет в карточке товара, показывает стрим с этим товаром
Live-виджет — всплывающий плеер активного эфира (только во время live)

🚀 Интеграция списка стримов

Шаг 1: Отправьте нам информацию

Перед началом интеграции отправьте вашему менеджеру ShopStory:

Список доменов, на которые будет встраиваться SDK (для настройки CSP)
- Например: example.ru, www.example.ru, m.example.ru
Список категорий товаров (5-15 категорий)
- Например: "Макияж", "Уход за кожей", "Парфюмерия", "Волосы"
- Используется для фильтрации стримов по тегам

Шаг 2: Создайте страницу на сайте

Создайте страницу для стримов. Примеры URL:

https://example.ru/live
https://live.example.ru/
https://example.ru/streams

Рекомендация

На странице со стримами отключите всплывающие баннеры, чат-виджеты и другие маркетинговые элементы, чтобы не блокировать плеер во время просмотра.

Шаг 3: Добавьте код на страницу

Добавьте следующий код на вашу страницу:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Стримы — Ваш магазин</title>

  <!-- DNS prefetch для ускорения загрузки -->
  <link rel="dns-prefetch" href="https://app.shopstory.live" />
  <link rel="dns-prefetch" href="https://stream.mux.com" />
</head>
<body>
  <!-- Ваш header -->

  <!-- Контейнер для ShopStory SDK -->
  <div id="shopstory"></div>

  <!-- Ваш footer -->

  <!-- Загрузка и инициализация SDK -->
  <script
    type="application/javascript"
    src="https://app.shopstory.live/sdk/shopstory-sdk/shopstory-sdk-v1.x.min.js"
    crossorigin="anonymous"
    charset="utf-8"
  ></script>

  <script type="application/javascript">
    (function () {
      "use strict";
      var ShopStorySDK = window.ShopStorySDK;
      if (ShopStorySDK) {
        ShopStorySDK.show({
          containerElement: document.getElementById("shopstory"),
        });
      }
    })();
  </script>
</body>
</html>

Что делает этот код:

Создаёт контейнер <div id="shopstory"></div>
Загружает SDK-скрипт
Инициализирует SDK и рендерит список стримов внутри контейнера

Совет

Оставьте на странице ваш header и footer, чтобы стримы выглядели как часть вашего сайта.

🎬 Интеграция мини-плеера и live-виджета

Что это?

Мини-плеер — отображается в карточке товара, если для этого товара есть запись стрима
Live-виджет — всплывающий плеер, показывается на всех страницах во время live-трансляции

Мини-плеер в карточке товара

Как работает мини-плеер?

SDK автоматически:

Определяет артикул товара на текущей странице
Ищет в базе ShopStory стримы с этим товаром
Если стрим найден — отображает мини-плеер

Важно

При изменении вёрстки сайта интеграция может сломаться. Сообщите нам, если планируете редизайн.

Установка

Добавьте следующий код в конец тега <body> в шаблоне карточки товара:

<!-- Вставляем в конец тега <body> -->
<script
  id="shopstory-pip"
  type="application/javascript"
  src="https://app.shopstory.live/sdk/shopstory-pip-sdk/shopstory-pip-sdk-v1.x.min.js"
  crossorigin="anonymous"
  charset="utf-8"
  async
></script>

Где размещать код

Этот код можно добавить на все страницы сайта — виджеты будут отображаться только там, где это уместно:

Мини-плеер — только в карточках товаров
Live-виджет — только во время live-трансляции

Рекомендуем не добавлять на страницы корзины/checkout, чтобы не отвлекать пользователей от покупки.

Настройки отображения

Можно полностью отключить отображение одного из виджетов. Свяжитесь с вашим менеджером для настройки.

📱 Мобильная версия

Веб-сайт (мобильная версия)

SDK автоматически адаптируется под мобильные устройства. Никаких дополнительных настроек не требуется.

Встраивание в мобильное приложение (iOS/Android)

Для встраивания списка стримов в мобильное приложение:

Создайте WebView компонент в приложении
Загрузите в WebView страницу со списком стримов (например, https://example.ru/live)
На мобильной версии страницы удалите header, footer и другие элементы навигации

WebView интеграция

Коммуникация с приложением

Информация о действиях пользователя внутри WebView (клики, переходы) может передаваться родительскому приложению через события postMessage. Свяжитесь с вашим менеджером для настройки.

Подробнее о мобильной интеграции см. API Integration Guide (для кастомной интеграции через API).

✅ Проверка интеграции

После установки SDK:

Проверьте страницу со списком стримов
- Откройте созданную страницу (например, https://example.ru/live)
- Должны отобразиться стримы (если они уже созданы в личном кабинете)
Проверьте мини-плеер
- Откройте карточку товара, который участвовал в стриме
- Должен отобразиться мини-плеер
Проверьте live-виджет
- Запустите live-трансляцию через мобильное приложение ShopStory
- Откройте любую страницу сайта
- Должен появиться всплывающий live-виджет

Сообщите о завершении

🔴 Важно: После интеграции SDK сообщите вашему менеджеру. Нам потребуется:

Настроить парсинг товарного фида (требования к фиду)
Создать ваш аккаунт в личном кабинете
Провести финальную настройку сервиса

🔧 Техническая поддержка

Где взять помощь?

Email: support@shopstory.live
Telegram: Партнёрская группа (добавление по приглашению от менеджера)

Частые вопросы

Q: Мини-плеер не отображается в карточке товара A: Проверьте, что товар участвовал в стриме. SDK ищет стримы по артикулу товара.

Q: Можно ли кастомизировать дизайн виджетов? A: Ограниченно. Для полного контроля используйте Public API.

Q: Как отключить live-виджет на определённых страницах? A: Свяжитесь с вашим менеджером для настройки исключений.

🚀 Следующие шаги

После интеграции SDK:

Создайте первый стрим — через личный кабинет
Настройте товарный фид — см. Feed Requirements
Проведите эфир — через мобильное приложение ShopStory

Или переходите на кастомную интеграцию:

🆚 API vs Web SDK​

📊 Что включает Web SDK?​

🚀 Интеграция списка стримов​

Шаг 1: Отправьте нам информацию​

Шаг 2: Создайте страницу на сайте​

Шаг 3: Добавьте код на страницу​

🎬 Интеграция мини-плеера и live-виджета​

Что это?​

Как работает мини-плеер?​

Установка​

Настройки отображения​

📱 Мобильная версия​

Веб-сайт (мобильная версия)​

Встраивание в мобильное приложение (iOS/Android)​

✅ Проверка интеграции​

🔧 Техническая поддержка​

Где взять помощь?​

Частые вопросы​

🚀 Следующие шаги​