Як додати онлайн-запис на сайт клініки чи салону: кнопка, форма та аналітика

Онлайн-запис на сайт салону краси чи клініки можна поставити за кілька хвилин: ви копіюєте з CRM готовий код віджета онлайн-запису для сайту та вставляєте його на WordPress, Wix, Weblium чи будь-який інший сайт. Віджет буває двох видів: кнопка «Записатись» у кутку кожної сторінки, яка відкриває форму поверх сайту, і форма прямо на сторінці. Нижче розповідаємо, що обрати для вашого сайту, куди вставити код, де розмістити кнопку і як рахувати записи з сайту в Google Analytics і Meta Pixel.

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

Показуємо все на прикладі AGATA: віджет там є частиною онлайн-запису клієнтів, і заявки з сайту потрапляють прямо в календар клініки. Поради про розміщення кнопки та аналітику стануть у пригоді з будь-яким сервісом запису.

Навіщо запис прямо на сайті

• Клієнт не йде з сайту. Він обирає спеціаліста, послугу та час там само, де читав про процедуру, без переходів у месенджер і без переписки.
• Записується тоді, коли йому зручно. О пів на одинадцяту вечора чи в неділю, коли адміністраторка вже вдома. Наступного робочого ранку заявка чекає в календарі.
• Бачить справді вільний час. Замість «напишіть, ми підберемо» форма показує конкретні вікна на обраний день. Час обирає сам клієнт, тож зникає одна з причин неявок клієнтів: запис на незручний час.
• Адміністраторка не переписує заявки вручну. Імʼя, телефон, послуга та час одразу потрапляють у календар і в картку клієнта.

Як це працює в AGATA

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

Вільний час система рахує за годинами роботи клініки, графіком спеціаліста, його перервами та вже зайнятими годинами. Записатися онлайн можна щонайменше за 30 хвилин до початку, тож команда встигає підготуватися. Послуги з позначкою «Не показувати в онлайн-записі» (скажімо, консультацію перед складною процедурою) клієнт на сайті не побачить.

Щойно клієнт натиснув «Записатись», запис зʼявляється в календарі клініки, і час стає зайнятим. Вгорі календаря, у блоці «Нові онлайн-заявки», ви підтверджуєте або відхиляєте заявку однією кнопкою, тож розклад лишається під вашим контролем. Заявки з віджета там позначені «з сайту», а в картці візиту видно джерело («Онлайн-запис з сайту клініки») і мітку реклами, якщо клієнт прийшов на сайт за посиланням з UTM-мітками. Нового клієнта система додає в базу, а постійного знаходить за номером телефону, без дублів.

Кнопка поверх сайту чи форма на сторінці

Обидва види віджета відкривають ту саму форму запису. Різниця в тому, де і як її бачить клієнт.

Можна поставити обидва одразу: кнопку на всіх сторінках, а форму — на сторінці «Контакти». Коли форма на сторінці зʼявляється на екрані, кнопка ховається сама, щоб не лягати на поля форми, а коли клієнт прокрутить далі, кнопка повернеться.

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

Що обрати для вашого сайту

• Сайт-візитка на одну сторінку. Форма в блоці «Запис» або поруч із контактами. Якщо сторінка довга, додайте також кнопку.
• Сайт із розділами послуг, цінами та блогом. Кнопка на всіх сторінках, а форма — на сторінці цін чи контактів.
• Сторінка під рекламу конкретної процедури. Форма одразу після опису та ціни: людина прийшла з реклами, і вся сторінка веде її до запису.

Як поставити віджет на сайт: покроково

Спершу візьміть код в AGATA. Цей крок однаковий для будь-якого сайту.

1. Відкрийте «Налаштування» → «Онлайн-запис». Перевірте в розділі «Брендинг публічної сторінки» адресу сторінки запису, лого, фірмовий колір і слоган. Адреса входить і в код віджета, і в посилання для Instagram, тому її зручно обрати одразу.
2. У розділі «Віджет для сайту» оберіть вигляд: «Кнопка на сайті» чи «Форма на сторінці».
3. Для кнопки задайте текст, колір і кут. Замість типового «Записатись» можна написати, наприклад, «Записатися онлайн» чи «Обрати час». Кут можна обрати праворуч чи ліворуч: лівий зручний, коли в правому нижньому куті сайту вже стоїть кнопка чату.
4. Подивіться попередній перегляд і натисніть «Копіювати код».

Код кнопки — один рядок, код форми — два. Під кодом AGATA одразу підказує, куди його вставити на WordPress, Wix, Weblium чи будь-якому іншому сайті. Про кожен варіант коротко розповідаємо нижче.

WordPress

Кнопка. Встановіть плагін для вставки власного коду, наприклад WPCode, і додайте код у розділ «Footer». Кнопка зʼявиться на всіх сторінках сайту, а код не загубиться після оновлення теми.

Форма. Відкрийте потрібну сторінку в редакторі, додайте блок «Власний HTML» (Custom HTML) туди, де має стояти форма, і вставте код. Якщо сторінки збирає конструктор, знайдіть у ньому елемент для HTML-коду: принцип той самий.

