Легенда документа

Обозначение	Что означает
💡 Совет	Полезная подсказка или важный нюанс
⚠️ Важно	Критичный шаг, ошибка здесь = всё не заработает
✅ Готово	Этап успешно завершён

 

1. Введение

В этом гайде вы узнаете, как встроить уже готового чат-бота прямо в HTML-сайт, чтобы посетители могли общаться с ним прямо на странице, а не через отдельный интерфейс Нейро42.

Что вы найдёте в этой инструкции:

• Как настроить ноду When Chat Message Received (Чат Триггер) для встраивания на внешний сайт
• Как создать HTML-сайт с помощью нейросети (на примере Claude)
• Как найти и правильно вставить скрипт чат-виджета в код страницы
• Как открыть HTML-файл в VS Code и сохранить с нужным расширением
• Как запустить сайт в браузере и убедиться, что чат работает
• Как кастомизировать виджет под стиль вашего сайта с помощью нейросети

💡 Совет:  Этот гайд рассчитан на людей без опыта программирования. Все действия с кодом выполняет нейросеть — вы только копируете и вставляете.

 

2. Что понадобится

Что нужно	Зачем / Где получить
Аккаунт на Нейро42	Платформа для запуска воркфлоу с чат-ботом
Любой AI-сервис (Claude, ChatGPT и др.)	Для генерации HTML-кода сайта
Visual Studio Code	Редактор кода. Скачать на code.visualstudio.com
Готовый воркфлоу с AI Agent	Ваш чат-бот из предыдущих гайдов курса

 

3. Основные шаги

Часть 1: Настройка ноды «Когда получено сообщение в чате»

Шаг 1. Откройте ноду When Chat Message Received

В вашем воркфлоу на Нейро42 найдите ноду «When chat message received» (Чат Триггер) — она всегда стоит самой первой в цепочке.

• Нажмите на неё двойным кликом, чтобы открыть панель настроек

Шаг 2. Включите переключатель «Make Chat Publicly Available»

По умолчанию переключатель выключен. Его нужно активировать, чтобы чат-бот стал доступен снаружи платформы.

• Найдите строку Make Chat Publicly Available
• Нажмите на переключатель — он должен стать зелёным
• После этого появится URL чата и поле Mode

⚠️ Важно:  Без включения этого переключателя чат-бот работает только внутри Нейро42 и не будет доступен на вашем сайте.

Шаг 3. Выберите режим Embedded Chat

В поле Mode нажмите на выпадающий список — вы увидите два варианта.

• Hosted Chat — чат открывается на странице, которую обслуживает сам n8n
• Embedded Chat — виджет встраивается на любую стороннюю страницу через код
• Выберите Embedded Chat

💡 Совет:  После выбора Embedded Chat вы увидите подсказку с ссылкой «Follow the instructions here» — она ведёт на документацию по встраиванию. Мы перейдём по ней чуть позже.

✅  Часть 1 завершена. Нода настроена на режим встраивания.

 

Часть 2: Создание сайта с помощью нейросети

Шаг 4. Создайте HTML-сайт через любую нейросеть

Перейдите в любую нейросеть (Claude, ChatGPT и т.д.). В этом примере используется Claude.

• Напишите запрос, например: «Сделай мне простой сайт по продаже велосипедов»
• Отправьте запрос и дождитесь результата

Шаг 5. Скопируйте HTML-код сгенерированного сайта

Нейросеть создаст готовый сайт с HTML-кодом. Вам нужно получить этот код.

• Нажмите кнопку «Скачать» (Download) рядом с превью сайта — у вас сохранится .html файл
• Либо нажмите «Просмотр кода» и вручную выделите и скопируйте весь код (Ctrl+A, затем Ctrl+C)

💡 Совет:  Оба способа одинаково хороши. Скачивание удобнее — файл сразу готов к открытию в VS Code.

✅  Часть 2 завершена. HTML-код сайта получен.

 

Часть 3: Изучение документации по встраиванию

Шаг 6. Откройте инструкцию по встраиванию виджета

Вернитесь в Нейро42, в ноду When Chat Message Received. В блоке подсказки вы увидите ссылку «Follow the instructions here» — нажмите на неё.

• Вы попадёте на страницу пакета @n8n/chat на сайте npm
• Пролистайте вниз до раздела «Installation»
• Найдите подраздел «a. CDN Embed»

В разделе CDN Embed вы увидите код для встраивания — небольшой скрипт с тегами <link>, <script> и функцией createChat. Именно этот код нужно будет вставить в ваш сайт.

⚠️ Важно:  В строке webhookUrl: ‘YOUR_PRODUCTION_WEBHOOK_URL’ нужно заменить YOUR_PRODUCTION_WEBHOOK_URL на ваш реальный URL из поля «URL чата» в ноде. Не перепутайте с Hosted Chat URL.

✅  Часть 3 завершена. Вы знаете, где взять скрипт для встраивания.

 

Часть 4: Встраивание чат-бота в код сайта (VS Code)

Шаг 7. Установите Visual Studio Code (если ещё не установлен)

VS Code — бесплатный редактор кода. Он нужен, чтобы удобно просматривать и редактировать HTML-файл.

• Перейдите на сайт code.visualstudio.com
• Нажмите «Download for macOS» (или Windows / Linux — в зависимости от вашей системы)
• Установите программу в обычном режиме

