Add booking to your website
Put booking on your own website with the booking widget or a link to your booking page, test it first, and what to use if you don't have a website.
Applies to: Everyone except service providers
Clients can book you without leaving your website. Put the booking widget on one of your pages, or link your site to your Lilo booking page. Both are in Settings → Booking Page.
Put the booking widget on a page
The widget shows the same booking steps as your booking page, inside a page of your own website.
- Go to Settings → Booking Page and scroll to Embed on Your Website at the bottom.
- If you have more than one location, choose one under Location. The widget books that location.
- Select Inline Widget or Direct Iframe. Both put booking inside your page. Direct Iframe uses no script, so it's the simplest choice for most website builders.
- Select the copy button at the top right of the code. You'll see Code copied to clipboard.
- On your website, paste the code where you want booking to appear. Use a block that accepts HTML or embed code.
The Inline Widget code makes the widget 700 pixels tall. The Direct Iframe code makes it at least 600 pixels tall. To change the height, change that number in the code before you paste it.
Add a Book Now button
The Slide-in Widget code puts a Book Now button on your website. It opens booking in a panel that slides in over your page, so clients book without leaving it.
- Go to Settings → Booking Page and scroll to Embed on Your Website.
- If you have more than one location, choose one under Location. The button books that location.
- Select Slide-in Widget.
- Select the copy button at the top right of the code. You'll see Code copied to clipboard.
- On your website, paste the code where you want the button. Use a block that accepts HTML or embed code.
Link your website to your booking page
A link sends clients to your full booking page. Use it for a booking button you add yourself, or if your website builder doesn't accept embed code.
- Go to Settings → Booking Page.
- Under Booking Page, select Copy Link. You'll see Booking link copied.
- On your website, paste it as the link for a button or a line of text.
If you have more than one location, this link asks clients to choose a location first. To send them straight to one location, choose it under Location in Embed on Your Website. Then select the copy button under Or share your booking page directly.
Test it before you share it
- Go to Settings → Booking Page.
- Under Live Preview, select Open Preview. Booking Preview opens a sample website with booking built into the page.
- Select Book Now to see booking in a panel that slides in.
- Select Full Page to open your booking page in a new tab.
- Select the back arrow at the top left to return to your settings.
The preview uses your real booking page, so a booking you finish there is a real appointment.
No website yet?
Your booking page works on its own. It lists your services and prices, and clients book right there. Copy its link with Copy Link and share it in your social profiles, your texts and anywhere clients find you.
Lilo Booth
Your Lilo Booth plan also includes a Lilo Site, a one-page website with your services and booking buttons. See Create your Lilo Site.
How it works
- Your website always shows what's set in Lilo. Changes to your services, hours and booking settings show up there within a couple of minutes. You don't need to copy the code again.
- Clients book the same way as on your booking page, with the same payments, cancellation policy and confirmation emails.
- Turning off Online Scheduling in Settings → Booking Page stops bookings from your website. The widget says you're not accepting bookings at the moment and asks clients to contact you.
- A lapsed trial or subscription also stops bookings from your website. The widget still shows open times, but Lilo turns the booking down when the client confirms.
- Booking uses your colors, font and logo from Settings → Company Branding (see Company branding). Customize Widget can give it its own Primary Color, Accent Color and logo.
- Your booking link, widget code and client portal link all use the same name. It's the part after book/ in your booking link. Changing your client portal's address changes that name, and the old code and links stop working. See The client portal.
- The widget code and the preview are only on the web, not in the Lilo app.
Owners and admins
To send clients to your own thank-you page after they book, use After Booking on the Flow tab of Customize Widget.
Common questions
Lilo Pro
Can I add booking for more than one location?
Yes. Add a widget for each location, choosing it under Location before you copy the code. Or link to your booking page, which asks clients to choose a location.
My website's booking stopped working. Why?
Usually it's one of these:
- Online Scheduling is off in Settings → Booking Page.
- Your trial or subscription has lapsed.
- Your client portal's address was changed, so the code points to an address that no longer exists. The widget shows This page could not be found. Copy the code again and replace it on your website.
Can I hide the Powered by Lilo badge?
No. There's no setting to hide it.
Can I add the widget from the Lilo app?
No. The code is only in Settings → Booking Page on the web.
Online booking rules
Set your time slots, how much notice clients need to book online and how far ahead they can book, and why clients can't book today or further out.
Share a provider's booking link
Copy or share a team member's own booking link, which opens your booking page with them already chosen and shows only their services.