To add online booking to your website without it looking like a plugin, embed a self-hosted scheduler and use CSS clipping to crop out its header, footer, and side chrome so only the calendar shows. The container inherits your site background, so there is no visible boundary.
If you run a service business (dental practice, law firm, consulting, wellness), the single most important thing your website can do is let clients book an appointment. Not fill out a form and wait for a callback. Book. Right now. One click.
The problem is that most booking tools look terrible when embedded on a professional website. They show third-party branding, grey backgrounds, and padding that screams "we bolted this on." Your site took weeks to design. The booking page should not undo that work.
We use Cal.com, an open-source scheduling platform that we self-host. Self-hosting means no per-seat monthly fees and full control over the embed behavior. The agent provisions the account, creates event types with correct durations and buffer times, and sets availability to match business hours. Google Calendar connects via OAuth so the booking page only shows genuinely available slots.
The key technique is CSS clipping. We wrap the Cal.com iframe in a container with calculated dimensions that crop out the header, footer, and side chrome. The result is just the calendar grid and time slots, nothing else. The embed container inherits your site's background color so there is no visible boundary.
Content Security Policy headers are where most implementations fail. Cal.com loads from a separate domain, so your CSP must include the booking domain in the frame-src directive. Without this, the iframe loads but appears blank in production. This failure is silent, meaning you will not see an error message.
The final result is a booking experience visitors cannot distinguish from a native feature. The calendar loads fast, detects the visitor's timezone automatically, and every CTA on the site routes to the same /book page. No lead forms. No email chains. One click to get on the calendar.
We deploy this pattern to every client site from a shared component. When we fix a clipping issue, the fix ships to all 31 sites in one batch. This is the kind of infrastructure that makes the difference between a site that converts and a site that just looks good.
Topics
Frequently asked
Why do most booking embeds look like cheap plugins?
Most booking tools show third-party branding, grey backgrounds, and padding that screams the feature was bolted on. Your site took weeks to design, and a default booking page undoes that work.
How do you make a booking embed look like part of the site?
The key technique is CSS clipping. You wrap the scheduler iframe in a container with calculated dimensions that crop out the header, footer, and side chrome, leaving just the calendar grid and time slots. The embed container inherits your site background color so there is no visible boundary.
Why does my booking iframe load blank in production?
Content Security Policy headers are where most implementations fail. The scheduler loads from a separate domain, so your CSP must include the booking domain in the frame-src directive. Without this, the iframe loads but appears blank, and the failure is silent with no error message.
Does the booking page detect the visitor timezone?
Yes. The calendar loads fast, detects the visitor timezone automatically, and every CTA on the site routes to the same /book page. No lead forms, no email chains, one click to get on the calendar.
Read next
Want to see these systems in action?
Start with a conversation. We will walk through how these workflows apply to your business.
Get your AI Roadmap