Как добавить онлайн-чат в Lovable: виджет Моночата и промпт для агента

Q: Чат не появился. Что проверить?

Проверьте три вещи: строка стоит в index.html один раз, ключ без опечаток, текущий домен есть в настройках виджета. Как выглядит рабочий виджет, можно посмотреть на демо.

Сайт или приложение, собранные в Lovable, — это обычный проект на React + Vite. Чат поддержки Моночата добавляется одной строкой в index.html: Lovable-агент сам вставит её по промпту ниже. Это не плагин и не встроенная интеграция Lovable, а обычная вставка виджета. Сообщения с сайта приходят в Моночат вместе с Telegram, VK, MAX и почтой, а ИИ-сотрудник может отвечать по вашей базе знаний. Тариф «Старт» — 0 ₽.

Как установить

Зарегистрируйтесь на monochat.ru/login (вход через Google или Яндекс) и откройте «Каналы» → «Виджет».
В поле «Домены сайтов» укажите адрес опубликованного проекта (например, my-app.lovable.app) или свой домен. Скопируйте ключ виджета из кода установки.
Откройте проект в Lovable и вставьте в чат промпт ниже, заменив ВАШ_WIDGET_KEY на свой ключ.
Проверьте изменения и нажмите Publish. Откройте опубликованный сайт: справа внизу появится кнопка чата.
Напишите тестовое сообщение — оно придёт во «Входящие» Моночата.

Промпт для Lovable

Подключи к проекту онлайн-чат поддержки Моночат (monochat.ru).
1. В index.html в корне проекта вставь перед </body> одну строку:
   <script src="https://monochat.ru/widget/ВАШ_WIDGET_KEY.js" async></script>
   Ключ виджета публичный, его можно держать в коде. Не добавляй скрипт второй раз и не оборачивай его в iframe или React-компонент.
2. Если на сайте есть кнопка «Связаться» или «Написать нам», пусть она открывает чат: window.Monochat?.open()
3. Больше ничего не меняй. Документация: https://monochat.ru/docs/lovable.md

Новый проект можно начать сразу с чатом: Открыть в Lovable с готовым промптом. Lovable откроет промпт в поле ввода и ничего не отправит сам: допишите, о каком бизнесе сайт, и нажмите отправку. Для уже существующего проекта просто скопируйте промпт выше в его чат.

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

<!-- index.html, перед </body> -->
<script src="https://monochat.ru/widget/ВАШ_WIDGET_KEY.js" async></script>

Кнопка на странице (React):

<button onClick={() => (window as any).Monochat?.open()}>Написать в поддержку</button>

Превью и домены

Виджет загружается только на доменах из настроек виджета (плюс localhost). Если чат есть на опубликованном сайте, но не виден в превью редактора, добавьте адрес превью в «Домены сайтов». Его видно в адресной строке, если открыть превью в новой вкладке. Подключили свой домен — добавьте и его.

Частые вопросы

Есть ли у Моночата официальная интеграция с Lovable?

Нет. Это обычный скрипт виджета, который Lovable-агент вставляет в код по промпту. Так же он работает на любом сайте.

Lovable-агент может сам зарегистрировать меня в Моночате?

У Моночата есть Agent API для регистрации из агента. Но агент в браузерном редакторе обычно не выполняет HTTP-запросы с вашим email. Надёжнее за минуту получить ключ в кабинете и вставить его в промпт.

Нужен ли Supabase или бэкенд?

Нет. Виджет работает в браузере посетителя, а сообщения хранятся на серверах Моночата в России. Ничего в базе вашего проекта не создаётся.

Сколько это стоит?

Тариф «Старт» — 0 ₽ без лимита операторов и диалогов, с подписью «Создано в Моночат». Тарифы с ИИ-автоответами и без подписи — на странице тарифов.

Чат не появился. Что проверить?

Проверьте три вещи: строка стоит в index.html один раз, ключ без опечаток, текущий домен есть в настройках виджета. Как выглядит рабочий виджет, можно посмотреть на демо.