Wix

Кнопка. Відкрийте налаштування сайту → «Власний код» (Custom Code), вставте код, оберіть розміщення «Body — кінець» і застосуйте його до всіх сторінок. Розділ «Власний код» Wix відкриває сайтам на преміум-плані з підʼєднаним доменом.

Форма. Додайте на сторінку елемент «Вбудувати HTML» (Embed HTML), вставте код і задайте блоку висоту близько 800 px: Wix показує вбудований код у власній рамці фіксованої висоти.

Weblium

Кнопка. У налаштуваннях сайту знайдіть розділ для власного коду (Custom code) і вставте код у поле для кінця сторінки.

Форма. Додайте на сторінку блок для HTML-коду в потрібне місце та вставте код.

Будь-який інший сайт

Кнопка. Вставте код у HTML кожної сторінки перед тегом </body>. Якщо в сайту є спільний шаблон підвалу, досить вставити код туди один раз.

Форма. Вставте код у HTML сторінки в те місце, де має стояти форма.

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

Де поставити кнопку та форму

• Сторінка послуг і цін. Тут клієнт вже порівняв процедури та ціни. Форма одразу під прайсом перетворює інтерес на запис.
• Контакти. Форма поруч з адресою та телефоном: хто хоче зателефонувати — телефонує, хто хоче записатися сам — записується.
• Сторінки процедур і статті блогу. Тут вистачить кнопки в кутку: вона поруч, хоч би на якому абзаці клієнт вирішив записатися.
• Мобільна версія. Клієнти, які приходять з Instagram, відкривають сайт у телефоні. Кнопка там завжди під пальцем, а форма відкривається на весь екран. Після встановлення перегляньте сайт із телефона, як його бачать клієнти.

Текст кнопки робіть дієсловом, яке каже, що станеться після натискання: «Записатись», «Обрати час», «Записатися онлайн». Колір беріть із фірмового стилю сайту, але контрастний до фону сторінки, щоб кнопку було видно з першого погляду.

Посилання на запис для Instagram, Telegram і Google

Сайт не єдине місце, звідки клієнти хочуть записатися. У тому самому розділі «Онлайн-запис» є ваше посилання на окрему сторінку запису з логотипом, фірмовим кольором і слоганом клініки. Реєструватися клієнту не треба.

Куди додати посилання:

• у шапку профілю Instagram — туди, де зазвичай стоїть посилання на сайт;
• в опис Telegram-каналу та закріплене повідомлення;
• у профіль клініки в Google Картах;
• на візитку.

Якщо ваші клієнти частіше пишуть, ніж натискають кнопки, запис у Telegram та Instagram Direct може вести AI-адміністратор для клініки: він підбирає вільний час і записує через ті самі перевірки, що і форма на сайті. Його заявки зʼявляються в тому самому блоці «Нові онлайн-заявки».

Як рахувати записи з сайту в Google Analytics і Meta Pixel

Кожен запис із сайту видно і в самій AGATA: позначка «з сайту» серед нових заявок і джерело в картці візиту. А щоб порахувати, скільки записів приносить сайт і яка реклама веде до запису, передайте записи з віджета у свою аналітику. Для цього у віджета AGATA є подія agata:booked: вона спрацьовує на сторінці вашого сайту щоразу, коли клієнт створив запис через кнопку чи форму, ще до вашого підтвердження.

Готовий приклад є в тому самому розділі, у блоці «Подія для аналітики». Щоб вставити його на сайт, загорніть код у тег <script>:

<script>
window.addEventListener("agata:booked", function (e) {
  if (window.gtag) gtag("event", "generate_lead");  // Google Analytics
  if (window.fbq) fbq("track", "Schedule");          // Meta Pixel
});
</script>

• generate_lead — рекомендована подія Google Analytics 4 для заявок. У GA4 позначте її як ключову подію, щоб бачити кількість записів із сайту у звітах.
• Schedule — стандартна подія Meta Pixel для запису на візит. Її можна використати в рекламному кабінеті Meta як подію конверсії.
• Перевірки if (window.gtag) і if (window.fbq) потрібні, щоб код працював і тоді, коли на сайті встановлено щось одне.

Де ставити цей код. Туди ж, де стоїть код віджета: наприклад, у той самий розділ «Footer» плагіна WPCode одразу після кнопки. Google Analytics чи Meta Pixel на сайті вже мають бути встановлені: код передає їм подію, а рахують уже вони.

Якщо ви користуєтеся Google Tag Manager, передайте подію в dataLayer, а в GTM створіть тригер Custom Event із назвою події agata_booked і привʼяжіть до нього теги GA4 і Meta Pixel:

<script>
window.addEventListener("agata:booked", function (e) {
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({ event: "agata_booked", booking_mode: e.detail.mode });
});
</script>

