# 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 Source: https://heylilo.co/help/booking/add-booking-to-your-website 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](https://heylilo.co/help/booking/online-booking-page). Both are in [**Settings** → **Booking Page**](https://app.heylilo.co/dashboard/settings?tab=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. 1. Go to [**Settings** → **Booking Page**](https://app.heylilo.co/dashboard/settings?tab=booking-page) and scroll to **Embed on Your Website** at the bottom. 2. If you have more than one location, choose one under **Location**. The widget books that location. 3. 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. 4. Select the copy button at the top right of the code. You'll see **Code copied to clipboard**. 5. 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. 1. Go to **Settings** → **Booking Page** and scroll to **Embed on Your Website**. 2. If you have more than one location, choose one under **Location**. The button books that location. 3. Select **Slide-in Widget**. 4. Select the copy button at the top right of the code. You'll see **Code copied to clipboard**. 5. 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. 1. Go to **Settings** → **Booking Page**. 2. Under **Booking Page**, select **Copy Link**. You'll see **Booking link copied**. 3. 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 1. Go to **Settings** → **Booking Page**. 2. Under **Live Preview**, select **Open Preview**. **Booking Preview** opens a sample website with booking built into the page. 3. Select **Book Now** to see booking in a panel that slides in. 4. Select **Full Page** to open your booking page in a new tab. 5. 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. **Applies to:** 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](https://heylilo.co/help/lilo-sites/create-your-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](https://heylilo.co/help/booking/booking-page-settings) 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](https://heylilo.co/help/settings/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](https://heylilo.co/help/booking/client-portal). - The widget code and the preview are only on the web, not in the Lilo app. **Applies to:** 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 ### Can I add booking for more than one location? **Applies to:** Lilo Pro 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.