Чат-виджет на сайт в Bolt.new: установка Моночата за 2 минуты

Bolt.new собирает проекты прямо в браузере, обычно на Vite + React, иногда на Next.js или Astro. Онлайн-чат Моночата ставится одной строкой кода, и Bolt-агент вставит её по промпту. Это не встроенная интеграция Bolt, а стандартная вставка скрипта виджета. Ответы операторов и ИИ-сотрудника идут из одного окна вместе с Telegram, VK, MAX и почтой. Тариф «Старт» — 0 ₽.

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

  1. Войдите на monochat.ru/login и откройте «Каналы» → «Виджет».
  2. Укажите домен, на котором будет жить сайт (адрес после публикации или свой домен), и скопируйте ключ виджета.
  3. В Bolt откройте проект и вставьте промпт ниже, заменив ВАШ_WIDGET_KEY.
  4. Опубликуйте проект и откройте сайт: кнопка чата появится справа внизу.
  5. Отправьте тестовое сообщение и ответьте на него из Моночата.

Промпт для Bolt

Подключи к проекту онлайн-чат поддержки Моночат (monochat.ru), одной строкой, на всех страницах.
- Vite/React/Vue: в index.html перед </body>.
- Next.js: компонент Script из next/script в app/layout.tsx, strategy="afterInteractive".
- Astro: в общий layout перед </body>.
Строка: <script src="https://monochat.ru/widget/ВАШ_WIDGET_KEY.js" async></script>
Ключ публичный. Не добавляй скрипт дважды, не меняй остальной код.
Кнопки «Связаться» пусть открывают чат через window.Monochat?.open().
Документация: https://monochat.ru/docs/bolt.md

Код

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

Для Next.js — пример на странице Next.js.

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

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

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

Это официальная интеграция с Bolt?

Нет. Bolt-агент просто вставляет в код скрипт виджета по промпту. Ничего устанавливать в Bolt не нужно.

Нужен ли бэкенд или база данных?

Нет. Виджет — один асинхронный скрипт. Переписка хранится в Моночате на серверах в России, ваш проект ничего не хранит.

Можно ли сделать свою кнопку вместо стандартной?

Да. Вызовите window.Monochat?.open() из любой кнопки, а стандартную кнопку можно скрыть через Monochat.hide(). Подробнее — в JavaScript API.

Агент может сам получить ключ виджета?

Если агент умеет отправлять HTTP-запросы, он может зарегистрировать проект через Agent API, а вы подтвердите email. В Bolt обычно проще взять ключ в кабинете и вставить в промпт.

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

«Старт» — 0 ₽: все каналы, без лимита операторов. ИИ-автоответы и работа без подписи — на платных тарифах, см. тарифы.

Ещё по теме

Попробуйте Моночат бесплатно

Тариф «Старт» — 0 ₽: чат на сайте, Telegram, VK, MAX и почта в одном окне. Без карты.