У e.detail.mode віджет передає, звідки запис: button — з кнопки, inline — з форми на сторінці. Якщо передати booking_mode у тег GA4 як параметр події, за місяць стане видно, який вигляд краще працює на вашому сайті. А в e.detail.clinic віджет передає адресу сторінки запису клініки: якщо на одному сайті стоять віджети кількох філій, вона підкаже, до якої з них записалися.

Що перевірити після встановлення

1. Сайт на компʼютері та телефоні. Кнопка стоїть у вибраному кутку на кожній сторінці, форма — там, де ви її вставили, і видно її повністю. На телефоні вікно запису відкривається на весь екран.
2. Спеціалісти та послуги. У формі зʼявляються спеціалісти з позначкою «Приймає записи» і послуги, які ви не ховали з онлайн-запису. Якщо когось бракує, перевірте ці позначки в профілі спеціаліста та в картці послуги.
3. Вільний час. Відкрийте форму на завтра та порівняйте вікна з графіком у календарі. Якщо для онлайн-запису хочете відвести частину дня, у календарі є «Налаштування часу для онлайн-бронювання»: там задається окреме вікно для онлайн-запису та закриваються окремі слоти.
4. Тестовий запис. Запишіться через сайт на свій номер. Заявка має зʼявитися в календарі та в блоці «Нові онлайн-заявки» з позначкою «з сайту». Після перевірки відхиліть її, і час знову стане вільним.
5. Аналітика. Під час тестового запису відкрийте звіт реального часу (Realtime) у Google Analytics або інструмент Test Events у Meta Events Manager (сайт для перевірки відкрийте звідти): подія має зʼявитися за хвилину-дві.
6. Старий код і посилання. Якщо раніше на сайті стояв інший сервіс запису, приберіть його код і замініть посилання в Instagram, Telegram і Google. Про переїзд докладно розповідаємо в статті як перейти в нову CRM.
7. Зміни згодом. Якщо змінили текст чи колір кнопки або адресу сторінки запису, скопіюйте код заново та замініть ним попередній.

Що спитати на демо про онлайн-запис на сайті

Ці питання варто поставити на демо будь-якої CRM, якщо ви хочете приймати записи на сайті. Відповіді швидко покажуть, чи запис із сайту справді доходить до календаря і чи все при цьому під вашим контролем. Інші критерії ми зібрали в статті про те, як обрати CRM для косметологічної клініки.

• Чи є готовий код і для кнопки поверх сайту, і для форми на сторінці?
• Чи підказує система, куди вставити код на WordPress, Wix, Weblium і будь-якому іншому сайті?
• Чи можна задати текст, колір і кут кнопки під стиль сайту?
• Чи відкривається форма на телефоні на весь екран?
• Чи бачить клієнт вільний час за реальним графіком спеціаліста, з перервами та вже зайнятими годинами?
• Чи можна сховати з онлайн-запису окремі послуги та задати окремі години для онлайн-запису?
• Чи потрапляє заявка одразу в календар і чи підтверджуєте ви її однією кнопкою?
• Чи знаходить система постійного клієнта за номером телефону, а не створює дубль?
• Чи можна передати запис із сайту в Google Analytics і Meta Pixel?

В AGATA на кожне з цих питань можна відповісти «так».

Часті питання

Чи потрібен розробник, щоб поставити віджет?

Впораєтеся самі: код готовий, а для WordPress, Wix і Weblium AGATA підказує, куди саме його вставити. Якщо сайт веде студія чи фрилансер, перешліть їм код: вставка займе кілька хвилин.

Скільки коштує віджет онлайн-запису?

Окремо за віджет платити не треба: він входить до онлайн-запису, а онлайн-запис є в усіх пакетах AGATA — від «Старту» до «Мережі». Ціни пакетів є на сторінці тарифів AGATA, а спробувати онлайн-запис разом із віджетом можна 14 днів безкоштовно.

Чи можна поставити і кнопку, і форму на одному сайті?

Так. Кнопку зручно мати на всіх сторінках, а форму — на сторінці контактів чи цін. Коли форма видна на екрані, кнопка ховається сама та не заступає поля форми.

Що буде, якщо код вставили двічі?

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

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

Так, одразу. Щойно клієнт записався, цей час у спеціаліста зайнятий, і онлайн на нього вже ніхто не запишеться. Якщо ви відхилите заявку, час звільниться.

Чи можна брати передоплату під час запису на сайті?

Так, через WayForPay. У налаштуваннях онлайн-запису ви задаєте суму та обираєте, вносить її клієнт на свій вибір чи обовʼязково. На останньому кроці форма показує суму передоплати, а у віджеті на сайті сторінка оплати відкривається в новій вкладці. Гроші надходять на рахунок клініки, а при завершенні візиту передоплата зменшує суму до оплати. Як це підключити, розповідаємо на сторінці про передоплату через WayForPay.

Що робити далі

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

Онлайн-запис — одна з частин системи, у якій працює вся команда. Як вона влаштована для салону з кількома майстрами, розповідаємо на сторінці CRM для салону краси, а якщо ви працюєте самі — на сторінці програма для косметолога.