Виджет для сайта

Пошаговая настройка: тариф, домен, список и карта, цвет, код для сайта, отдельные коды под город и что проверить, если каталог не открывается.

Что это такое

Виджет SEDNOX — каталог ваших конструкций прямо на сайте компании: список, карта, избранное и корзина. Клиент выбирает площадки у вас, без пересылок файлов и скриншотов.

Всё настраивается в личном кабинете владельца: раздел Инструменты продвижения (вкладки Виджет, Настройки, Тарифы). Раздел доступен только с ролью «Владелец».

Стили сайта не ломаются

Виджет работает через Shadow DOM — CSS вашего сайта и виджета не смешиваются. Удобнее вынести его на отдельную страницу каталога, а не втискивать в плотную шапку.

С чего начать

Короткий порядок, чтобы виджет реально открылся на сайте:

  1. Опубликуйте конструкции в разделе Мои объекты (пустой каталог на сайте бесполезен).
  2. Во вкладке Тарифы выберите, как вы работаете с клиентами из виджета.
  3. Во вкладке Настройки укажите адрес сайта, включите виджет, выберите список/карту и цвет.
  4. Во вкладке Виджет скопируйте HTML-код и вставьте его на страницу каталога.
  5. Проверьте через «Превью: открыть виджет» или вкладку Ссылка — затем откройте ту же страницу на своём сайте по HTTPS.

Настройки: сайт и режимы

Откройте Инструменты продвижения → Настройки.

Активировать виджет

Пока галочка выключена, код на сайте не покажет каталог. Сначала сохраните адрес сайта и включите виджет, потом вставляйте код.

Адрес сайта

Укажите канонический адрес того домена, куда вставите код.

  • Формат: https://example.com или https://мойсайт.рф.
  • Только HTTPS.
  • Без www, без пути (/catalog), без порта и параметров.
  • Кириллические домены и типичные хосты CMS (в том числе Битрикс) поддерживаются — главное сохранить тот же хост, с которого открывается страница.
Защита по домену

Виджет отвечает только с разрешённого домена. Если открыть страницу с другого хоста (другой поддомен, http вместо https, тестовый стенд) — каталог не загрузится. После сохранения в настройках видно строку «Разрешённый домен».

Список и карта

Можно включить оба режима или один. Посетитель переключается между ними в шапке виджета. Нельзя выключить и список, и карту одновременно — иначе показывать нечего.

Цвет карты

В настройках можно выбрать оформление подложки карты: стандарт, серая, инверсия или Hue. Метки конструкций остаются в цвете темы виджета.

Цвет виджета

В том же разделе настроек блок Кастомизация виджета. Цвет влияет на кнопку «В корзину», значки избранного и корзины, акценты интерфейса и метки на карте.

