Все проекты

QROT.

Ссылки, соцсети и кнопки бизнеса на одной мобильной странице.

Посмотреть проект
Мокап интерфейса проекта QROT

У ресторана есть меню, адрес на карте, бронирование и ссылка для оплаты. Для посетителя это разные действия, хотя относятся они к одному месту. QROT собирает их на мобильной странице: наверху название и описание бизнеса, ниже ссылки и кнопки. Такой микросайт можно отправить одним сообщением или открыть по QR-коду.

В редакторе сначала видна карточка места с выбранным фоном. Во вкладке «Основные» меняются оформление, название, адрес и короткое описание. Текст и цветовая тема задаются в одном месте, поэтому владельцу не приходится собирать страницу из отдельных блоков и подгонять их друг к другу.

Соцсети и кнопки вынесены в свои вкладки. На готовой странице ссылки на карты и социальные сети стоят компактной группой, а действия занимают всю ширину. Для ресторана это могут быть меню и бронь столика, для цветочного магазина заказ букета. По размеру и расположению кнопок видно, куда нажать с телефона.

Редактор QROT с выбором оформления, основными сведениями и вкладками соцсетей и кнопок
Оформление и основные сведения редактируются рядом. Для соцсетей и кнопок есть отдельные вкладки.
Зелёный микросайт Fibonacci в QROT с описанием ресторана, ссылками на карты и кнопками действий
Готовая страница Fibonacci с описанием места, картами и кнопками. Снимок показывает структуру микросайта.

Одна страница для ссылки и QR-кода

Микросайт получает короткий адрес на qrot.link. Его можно поставить в профиль, отправить клиенту или использовать для QR-стикеров, которые предлагает сервис. Переход с наклейки приводит на ту же страницу со всеми действиями бизнеса. Кнопка ведёт по заданной ссылке: например, к меню или форме бронирования.

На главной я показываю примеры ресторана, кофейни и цветочного магазина. У них общая структура, но разные фоны, описания и наборы действий. Человек может посмотреть эти варианты до входа в аккаунт; кнопка создания микросайта ведёт к авторизации. Сначала виден результат, который предстоит настроить.

Материалы проекта: сайт QROT и пример микросайта Fibonacci.

Технологии и устройство

Веб-интерфейс QROT работает на SvelteKit. Редактор задаёт содержание микросайта, а публичная страница показывает его по короткому адресу.

Страницы
SvelteKit отдаёт HTML-разметку и подключает клиентские модули. Основной текст и примеры главной уже присутствуют в исходном HTML.
Настройки
Оформление и основные данные, соцсети и кнопки разделены в редакторе. Ссылки на карты и социальные сети выводятся отдельно от крупных кнопок действий.