Кастомный CSS виджета бронирования v4

Уровень доступа: Пользовательский Продукт: Shelter Cloud, Онлайн-бронирование (виджет v4) Версия: виджет v4 (onlineWidget4) Статус: Stable Дата редактирования: 17.09.2026

Инструкция описывает, как правильно создавать собственную таблицу стилей (CSS) для виджета бронирования v4, чтобы адаптировать его внешний вид под дизайн сайта отеля. Статья предназначена для веб-разработчиков и интеграторов, которые верстают сайт отеля.

Для работы виджета бронирования лицензия отдельного модуля не требуется — виджет входит в состав продукта Shelter Cloud.

Содержание

Как виджет подключает кастомный CSS
Позиция аргумента CSS в вызовах виджета
Устройство стилей виджета
Переопределение переменных темы
Переопределение фирменных цветов в классах
Как узнать, какие классы и переменные есть у виджета
Переопределение других параметров: шрифты, скругления, отступы
Пример готовой темы
Проверка применения стилей
Типичные ошибки

Как виджет подключает кастомный CSS

Виджет v4 состоит из двух скриптов, которые подключаются на страницы сайта отеля:

Скрипт	Где используется	Что рендерит
startWidget.js	Главная страница сайта	Компактная панель поиска (даты, гости, кнопка «Найти»)
bookWidget.js	Страница бронирования	Полная панель бронирования (выбор номера, тариф, оформление)

Оба скрипта принимают URL кастомного CSS-файла. Загруженный файл подключается в виджет после штатной таблицы стилей (panel.css), поэтому при равной специфичности селекторов ваши правила выигрывают каскад.

Один и тот же CSS-файл следует использовать для обоих виджетов — так панель поиска на главной и страница бронирования будут оформлены одинаково.

CSS-файл должен лежать на публично доступном HTTPS-адресе (на сервере сайта отеля или в CDN). Относительные пути и файлы, доступные только внутри сети отеля, не подойдут: стили загружает браузер гостя.

Позиция аргумента CSS в вызовах виджета

У скриптов разные сигнатуры вызова, и позиция аргумента с CSS не совпадает — это самая частая ошибка при встраивании.

Поисковый виджет (startWidget.js), CSS — пятый аргумент:

ShelterStartWidget.createWidget(
  "shelter-start",        // id div-контейнера
  "<токен отеля>",        // токен виджета из личного кабинета
  "ru",                   // язык
  "booking.html",         // страница, куда ведёт кнопка «Найти»
  "https://site-hotel.ru/css/widget.css",  // URL кастомного CSS
  "both"                  // режимы (days / hours / both)
);

Виджет бронирования (bookWidget.js), CSS — четвертый аргумент:

ShelterBookWidget.createWidget(
  "shelter-book",         // id div-контейнера
  "<токен отеля>",        // токен виджета из личного кабинета
  "ru",                   // язык
  "https://site-hotel.ru/css/widget.css",  // URL кастомного CSS
  "both"                  // режимы (days / hours / both)
);

Если URL стилей передать не в той позиции, виджет продолжит работать без ошибок в консоли, но параметр со стилями просто не дойдет до движка: панель поиска останется со стандартной светлой темой, а кнопки — фирменного розового цвета. Проверяйте позицию аргумента по таблице выше.

Код для вставки с уже правильно расставленными аргументами можно взять в личном кабинете Shelter Cloud в разделе онлайн-бронирования, после чего заменить в нем URL таблицы стилей на свой.

Устройство стилей виджета

Штатные стили виджета (panel.css) собраны на Tailwind CSS v4, и это определяет два ключевых правила переопределения.

Первое: переменные темы объявлены в универсальном правиле *. Цвета фона, текста, границ и акцентов задаются CSS-переменными (--color-white, --color-zinc-100, --color-brand-500 и другими), но объявлены они не в :root, а в селекторе * (каждому элементу). Поэтому в кастомном файле их нужно переопределять тоже селектором * — так ваш файл, загруженный позже, побеждает по каскаду. Объявление в :root может не сработать для элементов внутри iframe виджета.

Второе: часть цветов вкомпилирована в классы литералами. Утилиты Tailwind для фирменного цвета (.bg-brand-500, .text-brand-600, .border-brand-500 и т.п.) содержат готовые hex-значения, а не var(--color-brand-500). Переопределение переменной --color-brand-500 на такие классы не действует: кнопка останется розовой, хотя файл загружается без ошибок. Эти классы нужно перекрывать напрямую (см. следующий раздел).

Штатная палитра виджета:

