Представьте: на лендинге нужно добавить форму записи к парикмахеру, но сторонняя система не даёт чистого кода. Самописный скрипт конфликтует с библиотекой анимаций, а 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. Получите консультацию по интеграции — это бесплатно.