НикаАйТэкНет · Ника
Войти Связаться
Документация Виджет

Виджет на сайт

Плавающий чат с Никой на любой странице сайта. Подключается одним тегом <script>, без дополнительных файлов. Дальше все настройки — через data-* атрибуты.

1. Минимальный сниппет

Вставьте этот код перед закрывающим тегом </body> у себя на сайте — и виджет появится: 

<script src="http://neurobooking.online/static/provided_bots_app/js/widget.js"
        data-hotel-id="ВАШ_ID_БОТА"
        data-greeting="Здравствуйте. Я нейроконсультант Ника. Как могу вам помочь?">
</script>
Где взять data-hotel-id?

Идентификатор бота вам выдаём мы при подключении. Если у вас его нет — напишите менеджеру, и мы пришлём готовый сниппет с подставленным id.

2. Настройка внешнего вида

Все параметры передаются как data-* атрибуты тега <script>. Любой можно опустить — тогда применится дефолт.

Атрибут По умолчанию Что делает
data-hotel-id — Обязательно. Идентификатор вашего бота, мы его выдаём.
data-greeting Здравствуйте. Я нейроконсультант… Первое сообщение, которое бот покажет при открытии чата.
data-position right С какой стороны кнопка-аватар: right или left.
data-size-desktop 60 Диаметр круглой кнопки на десктопе, в пикселях.
data-size-mobile 50 Диаметр кнопки на мобильных устройствах, в пикселях.
data-x-offset-desktop 20 Отступ от правого / левого края экрана на десктопе, в пикселях.
data-y-offset-desktop 20 Отступ от нижнего края экрана на десктопе, в пикселях.
data-x-offset-mobile 20 То же, но для мобильных устройств (горизонтальный отступ).
data-y-offset-mobile 20 То же, но для мобильных устройств (нижний отступ).
data-z-index 2147483647 Слой по Z. Меняйте, только если виджет конфликтует с другими всплывающими элементами вашего сайта.

Пример с полным набором параметров

<script src="http://neurobooking.online/static/provided_bots_app/js/widget.js"
        data-hotel-id="ВАШ_ID_БОТА"
        data-greeting="Здравствуйте! Чем могу помочь?"
        data-position="right"
        data-size-desktop="64"
        data-size-mobile="54"
        data-x-offset-desktop="24"
        data-y-offset-desktop="24"
        data-x-offset-mobile="16"
        data-y-offset-mobile="16">
</script>

3. Как и куда вставить

  1. Откройте редактор шаблона сайта (HTML-файл или админка CMS).
  2. Найдите закрывающий тег </body> — он внизу страницы.
  3. Перед ним вставьте сниппет из шага 1, заменив ВАШ_ID_БОТА на идентификатор, который вам выдали.
  4. Сохраните и обновите страницу — внизу должна появиться круглая кнопка с аватаркой Ники.
Если используете WordPress, Tilda или Bitrix:

В каждом конструкторе есть отдельное поле для вставки кода в <body> или «перед закрывающим body». Найдите его в настройках сайта и вставьте туда наш сниппет — этого достаточно.

Возможные проблемы

Виджет не появляется на сайте

1. Откройте консоль браузера (F12) и проверьте, нет ли красных ошибок. Если стоит Widget Error: Не указан data-hotel-id — значит забыли подставить ваш id.

2. Убедитесь, что сниппет реально попал в HTML страницы — например, через «Просмотр кода страницы» в браузере. Если CMS обернула &lt;script&gt; в код-блок, виджет не запустится.

3. Иногда антибаннер-расширения блокируют сторонние скрипты — попробуйте в режиме инкогнито.

Виджет перекрывает важные элементы сайта

Двигайте кнопку отступами: data-x-offset-desktop и data-y-offset-desktop (для десктопа), data-x-offset-mobile и data-y-offset-mobile (для мобильных).

Или перенесите её на другую сторону через data-position="left".

Кнопка слишком большая или маленькая

Измените data-size-desktop (десктоп) и data-size-mobile (мобильные) — значение в пикселях. Рекомендуем 50–80 для десктопа и 44–56 для мобильных.

Хочу другой текст приветствия

Подставьте свой текст в data-greeting. Он покажется в чате сразу при открытии. Поддерживаются эмодзи и любые символы — но кавычки внутри значения экранируйте как &quot;.

Виджет перекрывается другим элементом (cookie-баннер и т.п.)

Это конфликт по z-index. Наш виджет по умолчанию использует максимальный 2147483647 — обычно этого достаточно. Если другой элемент тоже имеет максимум, попробуйте уменьшить data-z-index до меньшего значения (например, 9999) и подправить z-index мешающего элемента у себя.

Где взять data-hotel-id?

Идентификатор бота выдаём мы — он назначается при подключении. Если у вас его нет — напишите менеджеру: info@neurobooking.online.

CSP / Content-Security-Policy блокирует виджет

Если на сайте настроен Content-Security-Policy (часто в корпоративных проектах и в Битриксе), браузер может заблокировать наш скрипт, iframe или соединение. В консоли видно ошибку вида «Refused to load… because it violates Content Security Policy».

Просто разрешите всё с нашего домена — одной строкой:

Content-Security-Policy: default-src 'self' http://neurobooking.online wss://neurobooking.online; style-src 'self' 'unsafe-inline';

default-src — fallback для всех директив сразу (script / frame / connect / img). Указали наш домен здесь — и скрипт, и iframe, и WebSocket-соединение разрешатся одним правилом. wss:// нужен отдельно, потому что это другая схема.

Если у вас уже настроен CSP — не заменяйте свой, а просто добавьте наш домен через пробел к существующему default-src (или script-src + frame-src + connect-src, если они заданы отдельно).

А что насчёт CORS?

CORS отдельно настраивать не нужно — все запросы и WebSocket идут внутри нашего iframe, а не от верхней страницы вашего сайта. Браузер CORS-проверки для iframe и его подзапросов не применяет.

Если что-то всё-таки блокируется и в консоли видно Access-Control-Allow-Origin — это, скорее всего, CSP (см. пункт выше), а не CORS. Пришлите нам скриншот ошибки — подскажем точно.

Нужна помощь с установкой?

Напишите нам — поможем настроить, проверим, что виджет работает на вашем сайте: info@neurobooking.online