How to add appointment booking to your website, step by step

To add appointment booking to your website, set up one meeting type, make sure its open times match your calendar, then add a booking button or embed code to the right page. Finish by booking a test appointment on desktop and mobile. Most of the work is in the setup and testing, not the code.

The common mistake is starting with an empty block in your page builder and hunting for code to fill it. Get the meeting type working first. A nice-looking embed won't fix an unavailable host, an unclear offer or a confirmation that sends people to the wrong meeting.

We'll use one example throughout: a small consultancy adding a 30-minute website planning call to its services page. The meeting, wording and tests are examples, not results from a live Caletus setup.

1. Choose how to add appointment booking to your website

A booking button sends visitors to a separate scheduling page. An embed puts the booking calendar inside your own page. Start with a link when you want something simple that's easy to maintain. Choose an embed when the page has enough room and context for the whole booking flow. Our comparison of booking links vs embedded schedulers goes deeper.

Caletus's scheduling features include website embedding, so you can show a Caletus booking calendar on your own site.^[1]

The embed code Caletus gives you works as an inline calendar, a full-page section or a pop-up button. Always use the code for your own meeting type instead of adapting another vendor's example.

2. Set up one meeting type before it goes on your site

1. 1Pick the appointment people should book, like a consultation or a demo, not a list of internal event names.
2. 2Write a specific title, length and short description of what the visitor gets.
3. 3Choose the host and the meeting location.
4. 4Keep booking questions to what you need to prepare, and mark optional ones clearly. Our guide to appointment booking form questions has examples.
5. 5Open the direct booking page and book a test appointment before you touch the website.

The consultancy's description could read: "Bring one website problem. We'll look at the current page, find the main obstacle and agree on a next step." Don't promise a full audit in a short intro call unless you really deliver one.

Caletus's pricing page puts your own branding, your own domain and removing the Caletus badge on the Professional and Enterprise plans. Check what your plan includes before you design the page around a fully branded calendar.^[2]

3. Make the open times match your real calendar

Caletus lets you choose which calendars to check for conflicts, where new bookings go, buffers, minimum notice and date overrides. Check those settings before you share the meeting type, especially if the host uses more than one calendar. The availability management page explains each setting.^[3]

For the planning call, decide which hours the consultant can offer and how much prep time each call needs. For example, a 30-minute call with 15 minutes on either side fills a day very differently from back-to-back half hours. Set it on purpose instead of copying someone else's schedule.

Then test it. Add a dummy event to a calendar that should block time, and check that the slot disappears from the booking page. Remove the dummy event afterwards. Check a time outside working hours and a planned day off too, and confirm that every connected calendar you rely on is actually set to block time.

4. Get your website booking embed code

Use the share or embed option on your meeting type, or ask Caletus support for current instructions. Make sure the code matches the right meeting type. This article has no generic Caletus iframe or script on purpose, because a guessed address isn't a tested integration.

Ask whoever runs your website where the snippet belongs. Some embeds are a single page element, and others also need a script. Paste the code exactly as you got it, without renaming anything or adding admin links. Public booking code should never contain a password or a private API key.

Keep an unchanged copy of the snippet and note where you installed it. If something breaks, compare the live version with that copy. Several small fixes made while guessing can leave you testing a different setup from the one the vendor supports.

5. Give the booking calendar enough room

Put a short heading and a one-line offer above the booking area, and clear unrelated promos out of the way. Add a visible backup link outside the widget, like "Open the booking page directly", so visitors can still book if the embed doesn't load. On WordPress, follow our guide to adding appointment booking to WordPress.

Check the whole flow on a narrow screen, from the first calendar view to the confirmation. The question form and confirmation may need more space than the calendar. Look for cropped buttons, sideways scrolling, a scroll area inside another scroll area, and a phone keyboard hiding the next button.

If the embed uses an iframe, give it a clear, descriptive title. An iframe is a separate page inside your page, so the booking controls inside it need to work on their own too. A label on the outer frame doesn't make the whole booking flow accessible.^[4]

Use HTTPS for your website and the embed. Browsers can block insecure content on secure pages, so treat a mixed-content warning as a real problem rather than a cosmetic one.^[5]

6. Test website appointment booking from first click to confirmation

Use made-up contact details you control and a safe test slot. Note the device, browser, page address, meeting type and time of each test. Checking the confirmation in a real inbox tells you more than a success animation. Delete or label test bookings so they don't end up in your reports.

In the confirmation, check the title, length, time zone, location, prep notes and host. Open the meeting link. If the meeting is paid, test payments separately with your payment provider's test process, since a free consultation test won't cover checkout.

7. Fix a blank or broken embed safely

A blank embed is often a permissions problem on one side or the other. Your site's Content Security Policy can limit which frames it loads, through frame-src. The booking service can limit which sites may frame it, through frame-ancestors. Whoever controls the blocking side needs to fix it.^[6][7]

Don't remove security headers, turn off browser protections or ask visitors to change their settings to make an embed work. Send the exact error to the right team, and keep the backup booking link visible while they fix it.

Check whether the final screen means booked or just requested

Read the final screen carefully during your test. Some setups accept a request before it becomes a confirmed appointment, and your page should describe what actually happened. Don't write "You're booked" if the tool has only received an inquiry. And don't ask someone to submit again when you don't know whether the first attempt worked.

For the consultancy, launch means one confirmed meeting with correct joining details. If the result is unclear, check the booking record and inbox before submitting again. Give visitors a way to get help outside the widget, like a named contact email. Success and error messages should come from the booking tool itself, not from decorative text added by your designer.

8. Publish, then give one person ownership

Swap the test placement for the live page only after the booking checks pass, and keep a saved version you can restore. Tell the person taking the appointments when the page goes live, what the offer says and which questions visitors have already answered.

Count confirmed appointments separately from button clicks or widget loads. A click shows interest, but it isn't a booking. Filter out test bookings and duplicates so they don't inflate the numbers, and decide what a useful appointment looks like before you celebrate more volume.

Make one person responsible for rechecking the page after meeting type changes, website redesigns, vendor updates or a host leaving. Keep a short list of every page that has the widget, so a renamed meeting type doesn't leave an old booking form on a forgotten campaign page.

Start with one meeting type and one page. Get the direct booking working, add the embed code, and follow a real test appointment all the way into the calendar. Once that works every time, you have a booking page worth promoting.

• website booking embed
• embed appointment scheduler
• website appointment booking
• booking widget setup