Кастомизация виджета: выбор цвета и предпросмотр
Готовые схемы или свой HEX — в предпросмотре видно сразу.
  • Готовые схемы: оранжевый, синий, зелёный, красный, фиолетовый.
  • Или свой цвет: HEX (например #63a611) либо палитра.
  • Слишком светлые оттенки система не примет — белый текст на них не читается.
  • Предпросмотр обновляется сразу; на сайте цвет появится после Сохранить.

Код для сайта

Во вкладке Виджет блок «Код для сайта». Два формата:

Код для сайта: HTML-блок виджета
HTML для вставки на сайт или ссылка для быстрой проверки.
  • HTML — контейнер и скрипт с вашими параметрами. Вставьте в разметку страницы каталога (куда обычно кладут блоки контента).
  • Ссылка — прямое превью на хосте виджета SEDNOX. Удобно проверить список и карту до публикации у себя.

В коде есть параметры владельца и подпись sig. Не собирайте код вручную и не подставляйте чужой UUID — используйте только то, что скопировали из кабинета.

Порядок важен

Сначала домен + «Активировать виджет» + сохранение, потом копирование кода. Иначе на сайте каталог может не открыться.

Как встроить на сайт

Скопируйте HTML из кабинета и вставьте на страницу каталога. Ниже — типовые варианты под CMS. Везде один принцип: страница открывается с того же домена, что указан в Настройках.

Обычный сайт Любая вёрстка без CMS
  1. Создайте или откройте страницу каталога, например /catalog/.
  2. В месте, где должен быть каталог, вставьте скопированный HTML (блок <div> и тег <script>).
  3. Убедитесь, что страница отдаётся по HTTPS с того же хоста, что сохранён в кабинете (без лишнего www, если его нет в настройках).
  4. Опубликуйте страницу и проверьте в браузере.

Не разрезайте код и не убирайте атрибуты data-owner и data-sig. Скрипт можно оставить с defer, как в кабинете.

1С‑Битрикс Страница или включаемая область
  1. В кабинете SEDNOX укажите адрес сайта Битрикс (например https://company.ru) и включите виджет.
  2. Скопируйте HTML-код во вкладке «Виджет».
  3. В админке Битрикс создайте страницу каталога (Контент → Структура сайта / Страницы) либо откройте нужный раздел.
  4. Вставьте код одним из способов:
    • в режим HTML / исходный код визуального редактора (не в режим «текст», иначе теги могут обрезаться);
    • или в включаемую область / HTML-блок на странице;
    • для шаблона — в нужный файл шаблона или компонент, который выводит контент раздела.
  5. Сохраните страницу и откройте её с публичной части по HTTPS.
Редактор Битрикс

Если после сохранения пропал <script>, вставьте код через включаемую область с типом HTML или через правку файла шаблона. Визуальный редактор иногда вычищает скрипты.

WordPress Страница или блок Custom HTML
  1. В кабинете SEDNOX укажите адрес сайта WordPress (например https://company.ru) и включите виджет.
  2. Скопируйте HTML-код во вкладке «Виджет».
  3. В админке WP: Страницы → Добавить / изменить страницу каталога.
  4. Вставьте код:
    • редактор блоков (Gutenberg) — блок Custom HTML / «Произвольный HTML»;
    • классический редактор — вкладка Текст (не «Визуально»);
    • конструкторы (Elementor и т.п.) — виджет HTML / Custom Code, куда разрешены скрипты.
  5. Опубликуйте страницу и проверьте на сайте по HTTPS.
Плагины безопасности

Некоторые плагины режут внешние скрипты. Если виджет не грузится, разрешите скрипт с хоста виджета SEDNOX или временно проверьте без такого плагина. Домен в настройках SEDNOX должен совпадать с адресом сайта в браузере.

Отдельный код под город

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

Редактирование кода региона: локация и карта
Мастер: локация → карта → отдельный HTML и ссылка.
  1. Во вкладке Виджет нажмите Добавить код региона.
  2. Шаг Локация — найдите федеральный округ, область или город.
  3. Шаг Карта — подстройте область просмотра или найдите адрес. При сохранении берётся текущая область карты.
  4. Сохраните — появится свой HTML и ссылка для этого региона.

Базовый код без региона показывает весь ваш каталог. На страницу «Москва» вставьте московский код, на страницу филиала — код этого города. Региональных кодов можно создать до 20.

Правка и удаление

У каждого кода региона есть действия Редактировать и Удалить. После смены локации или карты заново скопируйте HTML на сайт.

Тарифы

Во вкладке Тарифы выберите модель работы с клиентами из виджета. От этого зависит абонентская плата.

Прямые сделки

Клиенты связываются с вами напрямую, без оформления сделок на SEDNOX. За виджет берётся ежемесячная плата по числу конструкций в каталоге (раздел «Мои объекты»). Пока конструкций 0 — плата не начисляется.

  • до 25 конструкций — 990 ₽/мес
  • 26–100 — 2 490 ₽/мес
  • 101–250 — 4 990 ₽/мес
  • 251–699 — 6 490 ₽/мес
  • 700–1999 — 7 500 ₽/мес
  • 2000 и больше — 12 500 ₽/мес

Платформа

Заявки и бронирования из виджета идут через SEDNOX. Использование виджета на сайте в этом режиме бесплатное: комиссия учитывается в сделках, а не как абонентская плата за виджет.

Выбор можно сменить

Переключите карточку тарифа и нажмите Сохранить. Актуальная сумма для «Прямых сделок» считается по текущему числу объектов.

Если на сайте пусто

Частые причины, почему код есть, а каталога нет:

  • Виджет не активирован или не сохранены настройки.
  • Страница открыта с другого домена (www / без www, тестовый стенд, другой поддомен).
  • Сайт отдаётся по HTTP, а в кабинете указан только HTTPS-хост.
  • Вставлен старый или чужой код — скопируйте HTML заново после сохранения настроек.
  • В каталоге нет опубликованных конструкций.
  • Скрипт стоит не на той странице или обрезан CMS при сохранении HTML.

Сначала откройте превью по ссылке из кабинета. Если там каталог есть, а на сайте нет — почти наверняка дело в домене или вставке кода.

См. также