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

Раздел для пользователей, которые устанавливают виджет Senler AI на свой сайт и хотят, чтобы в чате был понятен текущий экран, открытая бизнес-сущность и выбранный пользователем элемент. Это помогает объяснить кнопку, поле, форму, настройку или другой важный блок и при необходимости показать его на странице.

Здесь описана связка из четырех частей: Public API виджета, теги контекста, разметка сайта и Markdown-документация. Пользователь видит обычный чат с понятными тегами страницы или выбранного элемента, а ответ можно связать с нужной статьей и конкретным элементом на текущей странице.

Основные задачи

• Public API виджета - как инициализировать виджет, обновлять контекст страницы, передавать одноразовый контекст сообщения и объявлять customActions.
• Разметка элементов сайта - какие data-ai-* атрибуты добавлять на кнопки, поля и блоки.
• Как AI показывает элементы на сайте - как работает подсветка, прокрутка, клик и ввод.
• Связь Markdown-документации с элементами сайта - как писать инструкции так, чтобы фраза в тексте была связана с точным context_id.
• Как ассистент опирается на документацию - как статьи, поиск и контекстные ключи помогают отвечать и подсказывать шаги.

Принцип

Описывайте интерфейс прямо в человеческой инструкции: "нажмите кнопку добавления канала". Пользователь увидит понятный текст, а AI сможет использовать точный ключ для подсветки элемента.

Простая карта процесса

1. Сайт инициализирует виджет один раз и передает постоянный контекст страницы через contextProvider.
2. При SPA-переходах сайт вызывает SenlerWidget.setPageContext(items), не пересоздавая виджет.
3. Если действие открывает виджет для конкретной сущности или рекомендации, сайт передает одноразовый contextItems и при необходимости message.
4. На сайте или в кабинете важный элемент получает стабильный data-ai-context-id.
5. В статье тот же ключ ставится на человеческую фразу через span data-ai-context-id.
6. Пользователь задает вопрос или выбирает элемент через виджет.
7. Сообщение уходит вместе с тегами контекста страницы или выбранного элемента.
8. По совпадению ключа находится статья, а если элемент есть на текущей странице, виджет может показать его или выполнить разрешенное действие.
9. Виджет показывает результат: готово, не найдено, заблокировано или ошибка.

Кому что читать

• Владельцу сайта: Public API виджета, контекст страницы, custom actions и разметка элементов.
• Редактору документации: связь Markdown-документации с элементами сайта.
• Разработчику интерфейса сайта: правила data-ai-*, стабильные ключи и проверка покрытия.
• Настройщику агента: как документация помогает подсказывать шаги и когда выбирать контекстный ключ элемента.

Правило сопровождения

Когда в интерфейсе появляется новая важная кнопка, поле, меню или карточка, обновляются сразу три вещи: разметка элемента, статья с inline data-ai-context-id и проверка аудитом. Так документация остается полезной для человека, а AI продолжает точно находить элементы.