ShopStory.live: web
Интеграция списка стримов
Отправить нам:
  • Список доменов, на которые будет встраиваться SDK. Чтобы мы правильно настроили CSP на стороне нашего сервиса.
  • Список 5–15 категорий товаров. Чтобы мы присваивали категории в виде тегов к стримам. Пользователи сайта будут фильтровать и искать стримы по этим тегам.
Создать страницу на сайте. Пример URL: https://live.example.ru/ или https://example.ru/live. На странице со списком стримов желательно отключить всплывающие маркетинговые элементы и виджеты для связи с пользователями, чтобы эти элементы не блокировали интерфейс во время стрима.
Создать на странице div элемент с id="shopstory", внутри которого будет размещаться SDK. Этот элемент нужно поместить в правильное место на странице. Наш SDK в процессе запуска будет искать такой элемент и автоматически рисовать контент ShopStory внутри этого элемента.

<head>
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<link rel="dns-prefetch" href="https://app.shopstory.live" />
  <link rel="dns-prefetch" href="https://stream.mux.com" />
</head>

<body>
	<div id="shopstory"></div>
	<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-шаблон, содержащий страницу карточки товара, в конец тега <body>. Код скачивает скрипт, содержащий 2 виджета, и инициализирует его на странице:
  • Виджет прямого эфира: отображается только во время стрима
  • (Виджет) мини-плеера: отображается в карточке товара, только если для товара есть запись стрима
Виджеты могут отображаться на всех страницах, где добавлен код
Можно полностью отключить отображение одного из виджетов
Рекомендуем не добавлять код с виджетами на страницу с корзиной/checkout, чтобы не отвлекать пользователей от покупки.

<!-- вставляем в конец тега <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>