Это демо-магазин. Так подключение Numior.SaleHub выглядит и работает на вашем сайте — вживую. Выберите формат, попробуйте кнопку и посмотрите, как просто его добавить.
Формат · всплывающее окно
Покупатель нажимает кнопку на вашем сайте — и оформление сертификата открывается поверх страницы, никуда не уходя. Самый быстрый способ начать продавать. Нажмите кнопку ниже и попробуйте сами.
Добавьте кнопку и одну строку со скриптом — больше ничего настраивать не нужно.
<button
data-numior-sale-hub-checkout-trigger
data-storefront="demo-shop"
data-mode="modal"
data-theme="light"
>
Купить сертификат
</button>
<script async src="https://salehub.numior.ru/widget/v1/loader.js"></script>Там кнопке можно задать только ссылку. Скрипт с витриной и темой вставьте в head сайта, а кнопке или пункту меню задайте ссылку #numior-sale-hub-checkout. Для английской страницы — #numior-sale-hub-checkout?locale=en.
<!-- в <head> сайта -->
<script async
data-storefront="demo-shop"
data-theme="light"
src="https://salehub.numior.ru/widget/v1/loader.js"></script>
<!-- кнопка или пункт меню -->
<a href="#numior-sale-hub-checkout">Купить сертификат</a>Формат · встроенный блок
Виджет встраивается в страницу как её часть: покупатель оформляет сертификат, не переходя никуда, а высота блока подстраивается сама. Ниже — живой встроенный блок.
Добавьте контейнер и скрипт, указав, куда встроить блок.
<div id="numior-checkout"></div>
<script async
data-numior-sale-hub-checkout
data-storefront="demo-shop"
data-mode="inline"
data-target="#numior-checkout"
data-theme="light"
src="https://salehub.numior.ru/widget/v1/loader.js"></script>Формат · отдельная страница
Если встроить виджет нельзя — например, в письме — кнопка откроет оплату в новой вкладке. Удобно для ссылок в рассылках и мессенджерах. Нажмите, чтобы посмотреть.
Та же кнопка, что и для всплывающего окна, только режим — redirect.
<button
data-numior-sale-hub-checkout-trigger
data-storefront="demo-shop"
data-mode="redirect"
data-theme="light"
>
Купить сертификат
</button>
<script async src="https://salehub.numior.ru/widget/v1/loader.js"></script>Формат · календарь мероприятий
Календарь показывает мероприятия организации по сеансам: гость выбирает показ, открывает мероприятие и покупает билет, не покидая ваш сайт. Выберите формат встраивания.
Календарь встроен прямо в страницу и занимает отведённый ему блок. Подходит разделу «Афиша»: гость видит сеансы сразу, без единого клика.
Календарь открывается поверх сайта в окне 720 px по клику на кнопку. Подходит шапке и меню: афиша не занимает место на странице, пока её не позвали.
Календарь открывается отдельной вкладкой браузера. Подходит там, где встраивание невозможно — например, в письме или в посте соцсети.
Добавьте контейнер и скрипт с атрибутом календаря — вид, состав и разделы настраиваются data-атрибутами.
<div id="numior-events-calendar"></div>
<script async
data-numior-sale-hub-events-calendar
data-storefront="demo-shop"
data-mode="inline"
data-target="#numior-events-calendar"
data-view="month"
data-categories="true"
data-theme="light"
src="https://salehub.numior.ru/widget/v1/loader.js"></script>Кнопке достаточно атрибута триггера: скрипт грузится один раз, окно открывает лоадер.
<button
data-numior-sale-hub-events-calendar-trigger
data-storefront="demo-shop"
data-mode="modal"
data-view="month"
data-categories="true"
data-theme="light"
>
Открыть афишу
</button>
<script async src="https://salehub.numior.ru/widget/v1/loader.js"></script>Тот же триггер с mode="redirect" — вместо окна лоадер открывает афишу новой вкладкой.
<button
data-numior-sale-hub-events-calendar-trigger
data-storefront="demo-shop"
data-mode="redirect"
data-view="month"
data-categories="true"
data-theme="light"
>
Открыть афишу в новой вкладке
</button>
<script async src="https://salehub.numior.ru/widget/v1/loader.js"></script>