💡 Совет:  VS Code — полезный инструмент для всех, кто работает с кодом и автоматизацией, не только для программистов. Он бесплатный и работает на всех платформах.

Шаг 8. Откройте HTML-файл сайта в VS Code

Откройте VS Code и загрузите в него код вашего сайта.

• Если вы скачали файл — перетащите его в окно VS Code или откройте через Файл → Открыть файл
• Если вы скопировали код — создайте новый файл в VS Code (Файл → Новый файл) и вставьте код (Ctrl+V)
• Убедитесь, что видите весь HTML-код сайта

Шаг 9. Вставьте скрипт чат-виджета перед закрывающим тегом </body>

Теперь нужно добавить скрипт встраивания в самый конец страницы — прямо перед тегом </body>.

• Нажмите Ctrl+End (или Cmd+End на Mac), чтобы перейти в конец файла
• Найдите строку с </body> — это будет практически последняя строка кода
• Поставьте курсор перед </body> и нажмите Enter
• Вставьте скрипт из документации (CDN Embed)
• Замените YOUR_PRODUCTION_WEBHOOK_URL на ваш URL из поля «URL чата» в ноде Нейро42

⚠️ Важно:  Скрипт ОБЯЗАТЕЛЬНО должен быть внутри тега <body>, то есть до </body>. Если вставить его после — виджет не появится.

Шаг 10. Сохраните файл с расширением .html

Теперь нужно сохранить файл. Очень важно, что расширение файла было именно .html.

• Нажмите Ctrl+Shift+S (или Cmd+Shift+S на Mac) — откроется диалог «Сохранить как»
• Введите имя файла, например: index.html
• Убедитесь, что в конце стоит именно .html, а не .txt или другое
• Нажмите «Сохранить»

✅  Часть 4 завершена. Файл сохранён с встроенным чат-ботом.

 

Часть 5: Проверка результата в браузере

Шаг 11. Откройте файл в браузере и проверьте чат

Откройте папку, в которую сохранили файл, и запустите его.

• Найдите файл index.html в папке
• Дважды кликните на файл — он откроется в вашем браузере по умолчанию
• В правом нижнем углу страницы должен появиться небольшой кружок-иконка чата
• Нажмите на него — откроется окно чат-виджета
• Напишите любое сообщение и убедитесь, что чат-бот отвечает

💡 Совет:  Если ответа нет — убедитесь, что воркфлоу в Нейро42 опубликован (кнопка «Опубликовать» в правом верхнем углу).

✅  Часть 5 завершена. Чат-бот работает на сайте!

 

Часть 6: Кастомизация виджета под стиль сайта

Шаг 12. Отправьте код в нейросеть для стилизации

Стандартный виджет выглядит нейтрально. Чтобы он соответствовал дизайну вашего сайта, попросите нейросеть его настроить.

• Скопируйте полный код вашего HTML-файла (Ctrl+A → Ctrl+C в VS Code)
• Перейдите в нейросеть (Claude, ChatGPT и др.)
• Вставьте код и напишите примерно следующее:

«Я добавил сюда агента, сделай его под стиль сайта, убери всё лишнее. Как правильно его кастомизировать, написано тут: [ссылка на документацию @n8n/chat на npm]»

💡 Совет:  Чем подробнее вы опишете желаемый стиль (цвета, тон общения, название бота), тем точнее получится результат.

Шаг 13. Сохраните обновлённый файл и откройте в браузере

Нейросеть вернёт кастомизированный код с адаптированными цветами, текстами и стилем виджета под ваш сайт.

• Скачайте обновлённый файл или скопируйте код
• Сохраните как index.html (можно перезаписать старый файл)
• Откройте двойным кликом в браузере
• Убедитесь, что виджет отображается в новом стиле и переписка работает

✅  Часть 6 завершена. Виджет стилизован под ваш сайт!

 

🎉  Поздравляем! Чат-бот встроен на сайт и готов к работе!

Вы научились встраивать чат-бота Нейро42 на любой HTML-сайт: настраивать триггер, вставлять виджетный скрипт и кастомизировать его внешний вид с помощью нейросети. Теперь ваш чат-бот доступен не только внутри платформы, но и прямо на вашем сайте.

 

4. Что делать, если не работает

Проблема	Решение
Чат-виджет не появляется на сайте	Проверьте, что скрипт вставлен внутрь тега </body>, а не снаружи
Виджет есть, но сообщения не отправляются	Убедитесь, что webhookUrl точно скопирован из ноды Without Chat Server (не Hosted Chat URL)
Воркфлоу не активирован	Нажмите кнопку «Опубликовать» в правом верхнем углу Нейро42
Файл открывается, но чат серый / пустой	Убедитесь, что файл сохранён с расширением .html (не .html.txt)

 

5. Что делать дальше

Теперь, когда вы умеете встраивать чат-бота на сайт, можно развивать его дальше:

• Разместите сайт на хостинге (GitHub Pages, Netlify, Vercel), чтобы он был доступен в интернете
• Добавьте к чат-боту подключение к базе знаний через Supabase для более умных ответов
• Настройте аналитику запросов через Google Sheets или Airtable
• Создайте несколько виджетов для разных сайтов с разными воркфлоу

💡 Совет:  Следующий гайд курса расскажет, как разместить готовый сайт в интернете — бесплатно и без сервера.