Лендінг із 3D-калькулятором вартості за один вечір: кейс ARCON

За один вечір я зібрав лендинг для виробника сталевих ангарів ARCON - з фірмовим чорно-червоним стилем замовника, інтерактивними 3D-моделями конструкції шарами і калькулятором, який вважає вартість ангару в реальному часі. Майданчик одразу будувався під платну рекламу в Facebook та Google, і перший екран одразу відповідає на запитання «скільки це буде коштувати» – ще до дзвінка менеджеру. Зібрав я його через 1001site AI – розбираю, з яких блоків він складається і як у ньому працює автоматичний розрахунок ціни.

Завдання: сайт під платну рекламу, зібраний за один вечір

ARCON будує безкаркасні арочні та каркасні ангари під ключ - для агробізнесу, портів, логістичних комплексів та промислових майданчиків по всій Україні. Замовнику потрібен був інструмент для холодного трафіку: людина кликає по рекламі, за кілька секунд розуміє, що перед ним надійна компанія, або відразу прикидає ціну сама, або залишає заявку. Звичайна візитівка з описом послуг таке завдання не вирішує.

З матеріалів на старті у мене був фірмовий прайс-лист компанії – готовий брендбук із квітами та структурою подачі, але без сайту під рекламу. Сфери застосування я переніс на лендинг із того ж прайс-листа іконками: агробізнес, порти та термінали, логістичні комплекси, зберігання зерна та техніки, промисловість, авіація – одразу було зрозуміло, під які об'єкти писати тексти та на яку аудиторію налаштовувати рекламу. Лендінг я зібрав за один вечір, уже готовий до першого запуску кампаній.

Як фірмовий стиль замовника перенесли на лендінг?

Кольори, шрифт та структуру подачі я взяв прямо з прайс-листа ARCON: чорний фон, білий текст, червоні акценти та дуга у логотипі. Так відвідувач, який уже бачив буклет чи візитку компанії, дізнається бренд із першого погляду на сайт.

За основу я взяв базовий темний стиль з референсу з каталогу 1001site, а точний червоний замовника поверх нього навів ІІ-асистент кабінету за командою виду «зроби темну тему з моїм червоним». Результат - той самий прайс-лист, тільки тепер у вигляді сторінок, кнопок та калькулятора.

Навіщо лендінг інтерактивні 3D-моделі ангару?

3D-модель ангару можна покрутити і розглянути по шарах - фундамент, конструкцію, що несе, освітлення і вентиляцію. Фото готової будівлі такий розбір не дає, саме він знімає головне питання холодного відвідувача: «що я взагалі купую і з чого це зроблено».

Під кожним шаром я поставив реальне фото з будівництва: воно підтверджує, що за 3D-схемою стоїть справжній об'єкт ARCON.

Над блоком шарів – головний екран лендингу з перемикачем «Безкаркасний/Каркасний» та «3D/Фото»: відвідувач сам вибирає тип конструкції та крутить модель мишею. Дзвінку менеджеру для цього чекати не потрібно.

На цьому ж екрані – чотири цифри довіри поруч із 3D-моделлю: більше 13 років роботи з металом, проліт шириною 12-40 метрів без колон, снігове навантаження до 480 кг/м² та гарантія на конструкцію 36 місяців. Це та сама мова, якою прайс-лист переконував баєрів на папері, тільки тепер поряд з інтерактивною моделлю.

Як влаштований 3D-калькулятор вартості ангару?

3D-калькулятор на лендингу ARCON змінює модель та вилку ціни відразу при русі повзунків ширини та довжини. Відвідувач налаштовує тип ангару, розміри та комплектацію – 3D-модель та орієнтовна вартість кожного вузла (каркас, фундамент, ворота, освітлення) оновлюються наживо, без перезавантаження сторінки.

Далі можна розкрити деталі: вибрати безкаркасний, холодний або теплий каркасний тип, додати фундамент, промислову підлогу, освітлення та вентиляцію – і побачити, з чого складається підсумкова вилка ціни по кожному вузлу окремо.

Різниця із звичайним лендингом без калькулятора видно відразу:

Чому це працює саме з рекламою в Facebook та Google?

Інтерактивні 3D моделі тримають відвідувача на сторінці довше, а калькулятор знімає питання ціни ще до заявки. Для рекламного бюджету це обертається конкретною метрикою - вартістю ліда: довше дивляться, точніше розуміють ціну, рідше йдуть без контакту.

