Skip to Content
Online BookingEmbed in Your Website

Embed Bookings in Your Website

If you already have your own website, you do not need to send clients somewhere else: you can embed the booking steps inside it. The client picks a service, a day and a time and confirms the appointment without leaving your site, and the booking lands in your calendar like any other.

Available on every plan. On the Free plan a small “Bookings by Timeblu” badge appears under the booking steps; on the Max plan it is not shown.

Getting your code

  1. Go to More > Booking Setup and open the Setup tab.
  2. Under your booking link, click Embed in your website.
  3. Choose how to show it:
    • On the page: the booking steps appear right where you paste the code and adjust their height on their own. Best for a “Book” or “Appointments” page.
    • Button: a button that opens the booking steps full screen over your website, like the mini-site. Use it in the header, on the homepage or on each service page.
  4. Adjust the options (see below) and click Copy code.
  5. Paste the code into your website.

Options

  • Language: the language the booking steps are shown in. Defaults to the language of your public booking page.
  • Service: pick a service and the booking opens straight on it, skipping the list. Ideal for the page you dedicate to each service: generate one code per service.
  • Button text and Button color (Button mode only): so it matches your site’s design.

The colors and the rest of the look of the booking steps are the ones you already set up for your booking page.

Where to paste it

The code is HTML. Every platform has a block for it:

WordPress

In the page editor, add a Custom HTML block and paste the code into it. If you use Elementor, drag the HTML widget onto the page and paste the code there.

On WordPress.com (the version hosted by WordPress), the code only works on plans that allow plugins: the others strip scripts. A self-hosted WordPress site has no such limit.

Wix

  1. In the editor, click Add Elements → Embed Code → Embed HTML.
  2. Click Enter Code, paste the code under Add your code here (https only) and click Apply.
  3. Stretch the element to about 900 px tall (and about 1,200 px in the editor’s mobile view), so the tallest step, date and time, fits.

On Wix, use the On the page mode. Wix shows the code inside a fixed-size box, so Button mode’s full-screen window would be stuck inside that box. If you would rather have a button, add a Wix button that links to your booking link (it opens your Timeblu booking page).

Squarespace

  1. Edit the page, click Add block and choose Code.
  2. Open the block with the pencil icon, keep HTML selected and paste the code.

Squarespace only runs the code on the Core plan or higher. It does not show on the Basic plan.

Shopify

In Online Store → Themes → Customize, add a Custom Liquid section where you want the booking to appear and paste the code into it. Some themes do not include that section: if so, ask whoever maintains your store.

Custom site

Hand the code to whoever maintains it: it goes inside <body>, where you want the booking or the button to appear.

Paste the whole code, including the line that starts with <script. Without it the booking steps do not appear (the button still works: it opens your Timeblu booking page).

What your client sees

  • Only the booking steps: no Timeblu header or footer, over your own site’s background.
  • Button mode fills the screen, on a computer and on a phone, with a close button at the top (the Esc key closes it too).
  • Card deposits work the same as on your booking page.
  • Confirmation, reschedule and cancellation emails link to booking.timeblu.com, as always.

Frequently asked questions

Do I have to turn off my booking page or mini-site? No. Your booking link keeps working; you can use both at once.

Nothing shows up, only a “booking unavailable” message. Your online booking is turned off or you have no visible service. Check the steps in Booking Setup: until they are all complete, the Embed in your website dialog warns you too.

Do client accounts work inside my website? Yes. As on your booking page, clients without an account type their details when they book, and clients with one click Have an account?, get a code by email and their details fill in. Only two things change: on your booking page the client stays signed in for 30 days, while inside your website the browser does not allow it, so they sign in with the code on every visit; and the offer to create an account at the end of a booking only appears on your booking page.

Can I track bookings in my analytics tool? Yes. When a client completes a booking, your page receives the timeblu:booked event. Whoever maintains your site can use it to record the conversion:

document.addEventListener('timeblu:booked', () => {
    // for example: gtag('event', 'booking')
})

I changed my username. Copy the code again and replace it on your site: the old one points to your previous link.

Last updated on
Printable QR PosterBooking Settings