В этом уроке расскажу как можно использовать 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 не использует режим "сервер").