Лендінг спроектований під жорсткі умови платного трафіку: швидке завантаження та адаптивність утримують бюджет від випадкових відмов, а зрозуміла структура з миттєвою демонстрацією цінності закриває головне питання аудиторії у перші секунди після кліку. Можливість покрутити 3D-модель збільшує час на сайті – для рекламних алгоритмів це прямий сигнал залученості. Калькулятор працює на довіру: відвідувач сам «збирає» ангар під свої розміри, бачить логіку ціни та охочіше залишає контакти, ніж після однієї фрази «дізнайтеся вартість за дзвінком».

Що отримує менеджер, коли відвідувач надсилає заявку?

За словами автора поста, заявка з лендінгу ARCON йде менеджерам у Telegram відразу після відправлення форми. Для лендингу 1001site таку доставку налаштовують через блок «Контакти» з кнопкою на месенджер або через ту кастомну інтеграцію, що обслуговує калькулятор. У 1001site доставка повідомлень у Telegram документована як готова функція для замовлень - тут її застосували до заявки з лендінгу. Шлях заявки влаштований так:

1. Відвідувач налаштовує ангар у 3D-калькуляторі та бачить вилку ціни.
2. Натискає "Отримати комерційну пропозицію" або "Розрахунок за 30 хвилин".
3. Заповнює контакти у формі лендингу.
4. Заявка з параметрами ангару миттєво надходить менеджеру в Telegram.
5. Менеджер передзвонює з точним розрахунком, поки інтерес ще теплий.

Розбір усієї збірки лендінгу – у відео автора, воно вбудоване нижче на сторінці.

З чого технічно зібраний такий лендінг

Це режим «лендінг» 1001site: головна з блоків, свої сторінки та форма заявки, без кошика та подачі оголошень. 3D-моделі та калькулятор – сторонній віджет, вставлений через блок «свій HTML»: у режимі «лендинг» він йде в загальному списку блоків нарівні з hero, галереєю та формою. Сам конструктор такої 3D-механіки не робить за вас - він тільки дає готове місце, куди її вставити.

Лендінг лежить на власному домені arcon.in.ua зі своїм SSL-сертифікатом, який 1001site випускає та продовжує сам. Виправити текст, цифри в блоці переваг або додати новий тип ангару можна словами через ІІ-асистента кабінету - без звернення до розробника за кожною дрібною правкою.

Скільки коштує і як швидко збирається такий лендінг

Звичайний лендинг на 1001site збирається ІІ-агентом за 2-7 хвилин після оплати за тарифом «Все включено» - 45 € на місяць, перший місяць за промокодом місяця - 25 €, пробного періоду немає. Але вставка стороннього 3D-калькулятора блоком «свій HTML» і припасування стилю під точний фірмовий колір - це вже ручна робота поверх конструктора: одним кліком у попапі таке не збирається.

Для такого обсягу доопрацювання підходить тариф «Під ключ» - 1650 € разово: сайт збирають за клієнта цілком, від стилю та текстів до домену та інтеграції з Telegram, а хостинг на 12 місяців йде в подарунок. Тим, у кого вже є свій розробник, під це завдання вистачить і «Все включено» - далі вставка віджету робиться тим самим блоком «свій HTML».

Кому підійде лендинг із 3D-калькулятором, окрім продажу ангарів

Формат вирішує конкретне завдання: ціна товару вважається за параметрами конкретного об'єкта, і майданчик повинен відсіювати нецільові заявки ще до дзвінка менеджеру. Це актуально не тільки для ангарів – під ту ж схему підходять теплиці, басейни, скління балконів, меблі та кухні на замовлення, ворота та паркани.

Якщо товар стоїть однаково для всіх і вибір йде за фото та описом, калькулятор надмірний – вистачить звичайного лендінгу з формою заявки. Схожий приклад - кейс про те, як бренд NordHarvest зібрав лендинг під новий товар за вечір: там теж дедлайн і платний трафік, але ціна товару фіксована, і замість калькулятора лендинг сам перетворює вибір товару на комерційну пропозицію.

Окремо скажу: я особисто спілкувався з командою ARCON у процесі роботи та рекомендую її як підрядника з ангарів.

Джерела

• Посада каналу «Бізнес з ІІ»: https://t.me/promtvibeadd/457
• Лендінг ARCON: https://arcon.in.ua/
• Відео про складання лендінгу: https://youtu.be/uOOGNCFzeyM