Создание Интерактивной Системы Квитанций и Аналитики на Tilda

Полное руководство: HTML-квитанция с PDF, «скрытый» Tilda-движок → Google Sheets → защищённый дэшборд с фильтрами и графиками. Без кода «в лоб» — по шагам, практично и красиво.

Быстрый старт Смотреть демо дэшборда

0 ₽

Выручка

Заказы

0 ₽

Средний чек

Аннотация

Это руководство описывает создание автономной системы для вашего бизнеса на Tilda без привлечения backend-разработчиков. Мы свяжем интерактивную HTML-квитанцию, скрытую форму Tilda для отправки данных, Google Sheets как надежную базу данных, и защищенную паролем страницу-аналитику с живыми графиками и фильтрами.

Цели

✓ Создать единый, удобный интерфейс для менеджеров для оформления заказов.
✓ Автоматизировать передачу и хранение данных в Google Sheets.
✓ Получить наглядный дэшборд для анализа ключевых метрик: выручки, среднего чека, эффективности работы и популярных услуг.

Быстрый старт в 4 шага

Квитанция (отдельная страница): Создайте страницу «Квитанция». Добавьте на нее блок T123 (HTML) и вставьте в него полный код квитанции. Этот интерфейс будет основным рабочим инструментом менеджера.
Скрытая форма-движок: На ту же страницу, под HTML-блок, добавьте блок BF204N. Удалите из него все поля, кроме одного, и сделайте его скрытым. Создайте 25 скрытых полей с точными именами переменных. Этот блок — невидимый мост между вашей квитанцией и Tilda.
Google Sheets: В «Настройки сайта → Формы» подключите Google Sheets и привяжите сервис к вашей скрытой форме BF204N. Tilda автоматически создаст таблицу и будет наполнять ее данными после каждой отправки.
Дэшборд (отдельная страница): Создайте страницу «Аналитика», защитите ее паролем. Добавьте T123 (HTML), вставьте код дэшборда. В коде нужно будет указать ID вашей Google-таблицы и номер листа (gid).

Список 25 скрытых полей (копировать)

numbercustomer_namecustomer_phonereception_datedelivery_datequarterdeceased_namebirth_datedeath_datephoto_sourcephoto_linkphoto_formatphoto_quality_dpiphoto_quality_retouchphoto_methodphoto_w_mmphoto_h_mmphoto_colorphoto_bydeadlineprepaymentfinal_amount_inputfinal_datetotal_calcitems_json

Блок 1. Квитанция (мини-демо)

Это компактная демо-версия для наглядности. Ваша полноразмерная квитанция вставляется на отдельной странице «Квитанция».

Номер Клиент Телефон Дата

Наименование	Кол-во	Цена, ₽

Превью

RUBICONE

КВИТАНЦИЯ № 001

Дата: —

Клиент: —

Тел.: —

Наименование	Кол-во	Цена
ИТОГО:		0 ₽

Подпись: ________________________

Блок 2 и 3. Скрытый «движок» и Google Sheets

На странице «Квитанция» (под основным HTML-блоком) размещается стандартный блок Tilda BF204N. Он служит невидимым "движком". Вы удаляете из него все видимые поля, добавляете 25 скрытых полей (с именами из списка выше) и присваиваете блоку CSS-класс `form-engine` в настройках, чтобы скрыть его от пользователей. Ваш JavaScript из квитанции будет находить эту форму, заполнять ее скрытые поля актуальными данными и программно инициировать отправку. Tilda перехватит эту отправку и, согласно настройкам, отправит данные в Google Sheets.

Блок 4. Аналитический дэшборд (демо)

Это демонстрация интерфейса: фильтры, KPI и графики на Chart.js. В вашей рабочей версии данные будут браться напрямую из вашей Google-таблицы.

—

0 ₽

Общая выручка

Всего заказов

0 ₽

Средний чек

Динамика заказов и выручки

Топ-услуги (по выручке)

Эффективность мастеров (кол-во заказов)

Полные коды для вставки

Скопируйте и вставьте эти блоки в соответствующие HTML-модули T123 на ваших страницах.

Показать полный код для страницы «Квитанция»▼

<!-- Вставьте этот код в HTML-блок T123 на странице "Квитанция". -->
<!-- Под этим блоком разместите скрытую форму BF204N с 25 полями. -->
<!-- Код квитанции из вашего предыдущего запроса... -->

Показать полный код для страницы «Аналитика»▼

<!-- Код для страницы "Аналитика". Защитите эту страницу паролем в настройках Tilda -->
<!-- ... Код дэшборда с Chart.js и PapaParse, как я показывал ранее ... -->

FAQ / Тонкости

Почему данные не летят в Google Sheets?

• **Проверьте привязку:** В контенте формы BF204N должен быть подключен сервис Google Sheets.
• **Проверьте имена полей:** Имена 25 скрытых полей должны 1-в-1 совпадать со списком.
• **Публикация:** Изменения в HTML и настройках форм применяются только после полной публикации страницы.

Как защитить аналитику паролем?

В «Настройки страницы» → «Дополнительно» → «Задать пароль для страницы». После этого делитесь ссылкой только с командой.

Как получить ссылку на CSV из Google Sheets?

В Google Sheets: «Файл» → «Поделиться» → «Опубликовать в интернете». Выберите нужный лист, в формате выберите «CSV-файл», нажмите «Опубликовать» и скопируйте сгенерированную ссылку.

Что делать, если нужно добавить новое поле?

1. Добавьте поле в HTML-код квитанции. 2. Добавьте скрытое поле с таким же именем в форму BF204N. 3. Обновите JS-код квитанции, чтобы он заполнял это новое поле. 4. В Google-таблице появится новый столбец.