To add online booking to your website, choose a booking tool that matches what you sell (a scheduling tool such as Calendly or Cal.com for calls and appointments, a reservation platform for restaurant tables, a class booking system for studios), then link a clear "Book" button on your site to your booking page. Embed the calendar inside your own page only when keeping visitors on your site really matters and the embed works well on a phone.
Start with what you are actually booking
The booking tool matters more than the website. A coach booking video calls and a salon booking a 90-minute color appointment with a specific stylist need different software, and no amount of web design fixes the wrong choice. Choose it before you build or redesign the site, by hand or with FNJ's AI website builder for small businesses, so every button has somewhere to go.
| What you book | Typical businesses | Tool type | What to check first |
|---|---|---|---|
| Calls and meetings | Consultants, coaches, agencies, tutors | Scheduling link tools such as Calendly or Cal.com | Calendar sync, buffers, time zones, intake questions |
| Services with staff and set durations | Salons, clinics, physiotherapists, personal trainers | Appointment software for service businesses | Staff calendars, service lengths, deposits, reminders |
| Tables | Restaurants, bars, cafes | Restaurant reservation platforms | Party size, table rules, no-show policy, link from your Google listing |
| Classes and group sessions | Yoga studios, workshops, tours | Class and event booking tools | Capacity, waitlists, class packs |
| Dates and stays | Guesthouses, equipment rental | Booking engines with date ranges | Availability sync with other channels |
What to check before you commit to a tool
Most of these questions are answered on a tool's features page or in a short trial booking. Run through them before you put the link on your site, because switching later means updating every button, listing and bio.
- Does it sync both ways with the calendar you already use?
- Can you set buffers between bookings, a minimum notice period and how far ahead people can book?
- Does it show times in the visitor's time zone, if your customers are remote?
- Does it send reminders, and can customers cancel or reschedule themselves within your policy?
- Can it take deposits or payment, if you need that?
- Does the booking page carry your logo and colors well enough?
- Is the booking flow easy on a phone? Book a test appointment yourself on one.
- Where is your customers' data stored, and can you export it?
- Does it give you both a public booking link and an embed option?
Link or embed?
Scheduling tools such as Calendly and Cal.com give you a public booking page and also offer embeds, including an inline calendar that sits inside your page and a pop-up that opens from a button. Other booking platforms vary, so check what yours offers. Here is how the options compare:
| Link to the booking page | Inline embed | Pop-up embed | |
|---|---|---|---|
| Setup | Paste a URL into a button | Paste embed code into a page | Paste embed code and attach it to a button |
| Effect on page speed | None | Loads third-party code on that page | Loads third-party code |
| Phone experience | The tool's own mobile page | Can feel cramped, with scrolling inside scrolling | Opens over your page; test it |
| Visitor leaves your site | Briefly | No | No |
| Risk when the tool changes its code | Low | Higher | Higher |
For most small business sites, link. Booking is a focused task, and visitors don't mind landing on a dedicated booking page as long as the button tells them where it leads. Embed when booking is the main job of your website, and give the embed its own page, such as /book, so the third-party code only loads there.
If you embed an iframe further down a page, add loading="lazy" so it doesn't slow the first screen; web.dev's guide to lazy-loading iframes explains why. In a Next.js project, load a booking tool's script with the Next.js Script component rather than a raw script tag, so you control when it loads.
Where to put the booking button
A booking button only works if people find it at the moment they decide. Put it in these places:
- The header, on every page. A button at the right end of the navigation. On phones, keep it visible next to the menu icon rather than tucked inside the menu.
- The hero. It should be the primary action on the Home page, styled as the most prominent button.
- Each service or menu card. If your tool has a separate link per service, use it, so a visitor who clicks "Book" under "Deep tissue massage, 60 minutes" doesn't have to pick it again.
- The end of every service page, where a reader who has finished reading is ready to act.
- The Contact page and the footer, next to your phone number for people who prefer to call.
Write labels that say exactly what happens: "Book a table", "Book a 30-minute call", "Check availability", "Book a haircut". Avoid vague labels like "Get started" or "Submit", which make people wonder what they are committing to.
Restaurants have extra needs: opening hours and a phone number right next to the button, a note on walk-ins, and a route for large groups. The restaurant website must-haves post covers the rest of what diners look for, and FNJ has a page on building restaurant websites with AI.
Make booking work on phones
Many visitors will book from a phone, often while doing something else. Test the whole path on a real device:
- Open your site on mobile data, not office Wi-Fi.
- Find the booking button without scrolling on the Home page.
- Tap it, choose a service, pick a time and confirm.
- Check the confirmation email: correct time, address or call link, an easy way to cancel or reschedule, and an option to add it to a calendar.
- If you embedded the calendar, check that it fits a narrow screen, that date pickers aren't cut off, and that the page doesn't trap your thumb in a scrolling box.
Add a phone link as a fallback: <a href="tel:+15551234567">Call us</a>. Some customers will always prefer to call, and a failed booking shouldn't become a lost one.
Keep one source of truth
Double bookings happen when availability lives in several places. Take bookings through one system, and send every channel to it:
- Google Business Profile. Google lets businesses add appointment and reservation links to their profile. Use the same booking link you use on your site.
- Social profiles. Link your bio to the same booking page.
- Email signatures and printed materials. Point them to your site's booking page or the same booking link.
When your hours change, update the booking tool first, then your website and Google profile, so nobody books a slot you can no longer offer.
Adding booking to a site built with FNJ
FNJ's AI website builder designs marketing websites. It does not build booking systems, payments or customer accounts; your booking tool handles those. What the builder can do is design the whole site around the booking action. Here's the workflow:
- Set up the booking tool first and copy your public booking link, plus per-service links if you have them.
- Name the action in your build prompt, and attach the reference screenshot or link the builder needs to start a new site. For example: "A website for a two-chair barbershop in Leeds. Pages: Home, Services and Prices, About, Contact. Primary action: book an appointment. Put a Book now button in the header and hero, and show opening hours and the phone number next to it."
- Point the buttons at your booking link. Ask in plain words, such as "Link every Book now button to our booking page," and include the URL.
- Export and deploy to your own hosting, then run the phone test above.
- Embed only if you need to. If you want an inline calendar, add the tool's embed code to a booking page in the exported HTML or Next.js code.
A contact form works the same way. If you need one alongside booking, see how to add a contact form to a static website.
Where FNJ fits
If your website's main job is to get people booked, the design work is getting the Book button, the hours and the services in front of visitors on every page and every screen size. You can ask for exactly that with FNJ's AI builder for small business sites, which designs every page at desktop, tablet and phone widths, with your booking tool linked from the buttons and the exported code living on your own hosting.
Frequently asked questions
Should I embed my booking calendar or link to it?
For most small business sites, link to it. A link adds no scripts to your pages, works on any host and sends visitors to the booking tool's own page; embed only when booking is your site's main job, ideally on a dedicated booking page.
Where should the booking button go on my website?
Put it in the header of every page, as the main button in the hero, on each service card, at the end of each service page, and on the Contact page. On phones, keep it visible next to the menu icon.
Can I add online booking to a static website?
Yes. Booking tools host the calendar, availability and confirmations themselves, so a static site only needs a button linking to the booking page or a pasted embed code.
Does FNJ's AI website builder include online booking?
No. FNJ builds marketing websites and does not include booking, payments or log-ins. You link a booking tool from a button on the site, or add the tool's embed code to the exported code.