В этом уроке расскажу как можно использовать n8n (платформу для автоматизации рабочих процессов) в связке с api2app. Создам виджет чата с ИИ для встраивания на сайт. У n8n есть свой виджет для встраивания, но возможностей кастомизации маловато.
Создание чата в n8n
Создаю такой workflow:
В параметрах ноды "Respond to Webhook" для "Respond With" указываю - First Incoming Item. В параметрах "Simple Memory" можно настроить число сообщений, которые будут храниться на сервере для каждой сессии. Можно открыть настройки первой ноды и перейти по ссылке "Chat URL" для тестирования. Нужно скопировать ссылку, она понадобится позже.
Создание и тестирование конфигурации API
Перехожу на сайт api2app. Можно вручную создать конфигурацию API в разделе "API -> Мои API", а можно перейти по это ссылке и клонировать готовую конфигурацию в свой аккаунт:
https://api2app.org/ru/apis/shared/3094b5f0-7163-11f0-a655-525400f8f94f
Далее нужно открыть эту конфигурацию для редактирования и обновить URL API, на тот, который был скопирован ранее в n8n. Нажав кнопку "Тест", можно протестировать работу. В ответе должен появиться примерно такой JSON с ответом от чат-бота:
{
"output": "Привет! Как дела? Чем могу помочь?"
}Обратите внимание на метку "{SESSION_ID}" в теле запроса. На месте этой метки будет вставлен уникальный идентификатор сессии, чтобы бот мог получить историю сообщений для конкретного посетителя сайта. После сохранения необходимо опубликовать API (кнопка "Поделиться"), можно оставить его скрытым.
Создание графического интерфейса для чата
Можно создать интерфейс вручную в разделе "Приложения -> Мои приложения", а можно импортировать из этого JSON:
JSON для импорта приложения
{
"url": "https://api2app.org/ru/api/v1/applications/0",
"id": 263,
"date_created": "2025-08-21T20:04:05.194160Z",
"name": "n8n чат с ИИ (шаблон)",
"language": "ru",
"uuid": "fd50b53a-7ec9-11f0-9336-525400f8f94f",
"shared": true,
"hidden": true,
"maintenance": false,
"advertising": false,
"adultsOnly": false,
"gridColumns": 1,
"tabs": [
"Вкладка 1"
],
"blocks": [
{
"options": {
"enabled": true,
"autoClear": false,
"orderIndex": 0,
"showLoading": true,
"gridColumnSpan": 1,
"messageSuccess": ""
},
"elements": [
{
"icon": "",
"info": "[Bootstrap Icons](https://icons.getbootstrap.com/)",
"keys": [],
"name": "answer",
"type": "text",
"color": "Black",
"label": "",
"value": "Здравствуйте! Чем я могу Вам помочь?",
"border": true,
"hidden": false,
"enabled": false,
"options": {
"outputApiFieldName": "output",
"outputApiFieldType": "output"
},
"fontSize": "Medium",
"markdown": false,
"valueArr": null,
"valueObj": null,
"fullWidth": false,
"blockIndex": 0,
"orderIndex": 0,
"prefixText": "",
"suffixText": "",
"alignCenter": false,
"borderShadow": true,
"showOnlyInVK": false,
"hiddenByField": "",
"itemFieldName": "",
"whiteSpacePre": true,
"hiddenByDefault": false
}
],
"tabIndex": 0
},
{
"options": {
"enabled": true,
"autoClear": false,
"orderIndex": 1,
"showLoading": true,
"gridColumnSpan": 1,
"messageSuccess": "",
"isStickyPosition": true
},
"elements": [
{
"max": 0,
"icon": "",
"info": "[Bootstrap Icons](https://icons.getbootstrap.com/)",
"name": "name",
"type": "input-text",
"label": "",
"value": "",
"enabled": false,
"options": {
"inputApiFieldName": "chatInput",
"inputApiFieldType": "input"
},
"readOnly": false,
"required": true,
"blockIndex": 1,
"orderIndex": 0,
"prefixText": "",
"storeValue": false,
"suffixText": "",
"placeholder": "Введите Ваше сообщение здесь",
"hiddenByField": "",
"hiddenByDefault": false,
"copyToClipboardEnabled": false,
"speechSynthesisEnabled": false,
"speechRecognitionEnabled": false
},
{
"icon": "bi-chat-right-dots",
"info": "[Bootstrap Icons](https://icons.getbootstrap.com/)",
"name": "submit",
"text": "Отправить",
"type": "button",
"color": "Cyan",
"value": null,
"hidden": false,
"enabled": false,
"options": {
"inputApiFieldName": "submit",
"inputApiFieldType": "input"
},
"valueArr": null,
"valueObj": null,
"blockIndex": 1,
"orderIndex": 1,
"prefixText": "",
"suffixText": "",
"isClearForm": false,
"hiddenByField": "",
"isDownloadMode": false,
"hiddenByDefault": false,
"isStickyPosition": false
}
],
"tabIndex": 0
}
],
"image": null,
"vkAppId": "",
"vkSecretKey": "",
"tgBotToken": "",
"tgForwardToUserId": "",
"paymentEnabled": false,
"pricePerUse": null,
"gupshupApiKey": ""
}
После импорта нужно открыть приложение для редактирования, переименовать его и связать с API.
Сначала нажимаю кнопку "Действие ввода" в блоке поля для ввода сообщения.
Нужно найти API по его названию и выбрать поле "chatInput".
Для кнопки отправки сообщения тоже нужно выбрать Действие ввода с этим же API, там доступен только вариант "Отправить". Нужно его выбрать и сохранить.
Вверху есть текстовый элемент, где должны выводиться ответы бота. Для этого элемента нужно задать "Действие вывода" - поле "output".
Приложение готово. Можно кликнуть переключатель "Предпросмотр" для тестирования. Не забудьте сохранить работу.
Встраивание чата на сайт
Для встраивания виджета чата на сайт нужно использовать специальный URL приложения. Нажимаю кнопку "Поделиться" и копирую значение из поля "URL для встраивания".
Открываю исходный код HTML своего сайта и вставляю такой код:
<script src="https://andchir.github.io/api2app-chat-widget/api2app-chat-widget.js"></script>
<script>
const chatWidget = new Api2AppChatWidget(
'https://api2app.org/ru/apps/embed/your-app-embed-id', { // Это URL встраивания приложения
buttonColor: '#007bff',
hoverColor: '#0056b3',
position: 'bottom-right',
width: 350,
height: 465
});
</script>Здесь нужно поменять URL, на тот, который был скопирован ранее.
Исходный код этого скрипта доступен здесь:
https://github.com/andchir/api2app-chat-widget
В итоге у меня получился такой виджет на сайте:
В данном примере этот чат не очень полезный для конкретного сайта, т.к. даёт возможность задать вопрос обычному ChatGPT, но n8n позволяет, например, создать базу знаний для бота, что открывает очень интересные возможности.
С помощью визуального конструктора api2app в интерфейсе чата можно создать вкладки, добавить текстовую информацию, картинки, ссылки и т.п. Данное приложение можно скачать с сайта api2app, тогда оно не будет зависеть от нашего сервера (если API не использует режим "сервер").
Комментарии (3)
Madrusnl
24.08.2025 17:48@Andchir Интересная статья, показывающая новые возможности для интеграции. Но она бы сильно выиграла, если бы она начиналась с небольшого введения, доступного для новичков. Буквально пара предложений о том, с чем "едят" n2n, и уж особенно api2app. Иначе получается, что аудитория - это лишь те, кто в этом уже разбираются. Я, например, еще не до конца въехал в тему, хоть и пытаюсь. Открыл демо сайт, а он выглядит, как полностью готовое коммерческое вебприложение. Как это связано со статьей, непонятно. А просто поиграться стремно. :-)
Andchir Автор
24.08.2025 17:48Буквально пара предложений о том, с чем "едят" n2n, и уж особенно api2app.
Извините, но я думаю для этого есть теги внизу статьи :)
Открыл демо сайт, а он выглядит, как полностью готовое коммерческое вебприложение.
Это обычный шаблонный сайт со сгенерированным контентом. Но там есть виджет чата из данной статьи.
palarria
Огооо