TillableHelp centreSign in

Embed booking on your website

Copy-paste code that puts booking on your own site. Choose a booking bar, inline booking or a floating button.

You can add booking to your own website with code you copy and paste. It uses your branding.

The code is ready once your booking page has a web address. You never type one in. It is created when you claim your web address and switch online bookings on (see Your booking page).

To get the code, go to Bookings → Booking settings → Your booking page. In the Public booking page card, click Embed on your website (it says Get code).

The four options

  • Booking bar: a row with date, guests and booking type that sits on your own page. A guest fills it in and booking opens over your page with their choices already filled in. They never leave your site. It uses your website's own font and your brand colour.
  • Inline on a page: the booking steps appear right where you paste the code. The frame resizes itself to fit.
  • Floating button: adds a "Book a table" button in the corner of your page. It opens booking in a pop-up.
  • Just the link: no code. Share your booking address anywhere, for example your-venue.tillable.app/book. It only shows if you have claimed a web address.

Each option has a Copy button. The Live preview at the bottom shows the booking steps as they look inline on a page. It does not show the booking bar. To check the bar, look at your own page after you paste it.

Where to put the booking bar

The bar appears exactly where you paste the code. Paste it into the body of the page, at the spot where you want the row. Near the top of your bar and restaurant page is the usual spot.

Do not paste it into a site-wide header or footer code field. In a header field the bar ends up hidden. In a footer field it lands at the very bottom of the page. If you want booking on every page, put the Floating button in your site-wide footer code instead.

Your website editor needs a block that runs code:

  • WordPress block editor: use the Custom HTML block. Do not use the Code block. It shows the code as text on the page.
  • Avada: use the Code Block element.
  • Elementor: use the HTML widget.

In WordPress, log in as an Administrator. With a lower role, WordPress can strip the script out when you save the page.

The bar fills the width it is given and stacks on a phone. The booking types it offers are your own sittings, so a guest who picks Lunch sees lunch times.

Heads up

Some site builders put your code in a small box. Wix (Embed HTML) and GoDaddy (the HTML section) do this. The booking pop-up then opens inside that box and gets cut off, so the booking bar and the floating button do not work well there. Use Just the link on the builder's own button instead, or use Inline on a page in a tall box.

What's next