· How-To

Add a Booking System Without Breaking Your Site | Airo AI Builder

TL;DR

You can add a full booking system to an existing Airo AI Builder site without touching your current pages. Three prompts get you: service selection with pricing, scheduling logic with availability rules, email confirmations, and an admin dashboard. The key is naming your constraints upfront (“do not change existing pages”) and describing your design system so the new pages match.

What Problem Does This Solve?

Your site works. Customers find you. But the “Book Now” button goes to a contact form, and every appointment happens over phone or email. That is hours of admin work every week you should not be doing.

You need a real online booking system: service selection, availability calendar, confirmation emails, and a dashboard to manage appointments. But you do not want to rebuild your site or risk breaking what already works.

Most people get stuck here. They either pay for a third-party booking widget that does not match their design, or they start a new project and lose their existing pages. Neither is necessary.

Who Is This For?

This approach works for any service business with an existing Airo AI Builder site:

  • Pet groomers who need appointment scheduling with behavioral notes
  • Salons and spas with multiple service tiers and durations
  • Consultants and coaches booking discovery calls or sessions
  • Fitness instructors managing class or 1:1 bookings
  • Home service providers (cleaners, handymen, photographers) scheduling jobs

If you take appointments and your current site sends people to a contact form, this is for you.

How Do You Add a Booking System in Three Prompts?

The goal is to add a booking system to your site, not rebuild your site with a booking system. That distinction matters for how you prompt.

Here is the structure:

  1. Prompt 1: Build the booking page (service cards, form fields, design matching)
  2. Prompt 2: Add the backend logic (scheduling rules, email confirmations, admin dashboard)
  3. Prompt 3: Polish for UX and accessibility (helper text, time slot grouping, personalized emails)

Each prompt builds on the last. You test as you go. If something breaks, you know exactly which prompt caused it.

What Goes in Prompt 1? The Booking Page

Your first prompt creates the customer-facing booking page. Include these elements:

Business context:

  • Who runs the business and what it feels like (for example: “fear-free pet grooming, no cage dryers, no rushing”)
  • Where services and pricing already exist on your site

What the form needs:

  • Services with duration and price
  • Required fields (name, email, phone, pet details)
  • Any special fields (for example: “behavioral notes” for a pet grooming business)

The hard constraint:

Do not change the design or layout of any existing pages.

This single line saves you from debugging why your homepage suddenly looks different.

Design matching:

Match this page’s exact look to the existing site. Coral primary button color, teal accent, cream background, rounded cards, same typography.

Even though Airo AI Builder built your site, restate the design system in the prompt. The builder does not always remember previous styling decisions. Explicit is better than hopeful.

What Goes in Prompt 2? The Scheduling Logic

The booking page exists, but it does not do anything yet. Prompt two adds the backend that makes it a real appointment scheduling system:

Business hours as rules:

Tuesday through Friday 9am to 6pm, Saturday 9am to 4pm, closed Sunday and Monday. Toronto time.

Write hours as rules, not hints. The calendar should only show available slots.

Service duration blocking:

Each service duration blocks the calendar for exactly that length. One appointment at a time.

This prevents double-bookings. A 90-minute full groom blocks 90 minutes, not an arbitrary hour.

Email confirmations:

Immediately email confirmation to the customer and to [owner’s email].

Both parties get notified. The customer knows their booking went through. The owner does not have to check a dashboard constantly.

Admin dashboard:

Create an admin dashboard at /admin/bookings so I can see and manage incoming appointments.

This is where you approve, reschedule, or cancel bookings. The builder will create login credentials for you.

What Goes in Prompt 3? Polish and Accessibility

The system works. Now make it feel right for your customers.

Helper text that positions your brand:

Add helper text under the behavioral notes field: “Share anything that helps us care for your pet. Nothing here changes whether we take the booking.”

That sentence is the difference between a form that screens for “problem” customers and a form that says “bring us your anxious rescue, we’ll meet them where they are.” Write the sentences you want users to read. Do not hope AI invents your brand voice.

Sensory-aware time slot grouping:

Label morning slots as “Quieter mornings - usually a calmer salon.”

If your business serves customers who care about sensory environment (parents with kids, pet owners with anxious animals), surface that information in the booking flow.

Personalized confirmation emails:

Subject line should read: “[Pet name] is booked in for [service] on [day].”

People scan their inbox for their pet’s name, not your business name. Small detail, big difference in whether the email gets opened.

Optional photo upload:

Add optional photo upload for first-time clients, so staff can recognize the pet at the door.

This reduces friction at check-in and makes the customer feel known.

Why Does This Work Without Breaking Your Site?

The key is the constraint-first approach:

  1. “Do not change existing pages” - You said it upfront, so the builder treats existing pages as read-only
  2. Design system restated - The new pages match because you described the palette, not because the builder remembered it
  3. Incremental prompts - Each prompt adds one layer, so you can test and catch issues early

If you tried to do all of this in one prompt (“add a booking system with scheduling and emails and an admin dashboard and make it match my design and don’t touch anything else”), you would get a compromise. Breaking it into three prompts gives each piece room to be built correctly.

What Do You End Up With?

After three prompts, your no-code booking system includes:

  • Booking page with service cards, pricing, and a form that captures everything you need
  • Availability calendar that respects your business hours and blocks time correctly
  • Email confirmations to both customer and owner
  • Admin dashboard where you can view, approve, reschedule, or cancel appointments
  • Zero changes to your existing homepage, about page, gallery, or contact page

The site that was already working keeps working. The online booking system slots in alongside it.

Three Things to Remember

  1. Name the hard constraint upfront. “Do not change existing pages” is not a suggestion. Put it in prompt one.

  2. Describe your design, do not assume the builder remembers it. Even if Airo AI Builder created your site, restate colors, typography, and card styles in the prompt.

  3. Write the copy you want users to read. Helper text, email subjects, and time slot labels are not styling decisions. They are brand positioning. Write them yourself.

Start Building

Try Airo AI Builder - 50 free credits to get started.

Join the community on Discord

Watch the full build on YouTube

Frequently Asked Questions

Can I add a booking system to a site I already built in Airo AI Builder?

Yes. Use the constraint “do not change the design or layout of any existing pages” in your first prompt. The builder will add new pages without modifying what you already have.

Do I need to rebuild my site to get online booking features?

No. The booking system is additive. Your existing pages stay exactly as they are. The new booking page, admin dashboard, and email logic are created alongside them.

How do I make sure the new pages match my existing design?

Restate your design system in the prompt: colors, typography, card styles, button shapes. Even though the builder created your site, explicitly describing the palette produces more consistent results.

Can the no-code booking system send email confirmations?

Yes. In your prompt, specify who should receive confirmations (customer, owner, or both) and what the subject line should say. Airo AI Builder will set up the email flow automatically.

How do I manage appointments after they come in?

Ask for an admin dashboard at a specific route (for example /admin/bookings). The builder will create a login-protected page where you can view, approve, reschedule, or cancel appointments.

What if I want different availability for different services?

Specify that in prompt two. For example: “Full groom appointments only available Tuesday through Friday. Quick trims available all open days.” The scheduling logic will respect per-service rules.

Can I add appointment scheduling to a site I did not build in Airo AI Builder?

If you are starting fresh or rebuilding, yes. If you have an existing site on another platform, you would need to recreate it in Airo AI Builder first, then add the booking system using this approach.

Is this different from using a third-party booking widget?

Yes. Third-party widgets embed via iframe and often look different from your site. This approach builds native booking pages that match your design system exactly, with no external dependencies or monthly widget fees.