Один виджет (рейка + панель), разные способы подключения и тестовые страницы. Новый тип баннера — новый HTML-стенд и новая секция здесь.
Локально: из корня репозитория python3 -m http.server 8765 и откройте эту страницу.
Стенды в local-test/ используют относительные пути к css/ и
js/ — так же работают на GitHub Pages. Список URL см.
local-test/LOCAL_SERVER.txt.
Как на сайте: шрифты, таблица стилей, разметка #coupon-root, затем скрипты с
defer. Конфиг правьте в js/config.js.
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet" /> <!-- На своём сайте укажите пути от корня домена или полные URL --> <link rel="stylesheet" href="css/widget.css" /> <!-- Разметка: скопируйте блок #coupon-root из html/widget.html --> <script src="js/config.js" defer></script> <script src="js/widget.js" defer></script>
Тело страницы без coupon-widget-doc: виджет в режиме хоста (fixed, слева). Длинная
прокрутка контента для проверки.
class="coupon-root coupon-root--host" (см. разметку в демо).hidden и data-ready="false".id="coupon-root", без класса coupon-root
Проверка, что widget.js сам добавляет класс — токены CSS не должны ломаться.
html/widget.html
Эталонная страница репозитория с относительными путями ../css/. Удобно сверять
структуру DOM перед копированием на хостинг.
widget-all-in-one.htmlВсё в одном HTML: стили и скрипты встроены после синхронизации с исходниками.
Открыть демо →# После правок в css/ или js/: python3 local-test/sync_all_in_one.py # Вставка: перенесите содержимое widget-all-in-one.html в шаблон страницы # или подключите как отдельную страницу / виджет по правилам вашей CMS.
js/config.js
Поля window.COUPON_CONFIG — единая точка настроек для всех демо и прод-вставок
(код, сноска, CTA, отступы, поведение при наведении и т.д.).