Embeddable Booking Widget Implementation
Embeddable widget is independent booking system component placeable on any page via single <script> or <iframe> tag. Used when need to add service booking to landing, third-party site or blog without full development.
Two Embedding Approaches
iframe — isolated, secure, doesn't affect page styles. Downside: fixed height or need postMessaging for auto-height.
Web Component / script-inject — natively embedded in DOM, can use page fonts and colors. Requires CSS isolation caution.
iframe with postMessage for height passing recommended.
Embedding Code
Client inserts on their page:
<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>
Widget Inside iframe
// Widget sends its height to parent page
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 Parameter Customization
?service=123 — specific service
?master=456 — specific specialist
?theme=light|dark — color scheme
?accent=#4F46E5 — accent color
?locale=en — language
?primary_color=... — custom button color
Security
Widget accepts only POST from whitelisted domains. URL parameters used only for display settings, not authorization.
Timeframe
Widget with iframe embedding and URL parameter customization: 4–6 working days.