Генератор QR-кодов: веб-приложение для своего сайта в Ное
Для визитки или меню нужна форма из одного поля: вставили адрес страницы — скачали PNG с QR-кодом. Здесь рабочий пример, готовое задание для Нои и проверка кода перед печатью тиража.
• 13 лет опыта в маркетинге и продажах
• Более 1000 проектов
• Основатель портала Wake up Marketing
• Практикует маркетинг и внедрение ИИ в бизнес клиентов
Подпишитесь на Telegram-канал Дмитрия: дневник развития портала Wake up Marketing, билдера сайтов и приложений в Ноя и маркетплейса шаблонов. Плюс выжимка 13 лет опыта в суровом маркетинге и плоды 2 лет работы с ИИ 24/7
Вставьте в форму адрес страницы, например https://wake-up-marketing.ru/utm-generator-v-noye, и получите QR-код с кнопкой «Скачать PNG»: файл 1024 × 1024 пикселя, чёрные модули на белом поле. Такой код можно ставить на визитку или на карточку «Открыть меню» у кассы.
Генератор собирается в Билдере Нои одним заданием: текст задания ниже, его можно отдать и своему подключённому агенту. Картинки в статье — с работающего демонстрационного прототипа.
Генератор QR-кодов для сайта должен принимать веб-адрес, показывать закодированную строку и сохранять читаемое изображение. Для первого варианта достаточно ссылок HTTP и HTTPS, чёрного кода на белом фоне и выгрузки PNG. Исходный адрес не должен уходить в сторонний сервис ради построения картинки.
QR — двумерный код из квадратных модулей. Внутри может находиться ссылка, текст или другие данные. Мы ограничим приложение ссылками: так человеку проще понять, что откроет камера, а форме — сообщить о неправильном вводе.
У этого маленького приложения два пользователя. Сотрудник готовит карточки для стойки, визитки или упаковки. Посетитель сканирует результат и должен попасть на нужную страницу без лишнего промежуточного сайта. Удобство обоих важнее десятка декоративных настроек.
В основе прототипа — открытая библиотека QR Code generator проекта Nayuki. Она формирует код по данным и поддерживает разные уровни восстановления при повреждениях. Это расчёт изображения, а не запрос к нейросети при каждом нажатии кнопки.
Один адрес от формы до камеры
Вставим ссылку на UTM-генератор, уже опубликованный на портале:
Код
https://wake-up-marketing.ru/utm-generator-v-noye
Приложение показывает ту же строку рядом с кодом. Кнопка «Скачать PNG» сохраняет файл. PNG из примера можно открыть отдельно. Камера должна прочитать из кода именно этот адрес.
В демонстрационном приложении рядом с кодом виден полный адрес, а кнопка сохраняет PNG размером 1024 на 1024 пикселя.
Рабочий порядок формы прост: вставили ссылку — получили код; изменили ссылку — получили новую картинку; очистили поле или ввели ошибку — прежний результат исчез. Последнее важно: устаревший код рядом с новой ошибочной строкой легко уедет в печать.
Код содержит адрес страницы UTM-генератора. Тот же адрес остаётся обычным текстом рядом с иллюстрацией.
В прототипе файл имеет размер 1024 × 1024 пикселя. Модули рисуются целыми пикселями без сглаживания, а вокруг остаётся белое поле. Размер в пикселях помогает подготовке, но для печати нужно ещё выбрать физический размер на макете и проверить результат камерой.
Сайт можно собрать разговором
Опишите идею словами — и смотрите, как сайт собирается на глазах
Вайбкод-конструктор: от лендинга до контент-портала
Правки — тем же диалогом, без вёрстки и разработчиков
Этот бриф можно скопировать в чат создания сайта. Замените название и пример ссылки; остальные требования описывают поведение формы и готового файла.
Промпт
Создай одностраничное веб-приложение «QR для моего сайта».
Читатель — сотрудник небольшого бизнеса, которому нужно сделать
QR-код для визитки, меню или упаковки без регистрации посетителей.
Экран:
- Короткий заголовок и объяснение, что код хранит ссылку на сайт.
- Поле «Ссылка на страницу» с примером моего адреса.
- Превью чёрного QR на белом фоне.
- Полная закодированная строка рядом с превью.
- Кнопка «Скачать PNG» и понятное сообщение об ошибке.
Поведение:
1. Убирай только пробелы по краям ввода. Принимай абсолютные
HTTP- и HTTPS-адреса. Запрещай javascript:, data:, адреса с логином
и паролем и строки без адреса сайта. Не открывай введённую ссылку
и не загружай страницу для построения QR.
2. Кодируй введённую строку целиком, включая путь и параметры.
Не добавляй реферальные метки, редирект и собственный трекинг.
Если меняешь представление адреса, покажи итог до скачивания.
3. При пустом или неверном вводе убирай прежнее превью и отключай
скачивание. Не оставляй на экране код от предыдущего адреса.
4. Генерируй код локально в браузере, без внешнего сервиса и CDN.
Используй совместимую с платформой реализацию и сохрани лицензию
используемого исходного кода. Не рисуй QR как случайный узор.
5. Сохраняй PNG 1024 на 1024 пикселя. Рисуй целые квадратные модули
без сглаживания и оставляй белое поле не менее четырёх модулей
со всех сторон. Не вставляй логотип поверх кода.
6. На телефоне поле, превью и кнопка идут одной колонкой. Длинный
адрес переносится, а кнопка остаётся доступной без горизонтальной
прокрутки. Поле имеет подпись, ошибку читает экранный диктор.
Примеры для проверки:
- Обычная HTTPS-ссылка с путём: после сканирования тот же адрес.
- Ссылка с двумя параметрами и символом &: параметры сохраняются.
- Пустая строка и javascript:alert(1): нет кода и скачивания.
- После правильного адреса введён неправильный: старый PNG
больше нельзя скачать через кнопку.
Сначала сделай этот небольшой вариант. Не добавляй базу пользователей,
оплату, сбор контактов, авторизацию и внешние подключения.
В результате покажи страницу, скачиваемый файл и проверку его чтения.
С таким заданием в Ное получается конкретный проект: одна форма и один файл на выходе. Дополнительные функции можно обсуждать после того, как обычная ссылка правильно кодируется и скачивается.
Как создать генератор в Ное?
В кабинете Нои откройте «Билдер», перейдите к созданию проекта для своей идеи и передайте бриф генератора. Сначала получите страницу с формой, затем проверьте скачанный QR и опубликуйте проект после успешной сборки. Для подключения своего внешнего ИИ-помощника в Билдере есть раздел «Подключить агента».
Можно выбрать, кто делает работу: ваш подключённый агент или ИИ самой платформы. Это разные способы выполнения, со своими расходами. Перед платным заданием Ноя показывает условия. Доступ к Билдеру и работа ИИ зависят от прав и тарифа кабинета.
Начните с одного экрана: форма, превью и скачивание. Интернет-магазин, личный кабинет и рассылка сильно усложнят проект, а читаемый код скачать не помогут.
По мере работы формулируйте замечания через действие: «после очистки поля остаётся старый код», «адрес с параметрами теряет часть после &», «PNG скачивается, но камера читает другой путь». Такие сообщения точнее, чем «сделай генератор надёжнее».
Если задание выполнит другой исполнитель, передайте ему бриф вместе с примерами входа и ожидаемым файлом: результат можно будет проверить так же, как проверяли прототип.
Почему QR перестаёт читаться после печати
Частая причина — коду не оставили свободное белое поле. Другие проблемы появляются, когда картинку растягивают, размывают при уменьшении или печатают светлым цветом на пёстром фоне. Камера должна различить сетку, а не просто увидеть похожий квадратный узор.
Начните с чёрного кода на белом фоне без логотипа. Разместите его на макете с полями и напечатайте пробный экземпляр в реальном размере. Проверьте камерой с расстояния, на котором человек будет стоять у стойки или держать упаковку.
У QR есть восстановление части повреждённых данных, но его запас не делает любую наклейку поверх кода допустимой. Чем больше адрес и плотнее рисунок, тем внимательнее нужно выбирать размер. Для длинной кампании с множеством параметров удобнее заранее продумать короткий постоянный путь на своём сайте.
Как менять страницу после печати кода
Обычный QR хранит строку, которую в него записали. Если вы напечатали адрес /menu, можно менять содержимое этой страницы, сохраняя сам адрес. Код на карточке останется прежним и продолжит вести туда же.
Если поменялся сам путь или домен, старые карточки не узнают об этом автоматически. Для перехода со старого адреса на новый нужен настроенный редирект — перенаправление на стороне вашего сайта. Его важно сохранить на всё время жизни напечатанных материалов.
Сервисы «динамических QR» обычно используют промежуточную ссылку, назначение которой можно менять. Вместе с удобством появляется зависимость от этого сервиса и его условий. Для своего меню часто проще постоянная страница на собственном домене, чем отдельная подписка только ради замены ссылки.
Какие дополнения нужны бизнесу
Для набора визиток можно добавить подпись файла и список заранее подготовленных адресов. Для рекламных карточек пригодятся метки перехода: сначала соберите ссылку с UTM, затем целиком закодируйте её. Метки помогают различать источники, а количество сканирований сами по себе не измеряют.
Если приложению потребуется список кампаний, его можно хранить в таблице проекта. Появятся авторизация сотрудника, права на изменение адресов и история правок. Это отдельный этап: базовый генератор может работать в браузере без отправки ссылок в базу и без доступа к CRM.
Сначала убедитесь, что новый адрес остаётся вашим и открывает ожидаемую страницу. QR легко переносит опечатку в печатный тираж: сам код при этом вполне исправен. Для массовой подготовки полезен список «подпись — адрес — файл», где сотрудник видит результат до отправки макета в типографию.
С чего начать прямо сейчас
Выберите одну существующую страницу своего сайта. Сделайте для неё QR, скачайте PNG и считайте код камерой. Сопоставьте открытый адрес с исходным, затем попробуйте небольшую распечатку. Когда этот путь работает, переносите бриф в Билдер и настраивайте приложение под свои карточки.
