Реалізація віджета бронювання для вбудовування на сайт
Вбудовуваний віджет — незалежний компонент системи бронювання, який можна розмістити на будь-якій сторінці через один тег <script> або <iframe title="Embedded content">. Використовується коли потрібно додати запис на послугу в лендинг, сторонній сайт або блог без повної розробки.
Два підходи до вбудовування
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=uk — мова
?primary_color=... — кастомний колір кнопок
Безпека
Віджет приймає тільки POST з доменів з білого списку. Параметри URL використовуються тільки для налаштування відображення, не для авторизації.
Терміни
Віджет з iframe-вбудовуванням та кастомізацією через параметри: 4–6 робочих днів.