Назначение	Значение
Акцент (кнопки, выделение)	#d1375d
Акцент при наведении	#c22d52
Акцент нажатый	#a32346
Акцент светлый	#ec7896
Фон акцентный светлый	#fdf2f4
Фон панелей и полей	#ffffff
Шкала серого	zinc (#f4f4f5 … #18181b)

Переопределение переменных темы

Через переменные корректно переопределяются фон панелей, поля ввода, текст по серой шкале, границы и тепловая карта календаря доступности. Все объявления делайте в селекторе *:

* {
  /* фон: панелей, полей, всплывающих списков */
  --color-white: #16302a;

  /* серая шкала (светлое — темнее, темное — светлее) */
  --color-zinc-50:  #17282a;
  --color-zinc-100: #1d3330;
  --color-zinc-200: #27403b;
  --color-zinc-700: #c4d7d0;
  --color-zinc-800: #dbe7e2;
  --color-zinc-900: #ecf3f0;

  /* акцент */
  --color-brand-500: #63c7ac;
  --color-brand-600: #3fa88c;
  --color-brand-700: #2f8a72;

  /* тепловая карта календаря (минимальная/максимальная цена) */
  --color-heatmap-min: #1d3330;
  --color-heatmap-max: #63c7ac;
}

Значения в примере задают темно-зеленую тему с мятным акцентом — подставьте цвета фирменного стиля отеля.

Переопределение фирменных цветов в классах

Кнопки, тексты и рамки фирменного цвета перекрываются атрибутными селекторами по подстроке имени класса. Такой селектор заодно ловит варианты с префиксами hover:, group-hover:, data-[state=...], которые иначе пришлось бы экранировать:

[class*="bg-brand-500"]   { background-color: #63c7ac !important; }
[class*="bg-brand-600"]   { background-color: #3fa88c !important; }
[class*="bg-brand-700"]   { background-color: #2f8a72 !important; }
[class*="bg-brand-100"]   { background-color: #7fd6bd !important; }
[class*="bg-brand-50"]    { background-color: #14332b !important; }
[class*="text-brand-500"] { color: #63c7ac !important; }
[class*="text-brand-600"] { color: #3fa88c !important; }
[class*="text-brand-700"] { color: #2f8a72 !important; }
[class*="border-brand-500"] { border-color: #63c7ac !important; }

Правила с переменными и правила с классами не заменяют друг друга: первое покрывает фон и серую шкалу, второе — кнопки и акцентные надписи. Используйте оба блока вместе.

Как узнать, какие классы и переменные есть у виджета

Виджет — обычная веб-страница в iframe, поэтому весь арсенал браузера доступен:

Способ 1. DevTools (основной).

Откройте страницу с виджетом, F12 → включите выбор элемента (иконка курсора) и щёлкните по нужной кнопке/полю внутри iframe виджета.
Вкладка Styles покажет:
- имена классов у элемента (например class="... bg-brand-500 text-white rounded-xl px-4 py-2 ..."),
- какие объявления «перечёркнуты» (проиграли каскад) и кто их перекрыл.
Вкладка Computed — итоговое значение свойства и источник правила.
В консоли: getComputedStyle($0).getPropertyValue('--color-brand-500') покажет текущее значение переменной у выбранного элемента.

Чтобы попасть внутрь iframe, переключите контекст в консоли DevTools: выпадающий список «top» → iframe виджета (иначе селекторы будут искаться в родительской странице, а не в панели).

Способ 2. Исходник panel.css.

Откройте в браузере файл стилей панели напрямую и ищите по подстроке:

https://extranet.shelter.ru/BookingEngine/onlineWidget4/css/panel.css

Внутри видно и полный набор переменных (--color-*, --radius-*, --font-*, --spacing-*), и все утилитарные классы с hex-литералами. Поиск по brand- покажет все места, где встречается фирменный цвет.

Способ 3. Поиск по всем CSS-файлам. В DevTools вкладка Network → фильтр CSS — покажет все подключённые таблицы стилей (panel.css, ваш файл и т.д.).

Имена классов — это утилиты Tailwind v4: шаблон свойство-оттенок (bg-, text-, border-, rounded- — скругления, p-/px-/py- — отступы, gap- — интервалы, font- — шрифт/насыщенность, shadow- — тени). Оттенки шкалы: 50, 100, 200, …, 900, 950 (50 — светлый, 950 — почти чёрный).

Переопределение других параметров: шрифты, скругления, отступы

Кроме цветов тема виджета содержит переменные типографики, скруглений и размеров. Переопределяются они так же — селектором * (см. раздел «Устройство стилей виджета»):

* {
  /* Шрифт: название и масштаб */
  --font-sans: "Montserrat", "Segoe UI", sans-serif;
  --text-base: 1.05rem;      /* базовый размер текста */
  --text-lg: 1.2rem;
  --text-sm: 0.9rem;

  /* Скругления: radius-<имя> используется утилитами rounded-<имя> */
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 24px;
}

Точные имена переменных своей версии панели смотрите в panel.css (способ 2 выше): они объявлены в правиле * блоками --font-*, --text-*, --radius-*, --spacing-*.

Если параметр «зашит» в утилитарный класс литералом (как фирменные цвета) — переменная не поможет, перекрывайте класс напрямую:

/* Скругление всех кнопок, включая hover-состояния */
[class*="rounded-xl"]  { border-radius: 18px !important; }
[class*="rounded-2xl"] { border-radius: 24px !important; }

/* Шрифт панели целиком */
#shw-root, #shw-root * { font-family: "Montserrat", "Segoe UI", sans-serif !important; }

/* Тень у всплывающих панелей */
[class*="shadow-lg"] { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important; }

Правило то же, что с цветами: сначала пробуйте переменную (чисто и без !important); если не подействовало — смотрите в DevTools, какое свойство и из какого правила реально применяется, и перекрывайте его селектором по классу с !important.

Пример готовой темы

Минимальный файл, который полностью уводит виджет от стандартной светло-розовой темы (объединение двух предыдущих разделов):

/* Кастомная тема виджета бронирования v4.
   Подключается пятым аргументом ShelterStartWidget.createWidget
   и четвертым аргументом ShelterBookWidget.createWidget. */

* {
  --color-white: #16302a;
  --color-zinc-50:  #17282a;
  --color-zinc-100: #1d3330;
  --color-zinc-200: #27403b;
  --color-zinc-700: #c4d7d0;
  --color-zinc-800: #dbe7e2;
  --color-zinc-900: #ecf3f0;
  --color-brand-500: #63c7ac;
  --color-brand-600: #3fa88c;
  --color-brand-700: #2f8a72;
  --color-heatmap-min: #1d3330;
  --color-heatmap-max: #63c7ac;
}

[class*="bg-brand-500"]   { background-color: #63c7ac !important; }
[class*="bg-brand-600"]   { background-color: #3fa88c !important; }
[class*="bg-brand-700"]   { background-color: #2f8a72 !important; }
[class*="bg-brand-100"]   { background-color: #7fd6bd !important; }
[class*="bg-brand-50"]    { background-color: #14332b !important; }
[class*="text-brand-500"] { color: #63c7ac !important; }
[class*="text-brand-600"] { color: #3fa88c !important; }
[class*="text-brand-700"] { color: #2f8a72 !important; }
[class*="border-brand-500"] { border-color: #63c7ac !important; }

После правки файла не забудьте сбросить кэш браузера (Ctrl+F5) — CSS-файлы кэшируются, и без сброса кажется, что правка «не применилась».

Проверка применения стилей

Порядок диагностики, если тема не применилась:

Откройте URL вашего CSS-файла напрямую в браузере или проверьте командой curl. Должен быть ответ 200 и Content-Type: text/css. Ответ 404 означает, что файл не загружен на сервер или путь неверен.
В DevTools браузера (F12) на странице с виджетом откройте вкладку Network и обновите страницу: в списке запросов должен быть ваш CSS-файл со статусом 200.
В консоли DevTools не должно быть ошибки invalid stylesheet url — она означает, что URL передан в неверной позиции аргументов (см. раздел «Позиция аргумента CSS»).
Если файл грузится со статусом 200, но цвета не меняются — проверьте типичные ошибки из следующего раздела.

Типичные ошибки

URL стилей передан не в той позиции аргумента. У startWidget CSS — пятый аргумент, у bookWidget — четвертый. Симптом: виджет работает, ошибок в консоли нет, но стиль стандартный.

Кириллическая буква в hex-цвете. Буквы «а», «с», «е», «р» внешне неотличимы от латинских, но делают объявление невалидным. Браузер молча игнорирует такое объявление и берет прежнее значение из panel.css — правка «не срабатывает» без всяких ошибок. Проверяйте файл командой поиска кириллицы в значениях: grep -n '[а-яА-ЯёЁ]' widget.css (кириллица допустима только в комментариях).

Переопределение переменных в :root. Тема panel.css объявлена в правиле *, поэтому объявление в :root может проиграть каскад. Переопределяйте тоже в *.

Ожидание, что переменная перекрасит кнопку. Фирменные цвета вкомпилированы в классы Tailwind литералами. Для кнопок и акцентных текстов используйте атрибутные селекторы из раздела «Переопределение фирменных цветов в классах».

Забытая пересборка архива сайта. Если сайт собирается в архив (например site.zip) и заливается на сервер, после правки CSS нужно пересобрать архив и перезалить его целиком — иначе на сервере останется старая версия файла.

Кэш браузера. CSS кэшируется агрессивно. После каждой правки проверяйте результат со сбросом кэша (Ctrl+F5) или в режиме инкогнито.