An online booking widget lets customers reserve a time slot on your website instead of calling or messaging you to check availability. For businesses like salons, clinics, consultants, repair shops, and tutors, this cuts down on back-and-forth messages and missed appointments, and it lets people book outside your business hours.
Choosing a Booking Tool
Most booking widgets work as a separate online service that generates a small snippet of code (an embed or iframe) you place on your website. The calendar and bookings themselves live on that service, not on your hosting account, so you don't need any special server setup.
When comparing options, look at:
- Whether it has a free plan that fits the number of staff or services you have.
- Whether it sends automatic SMS or email reminders to reduce no-shows.
- Whether it can sync with a calendar you already use.
- Whether it supports the currency and timezone your business operates in.
Widely used services include Calendly, SimplyBook.me, and Setmore, as well as Google Calendar's own appointment scheduling feature. Any of these will give you an embed code you can add to your site following the steps below.
Adding the Booking Widget to Your Website
If You Use WordPress
- Log in to your booking tool's dashboard and look for an option called Embed, Share, or Add to Website. Copy the embed code or shortcode it gives you.
- In your WordPress dashboard, open the page where you want the booking calendar to appear, or create a new page.
- Add a Custom HTML block (in the block editor) or an HTML element (if you use a page builder like Elementor), and paste the embed code into it.
- Click Update or Publish, then open the page on your live site to confirm the calendar loads and a test booking goes through.
Some booking tools also publish a dedicated WordPress plugin. If one is available for the service you chose, installing it from Plugins > Add New is usually quicker than copying an embed code manually.
If You Use a Different CMS or a Custom-Coded Website
- Copy the embed or iframe code from your booking tool's dashboard, the same way as above.
- Open your hosting account's File Manager (available in both cPanel and DirectAdmin) and navigate to the template or HTML file for the page where the widget should appear.
- Open the file for editing, paste the embed code where you want the calendar to show, and save the file.
- Reload the live page in your browser to confirm the widget appears and works correctly.
This step is the same regardless of which control panel your hosting account uses: both provide a File Manager under Files for editing your site's pages directly.
Since a booking widget collects your customers' names, phone numbers, and sometimes email addresses, it's worth having a clear privacy notice on your website explaining how that information is used.
Testing Before You Rely on It
Before announcing the new booking option to customers, make a few test bookings yourself from a phone and a computer. Check that confirmation emails or SMS messages arrive, that the time zone shown matches your business hours, and that cancelling or rescheduling a test booking works the way you expect.
If you haven't yet added a privacy policy covering the personal details your booking widget collects, see How to Add a Privacy Policy and Cookie Consent Notice to Your Website.