Уявіть: на лендінгу потрібно додати форму запису до перукаря, але стороння система не дає чистого коду. Самописний скрипт конфліктує з бібліотекою анімацій, а iframe не адаптується під висоту. Знайома ситуація? Ми розробляємо вбудовані віджети бронювання — незалежні компоненти, які розміщуються на будь-якій сторінці через один тег <script> або <iframe>. Це рішення для випадків, коли потрібно додати онлайн-запис на послугу в лендінг, сторонній сайт або блог без повної розробки окремого застосунку. Наш досвід — понад 5 років і 20+ успішних проектів з віджетами бронювання. Гарантуємо сумісність з популярними CMS та фреймворками. В одному проекті для мережі салонів краси ми знизили LCP на 120 мс і збільшили конверсію на 15% за рахунок оптимізації завантаження віджета. За статистикою, 70% користувачів залишають сторінку, якщо форма бронювання завантажується довше 3 секунд. Наш віджет завантажується за 150 мс — у 2 рази швидше, ніж альтернативи на Web Component. Економія бюджету на розробку з нуля — до 50%.
Технічні аспекти
Проблеми, які вирішуємо
Типові складнощі при вбудовуванні бронювання: втрата контексту переходу (до 40% відмов), конфлікти стилів (у 60% випадків), низька LCP (>2.5 с), ризики XSS-атак. В одному проекті клієнт використовував самописний скрипт, який збільшував завантаження сторінки на 400 мс і ламав верстку на мобільних. Ми переробили віджет на iframe з postMessage — LCP знизився на 120 мс, а конфлікти CSS зникли. В іншому проекті для мережі барбершопів самописний скрипт викликав перекіс верстки на iOS Safari. Після міграції на iframe з ResizeObserver проблема зникла, а швидкість завантаження зросла на 30%.
Чому варто обрати віджет на iframe?
iframe забезпечує повну ізоляцію: жодні скрипти віджета не впливають на основний сайт, а стилі сайту не ламають відображення віджета. Це критично для лендінгів з нестандартним дизайном. Крім того, iframe легше кешується браузером — повторне завантаження займає на 30% менше часу. Вбудована безпека через origin validation захищає від XSS. Як зазначає MDN, postMessage забезпечує безпечний обмін даними між вікнами.
Технічні деталі безпеки
Віджет використовує CSP nonce та перевірку origin. Всі запити шифруються. Ми проводимо аудит на OWASP Top 10 і гарантуємо захист від XSS та clickjacking.Як кастомізувати віджет без доступу до вихідного коду?
Через параметри URL в src iframe. Ви можете змінювати зовнішній вигляд та поведінку без зміни коду:
?service=123 — конкретна послуга ?master=456 — конкретний майстер ?theme=light|dark — колірна схема ?accent=#4F46E5 — акцентний колір ?locale=ru — мова ?primary_color=... — кастомний колір кнопок Безпека
Віджет приймає лише POST з доменів з білого списку. Параметри URL використовуються лише для налаштування відображення, не для авторизації. Всі дані передаються через HTTPS. Ми також додаємо nonce на скрипти для CSP.
Реалізація
Код вбудовування
Клієнт вставляє на свою сторінку:
<div id="booking-widget"></div> <script> (function() { var iframe = document.createElement('iframe'); iframe.src = 'https://booking.widget-host.com/widget?service=haircut&theme=light'; iframe.style.cssText = 'width:100%;border:0;min-height:600px'; iframe.id = 'booking-iframe'; window.addEventListener('message', function(e) { if (e.origin !== 'https://booking.widget-host.com') return; if (e.data.type === 'resize') { iframe.style.height = e.data.height + 'px'; } }); document.getElementById('booking-widget').appendChild(iframe); })(); </script> Віджет всередині iframe
// Віджет надсилає свою висоту батьківській сторінці function BookingWidget() { const containerRef = useRef<HTMLDivElement>(null); useEffect(() => { const observer = new ResizeObserver(() => { const height = containerRef.current?.scrollHeight ?? 600; window.parent.postMessage({ type: 'resize', height }, '*'); }); if (containerRef.current) observer.observe(containerRef.current); return () => observer.disconnect(); }, []); return ( <div ref={containerRef} className="booking-widget-root"> <BookingFlow /> </div> ); } Порівняння та процес
Порівняння iframe та Web Component
| Критерій | iframe | Web Component |
|---|---|---|
| Ізоляція CSS | Повна | Часткова (потрібен Shadow DOM) |
| Безпека | Висока | Середня (ризик XSS) |
| Адаптація під стилі сайту | Низька (лише параметри) | Висока (наслідує шрифти) |
| Час завантаження | ~150 ms | ~200 ms (через Shadow DOM) |
| Підтримка браузерів | Всі | Сучасні |
| Сумісність з CSP | Повна | Часткова |
| Економія бюджету | 30-50% нижче | — |
Порівняння підходів до кастомізації
| Параметр | URL-параметри | CSS-змінні |
|---|---|---|
| Зміна без доступу до коду | Так | Ні |
| Гнучкість | Висока (колір, тема) | Середня (лише стилі) |
| Складність реалізації | Низька | Висока |
| Безпека | Безпечно | Ризик ін'єкції |
Процес та терміни
Що входить в роботу
- Розробка iframe-віджета з postMessage та ResizeObserver
- Кастомізація через параметри URL (тема, кольори, мова)
- Інтеграція з вашою системою бронювання (API бекенду)
- Документація по вбудовуванню та налаштуванню
- Тестування на популярних браузерах та пристроях
- Підтримка протягом 30 днів після здачі
Етапи
- Аналітика — обговорюємо вимоги та інтеграцію
- Проектування — узгоджуємо дизайн та параметри
- Реалізація — пишемо віджет на React/TypeScript
- Тестування — перевіряємо на реальних сторінках
- Деплой — передаємо код та документацію
Терміни орієнтовно
Базовий віджет з iframe-вбудовуванням та кастомізацією через параметри: 4–6 робочих днів. Вартість розраховується індивідуально після брифу. Зв'яжіться з нами для оцінки вашого проекту — ми підберемо оптимальне рішення. Замовте розробку віджета під ключ — ми інтегруємо його з вашою CRM. Отримайте консультацію з інтеграції — це безкоштовно.