Реализация виджета бронирования для встраивания на сайт
Встраиваемый виджет — независимый компонент системы бронирования, который можно разместить на любой странице через один тег <script> или <iframe>. Используется когда нужно добавить запись на услугу в лендинг, сторонний сайт или блог без полной разработки.
Два подхода к встраиванию
iframe — изолированный, безопасный, не влияет на стили страницы. Минус: фиксированная высота или нужен постмессаджинг для авто-высоты.
Web Component / script-инжект — нативно встраивается в DOM, может использовать шрифты и цвета страницы. Требует осторожности с CSS-изоляцией.
Рекомендуется iframe с postMessage для передачи высоты.
Код встраивания
Клиент вставляет на свою страницу:
<div id="booking-widget"></div>
<script>
(function() {
var iframe = document.createElement('iframe');
iframe.src = 'https://booking.example.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.example.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>
);
}
Кастомизация через параметры URL
?service=123 — конкретная услуга
?master=456 — конкретный мастер
?theme=light|dark — цветовая схема
?accent=#4F46E5 — акцентный цвет
?locale=ru — язык
?primary_color=... — кастомный цвет кнопок
Безопасность
Виджет принимает только POST с доменов из белого списка. Параметры URL используются только для настройки отображения, не для авторизации.
Сроки
Виджет с iframe-встраиванием и кастомизацией через параметры: 4–6 рабочих дней.