How visitors book a call on our site

Booking a call is the first real step in any website build with the studio, so the flow needed to feel like part of the site rather than a bolted-on page. Visitors land on the website builds page, click Schedule a call, and jump to a section that holds our own booking component. It offers one thing: a 60-minute video call to talk through what you need before any quote gets written. Everything, from picking a day to the confirmation screen, happens in place without leaving the page.

Behind the component sits a small booking API with two routes. A request to the availability route reads busy time from the studio calendar and returns open slots for the next 30 days. The rules live in one config file: weekdays only, 7:00 to 17:30 Central time, calls starting on the hour, and at least 48 hours of notice. The browser then groups those slots by date in the visitor's own time zone, which it detects on the client. It also offers a picker for common zones and a 12h/24h toggle.

Picking a time moves you to a short form with your name, your email and an optional note. Submitting it posts to the book route, which validates every field, caps the request body at 10,000 bytes, and checks a hidden honeypot field plus an optional bot challenge. The server then confirms the start time is a genuine slot under the current rules and re-checks the calendar for that exact hour. Only then does it create the event with a video link and send the invite. If the slot was just taken, the form says so and reloads the open times.

Getting here took a detour. The first version embedded a hosted appointment page in an iframe, and the commit history records it failing with a refused-to-connect error. The short link answered with an X-Frame-Options header that blocked framing. Pointing the iframe at the page the link redirected to fixed that, and a later change replaced the embed with the component described above. That put the layout, copy and error states in the site's own code. One follow-up fix measures the calendar step's height and holds it on the form step, so the layout no longer jumps when you pick a time.