Виджет поиска по сайту

Виджет открывается поверх страницы: строка поиска, результаты на лету, ответ ИИ карточкой над выдачей, карточки врачей, услуг и филиалов. Весит около 15 КБ (gzip), работает в Shadow DOM и не конфликтует со стилями сайта. Открывается по ⌘K / Ctrl K, по / и по клику на кнопки с атрибутом data-sb-site-search.

Если на сайте уже стоит код SearchBooster проекта, ничего вставлять не нужно: после включения поиска по сайту код сам подгрузит виджет. Остаётся добавить кнопку поиска.

<script src="https://cdn.searchbooster.io/scripts/widget/<uuid>/main.js" defer></script>

Отдельный тег

Для сайтов без кода SearchBooster:

<script
  src="https://api.searchbooster.net/site-search/widget/sb-site-search.js"
  data-site="<uuid>"
  defer
></script>

<uuid> — идентификатор проекта из личного кабинета.

Кнопки

Любой элемент с data-sb-site-search открывает поиск. С data-sb-ask — сразу задаёт вопрос ИИ.

<button type="button" data-sb-site-search>Найти или спросить <kbd>⌘K</kbd></button>

<a href="#" data-sb-site-search data-sb-ask="Как подготовиться к МРТ?">Как подготовиться к МРТ?</a>

Поле <input data-sb-site-search> при клике открывает поиск с уже введённым текстом.

Поле поиска и кнопки сайта без правки кода

В кабинете, Поиск по сайту → Виджет и ассистент → Как открывать поиск, можно указать CSS-селекторы:

Поле поиска на сайте — поиск открывается по фокусу в этом поле. Если на сайте стоит виджет товарного поиска, его селектор подставляется кнопкой «Взять из товарного виджета». Режим «Только предпросмотр» включает поле только во вкладке, открытой со ссылкой ?sb_search30=1 (запоминается до закрытия вкладки, ?sb_search30=0 сбрасывает), — так поле проверяют на живом сайте, не затрагивая посетителей. Режим «Для всех посетителей» включает его всем.
Кнопка или элемент на сайте — поиск открывается по клику, например на иконку лупы.

Когда поиск по сайту забирает поле, товарный виджет на нём больше не открывается: его выдача доступна по кнопке «Показать все товары».

Товары

Переключатель Поиск по сайту → Виджет и ассистент → Товары добавляет в окно поиска товары из товарного поиска того же проекта: до 8 карточек с ценой и уточнения запроса. На товарных запросах товары идут выше страниц, на вопросах — ниже.

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

Атрибуты тега

Атрибут	Что делает
`data-site`	uuid проекта. Обязателен для отдельного тега.
`data-scope`	Область из настроек, например `docs`. Без него область выбирается по хосту страницы, иначе поиск идёт по всему сайту.
`data-theme`	`light` (по умолчанию), `dark` или `auto` — по настройке системы.
`data-accent`	Цвет акцента `#RRGGBB`; по умолчанию — из настроек в кабинете.
`data-launcher`	`true` — плавающая кнопка «Спросить» в углу экрана.

Подсказка в строке поиска, частые вопросы, быстрые ссылки и тексты ассистента задаются в кабинете, Поиск по сайту → Виджет и ассистент, и применяются без правки кода.

JS API

После загрузки виджет создаёт window.SBSiteSearch и отправляет событие sb-site-search:ready.

window.addEventListener('sb-site-search:ready', () => {
  document.querySelector('#help-search').addEventListener('submit', (e) => {
    e.preventDefault();
    window.SBSiteSearch.open(e.target.q.value);
  });
});

Метод	Что делает
`SBSiteSearch.open(query?)`	Открыть поиск, при необходимости с запросом.
`SBSiteSearch.ask(question)`	Открыть и сразу задать вопрос ИИ.
`SBSiteSearch.close()`	Закрыть.
`SBSiteSearch.toggle()`	Открыть или закрыть.

Свой интерфейс

Поиск и ответы можно встроить в свою страницу через API поиска по сайту — те же запросы, что делает виджет.