← Back to all articles

A Booking Button on Your Website: Clients Book Without Leaving Your Site

#website widget #booking button #online booking #website #booking system #small business
A Booking Button on Your Website: Clients Book Without Leaving Your Site

You have your own website — a hair salon, a yoga studio, a clinic. A client reads about what you offer and then looks for a way to book. They find a link in the menu, land on another page and have to get their bearings all over again. Every extra step is a place where some people drop off.

That is why micali.online now has a website widget: a booking button you set up in the app and add to your website with a short code. The button floats in a corner of every page, and a click opens a booking window right on your website — with a calendar of your events and services. The client picks a time, fills in their details and confirms, without ever leaving your site.

Set up the button in a few clicks

Open Website widget in the app’s menu (a root admin sets it up). You choose:

  • the button textBook now or Make an appointment, for example,
  • the color — to match your website; the text color on the button adjusts itself so it always stays readable,
  • the position — bottom right or bottom left,
  • what a click does — open the booking window, or take the client to your booking page,
  • the language of the booking window — the visitor’s browser language, or a fixed one.

Right under the settings there is a preview: click the button and the real booking window opens with your events and services. Below it is the code, ready to copy.

The booking window, right on your website

The window takes the color of your button and has two tabs:

  • Events — a month calendar with the days that have dates marked. The client clicks a day, sees its dates under the calendar and picks one. If a month is empty, the window offers a jump to the next date.
  • Services — the client picks a service and a procedure, then a day in the calendar of free days, and a time.

Then they fill in their name, email and phone, the number of seats and your form if there is one — just like on the booking page. On a phone the window opens full screen.

Or just a link to your booking page

If you want clients to see everything you offer — prepaid plans and rooms included — choose the redirect instead. The button then opens your Micali booking page in a new tab.

How clients confirm

Nobody is signed in inside the window, so a booking works exactly like one made on your booking page without signing in: the client gets an email with a link, and the booking is valid once they open it. Until then you see it under Awaiting confirmation, and you can confirm it for the client when needed. The client picks a prepaid plan on the confirmation page.

The settings live in the code

The text, color, position and language are written into the code you paste, so the button on your website never changes by itself. When you want to change something, change it in the app, copy the new code and replace the old one. Micali remembers your last settings, so you do not start from scratch.

It will not slow your website down

The code on your website is only a few kilobytes and draws nothing but the button. The booking window loads only after a click, and while it loads the client sees a loading indicator. The button is kept apart from your website’s styles, so your theme cannot break it and it cannot break your theme.

How to start

  1. Open Website widget in the menu.
  2. Set the text, color, position and behavior of the button and try it in the preview.
  3. Click Copy code.
  4. Paste the code into your website just before the closing </body> tag — in WordPress, Wix, Webflow or Squarespace there is a place for custom code or an HTML block for this.

You will find the details in the help center.

Try micali.online