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

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

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

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

## Промпт для Lovable

```text
Подключи к проекту онлайн-чат поддержки Моночат (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 с готовым промптом](https://lovable.dev/#prompt=%D0%A1%D0%B4%D0%B5%D0%BB%D0%B0%D0%B9%20%D0%BB%D0%B5%D0%BD%D0%B4%D0%B8%D0%BD%D0%B3%20%D0%B4%D0%BB%D1%8F%20%D0%BC%D0%BE%D0%B5%D0%B3%D0%BE%20%D0%B1%D0%B8%D0%B7%D0%BD%D0%B5%D1%81%D0%B0%3A%20%3C%D0%BE%D0%BF%D0%B8%D1%88%D0%B8%2C%20%D1%87%D0%B5%D0%BC%20%D0%B7%D0%B0%D0%BD%D0%B8%D0%BC%D0%B0%D0%B5%D1%88%D1%8C%D1%81%D1%8F%3E.%0A%D0%9F%D0%BE%D0%B4%D0%BA%D0%BB%D1%8E%D1%87%D0%B8%20%D0%BA%20%D0%BD%D0%B5%D0%BC%D1%83%20%D0%BE%D0%BD%D0%BB%D0%B0%D0%B9%D0%BD-%D1%87%D0%B0%D1%82%20%D0%BF%D0%BE%D0%B4%D0%B4%D0%B5%D1%80%D0%B6%D0%BA%D0%B8%20%D0%9C%D0%BE%D0%BD%D0%BE%D1%87%D0%B0%D1%82%20%28monochat.ru%29%3A%20%D0%B2%20index.html%20%D0%BF%D0%B5%D1%80%D0%B5%D0%B4%20%3C%2Fbody%3E%20%D0%B2%D1%81%D1%82%D0%B0%D0%B2%D1%8C%20%D0%BE%D0%B4%D0%BD%D1%83%20%D1%81%D1%82%D1%80%D0%BE%D0%BA%D1%83%0A%3Cscript%20src%3D%22https%3A%2F%2Fmonochat.ru%2Fwidget%2F%D0%92%D0%90%D0%A8_WIDGET_KEY.js%22%20async%3E%3C%2Fscript%3E%0A%D0%9A%D0%BB%D1%8E%D1%87%20%D0%B2%D0%B8%D0%B4%D0%B6%D0%B5%D1%82%D0%B0%20%D1%81%D0%BF%D1%80%D0%BE%D1%81%D0%B8%20%D1%83%20%D0%BC%D0%B5%D0%BD%D1%8F%20%28%D0%B5%D0%B3%D0%BE%20%D0%B2%D1%8B%D0%B4%D0%B0%D1%8E%D1%82%20%D0%B1%D0%B5%D1%81%D0%BF%D0%BB%D0%B0%D1%82%D0%BD%D0%BE%3A%20monochat.ru%2Flogin%20%E2%86%92%20%C2%AB%D0%9A%D0%B0%D0%BD%D0%B0%D0%BB%D1%8B%C2%BB%20%E2%86%92%20%C2%AB%D0%92%D0%B8%D0%B4%D0%B6%D0%B5%D1%82%C2%BB%29.%0A%D0%98%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%86%D0%B8%D1%8F%3A%20https%3A%2F%2Fmonochat.ru%2Fdocs%2Flovable.md). Lovable откроет промпт в поле ввода и ничего не отправит сам: допишите, о каком бизнесе сайт, и нажмите отправку. Для уже существующего проекта просто скопируйте промпт выше в его чат.

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

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

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

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

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

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

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

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

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

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

У Моночата есть [Agent API](https://monochat.ru/docs/agent-api) для регистрации из агента. Но агент в браузерном редакторе обычно не выполняет HTTP-запросы с вашим email. Надёжнее за минуту получить ключ в кабинете и вставить его в промпт.

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

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

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

Тариф «Старт» — 0 ₽ без лимита операторов и диалогов, с подписью «Создано в Моночат». Тарифы с ИИ-автоответами и без подписи — на странице [тарифов](https://monochat.ru/pricing).

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

Проверьте три вещи: строка стоит в `index.html` один раз, ключ без опечаток, текущий домен есть в настройках виджета. Как выглядит рабочий виджет, можно посмотреть на [демо](https://monochat.ru/demo).

## Ещё по теме

- [Универсальный промпт для ИИ-агентов](https://monochat.ru/docs/ai-prompt)
- [React (Vite)](https://monochat.ru/docs/react) и [JavaScript API виджета](https://monochat.ru/docs/javascript-api)
- [MCP-сервер Моночата](https://monochat.ru/docs/mcp)
- [Демо виджета без регистрации](https://monochat.ru/demo)