1. Делаем несколько скриншотов имеющегося лендинга или сайта и скидываем их боту Lovable c задачей:
"""Вот мой лендинг(скриншот). Твоя задача: написать красивый ВИДЖЕТ, который бы гармонично вписывался в дизайн этого лендинга. Под виджетом я понимаю КНОПКУ с надписью "ИИ-консультант", которая разворачивается при нажатии в чат с ИИ-консультантом. Требования к виджету: 1)НА кнопке должно быть написано "ИИ-консультант" 2) При нажатии на кнопку , НАД ней должен разворачиваться ЧАТ с ИИ-консультантом, в котором есть: а) поле для ввода сообщения б) кнопка "отправить сообщение" (с изображением конверта) в) кнопка "записать голосовое сообщение" (с изображенным микрофоном) г) пространство, где отображается ИСТОРИЯ переписки с ИИ консультантом д) в ПРАВОМ ВЕРХНЕМ УГЛУ пространства, где отображается история чата с ИИ-консультантом должна располагаться КРУГЛАЯ кнопочка с крестиком "X" - которая традиционно означат "закрыть" (в данном случае "свернуть" окно с чатом с ИИ-консультантом до просто кнопки "ИИ-консультант") """ 3) В течении 10 секунд после захода любого посетителя на сайт, чат с ИИ-агентом должен АВТОМАТИЧЕСКИ открываться и в нем от имени ИИ агента должно появляться приветственное сообщение: "Здравствуйте! Рад приветствовать Вас! Я могу ответить на любые Ваши вопросы о нашей компании, ее услугах и продуктах. Подскажите, что Вас интересует?" 4) Кнопка записи голосового сообщения должна быть РАБОЧАЯ 5) Виджет должен отдавать при отправке сообщения ИИ консультанту json, содержащий НЕ только сообщение пользователя, но и IP пользователя. ВНИМАНИЕ: 1) Функцию записи голосового сообщения выполни так, чтобы она была именно ВНУТРИ виджета, а не где то на стороннем сервере! 2) Убери из проекта ФОН, оставь ТОЛЬКО сам виджет 3) виджет подключи к ии агенту в n8n. Вот ссылка на вебхук: (ваша ссылка)""""
2. Бот Lovable создает виджет, проверяем его работоспособность.
Если все ок, заливаем на GitHub.
3. Скачиваем оттуда Zip архив с проектом.
4. Скармливаем его GPT, ставя задачу:
"Вот архив с проектом виджета для кнопки и чата с ИИ агентом. Прочитай ВСЕ файлы в этом архиве, вникни в функционал и ПОЛНОСТЬЮ ПЕРЕНЕСИ этот функционал на стек html + css + js! В качестве результата верни КОД для трех файлов: index.html, style.css и script.js.
5. Создаем бесплатную учетку на Replit, создаем проект html + css + js (static).
И копируем туда код от GPT. Запускаем в превью Replit. Смотрим, как это все выглядит. Редактируем по необходимости, добавляем функционал, если нужно с помощью GPT.
6. В ноде вебхука в n8n разрешаем прием запросов из ЛЮБЫХ источников(CORS):
7. Закинуть файлы на VPS
Зайди на сервер(где лежит лендинг) по SSH и создай папку под виджет:
mkdir -p /var/www/widget
8. Скопируй файлы со своего ПК в папку widget (из той папки, где реально лежат script.js, index.html и style.css):
а) зайди в консоль Виндовс, перейти через команду "cd" в директорию (папку), где лежат script.js, index.html и style.css. на Виндовс
б) После перехода в директорию, введи команду:
scp script.js style.css index.html root@ТВОЙ_IP:/var/www/widget
в) система запросит пароль от сервера, введи В РУЧНУЮ (его видно НЕ будет при вводе, затем нажми "enter". Появится сообщение об успешном копировании файлов на сервер с лендингом
г) В SSH терминале, подключенном к серверу с лендингом, введи команду:
ls -l /var/www/widget/
- Должны отобразиться script.js, index.html и style.css.
9) Научить nginx раздавать /widget/*
а)Если на сервере несколько сайтов — правим именно конфиг лендинга: сначала посмотри список включённых сайтов:
ls -l /etc/nginx/sites-enabled/
б) Открой .conf файл лендинга/Сайта:
nano /etc/nginx/sites-available/(имя вашего конфига).conf
в) и внутр блока server { ... } добавь раздачу содержимого папки /widget/:
location /widget/ {
alias /var/www/widget/;
autoindex off;
}
(Важно — именно alias, не root.)
г) Проверь синтаксис и перезагрузи nginx:
nginx -t
д) Убедись, что файлы отдаются по вебу, открой в браузере:
- https://ДОМЕН_ТВОЕГО_ЛЕНДИНГА(САЙТА)/widget/script.js (должен возвращаться код)
- https://ДОМЕН_ТВОЕГО_ЛЕНДИНГА(САЙТА)/widget/style.css.(должен возвращаться код)
- https://ДОМЕН_ТВОЕГО_ЛЕНДИНГА(САЙТА/widget/index.html (должен возвращаться САМ ВИДЖЕТ!)
10) Подключение виджета к лендингу/сайту через iframe (рекомендовано: абсолютная изоляция)
Когда годится: хочешь, чтобы лендинг вообще никак не влиял на виджет (и наоборот).
а) Вставь iframe в HTML лендинга (перед </body>):
<iframe
src="https://ТВОЙ_ДОМЕН/widget/index.html"
style="position:fixed;bottom:20px;right:20px;width:360px;height:500px;border:none;z-index:2147483647;"
></iframe>
Пример:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AI-Автоматизация Бизнеса | Умные ИИ-Агенты для Роста Продаж</title>
<meta name="description" content="Увеличиваем продажи на 50% и сокращаем расходы на 40% с помощью умных ИИ-агентов." />
<meta name="author" content="AI Business Solutions" />
<meta property="og:title" content="AI-Автоматизация Бизнеса | Умные ИИ-Агенты для Роста Продаж" />
<meta property="og:description" content="Увеличиваем продажи на 50% и сокращаем расходы на 40% с помощью умных ИИ-агентов." />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@lovable_dev" />
<meta name="twitter:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
<script type="module" crossorigin src="/assets/index-CfaJ54hi.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-HYXULdFb.css">
</head>
<body>
<div id="root"></div>
<!-- 👇 Виджет через iframe -->
<iframe
src="https://ВАШ_ДОМЕН(ЛЕНДИНГА)/widget/index.html"
style="position:fixed;bottom:20px;right:20px;width:360px;height:500px;border:none;z-index:2147483647;overflow:hidden;"
></iframe>
</body>
</html>
11) Сброс кэша и проверка на лендинге
- Открой страницу с лендингом
- обнови страницу с Ctrl+Shift+R, чтобы точно подтянулся виджет.
ГОТОВО! Виджет должен добавится и успешно отображаться.