Setting up bookings

How to design your booking pages (layout, filters, previews and rebuilding)

October 17, 2026
How to design your booking pages (layout, filters, previews and rebuilding)

In TeleportHQ, you design the booking pages on the canvas like any other page. The list of what can be booked also has settings of its own: where its filters sit (Top bar or Left sidebar), which filters it offers, its search and sort, and its layout. Change them in Booking Page Settings: click the Booking page settings pill above the list, or open Bookings → Booking Settings → Booking Page. Each change applies to the page at once. To get the current design back, rebuild the booking pages.

Before you start

Steps

1. Open Booking Page Settings

  1. In the left sidebar, click Bookings.
  2. In the panel header, click the gear (Booking Settings). The Bookings Setup drawer opens.
  3. On the Booking Page row ("Search, sort, filters, the grid or list views and the layout of the page that lists your items."), click Booking Page Settings. The settings open beside the drawer. View on Canvas at their top, left of the x, shows the booking page on the canvas with the settings still open; it is greyed out while the canvas already shows that page.

Or open the book-online page on the canvas and click the Booking page settings pill above its list of items.

The TeleportHQ canvas showing the book-online page, with the Booking page settings pill above the list highlighted

2. Choose the filters

If AI built your booking site, it already chose the filters, the search and sort and the layout to suit your items, so yours can start differently from the values below. Change any of them here.

Under Filters ("Drag to set the order visitors see them in. The options come from your items, so they follow every change."):

  1. Choose where the filters sit: Top bar (above the items, the default) or Left sidebar.
  2. Switch on the filters visitors need. Only Category is on at first.
    • Category: your item categories, such as Rooms or Treatments, with how many items each.
    • Type: appointments, stays or rentals, useful when you offer more than one kind.
    • Price: a lowest and a highest price.
    • Guests: shows only items that take at least that many people.
    • Extras: the extras your items offer, such as Breakfast or Parking.
  3. To change their order, drag a filter by its grip, or click the grip and use the arrow keys.
  4. Optional: switch on Category tabs, a tab per category above the items. It suits a business with a few kinds of items.

Under Search and sort, Search (a search box over the items' names, descriptions and places) and Sort are both on at first. Visitors sort by your own order first, then by name, price or most guests.

The Booking Page Settings of TeleportHQ Bookings, with the Filters and the Search and sort sections highlighted

3. Choose the layout

Under Layout:

  1. Item views: Grid of cards (on at first) and List of rows (one item per row, its picture beside its details). At least one view stays on. With both on, choose the Default view, Grid or List: visitors switch with a toggle beside the search.
  2. Card layout: Grid, Spotlight, Bento, Editorial or Masonry (one item per row is the List of rows view), and the card colours: As designed, Featured or Colourful. Point at a greyed-out layout to read what kind of card it needs.
  3. Cards per row: 2 per row, 3 per row (the default) or 4 per row. That's on wide screens: tablets show two, phones one.
  4. Items per page: 12 at first, from 1 to 100.
  5. More items: how visitors reach the next items: Numbers (the default), Previous / Next, Load more or Infinite.
The Layout section of the TeleportHQ Booking Page Settings, with Item views, Card layout, Cards per row, Items per page and More items

After your first change, the Booking Page Updated window asks whether you want to see the page. Click Show the Page to close the settings and open the list at its filters, or Keep Editing, which leaves the settings open and doesn't ask again while they stay open. After Show the Page, a Back to booking page settings button above the canvas opens the settings again for a few seconds.

4. Style the booking pages on the canvas

Open any page of the bookings folder and change it like any other page: texts, colours, fonts, spacing and layout. Every word on these pages, such as Book online or Check availability, is a text you can edit, and a multi-language site translates it like any other text.

The pages show real or example content on the canvas:

  • book-online-item shows the item picked in the selector above the canvas. Pick another item there to see its page. The Edit this item pill opens that item's photos, price, capacity and description in the Bookings panel.
  • booking-details shows the booking picked above the canvas. While you have no booking yet, click Preview with an example booking, then Clear example booking to take it off.
  • my-bookings shows what a signed-in customer without bookings sees. Click Preview with example bookings to fill it with example bookings of your own items, then Clear example bookings.
  • book-online, with both item views on, shows a See list view or See grid view pill.

The examples are only shown in the editor. Your live site never shows them.

5. Rebuild the booking pages

Rebuilding builds missing booking pages again and, if you choose, replaces every booking page with a fresh one in the current design. TeleportHQ offers it when:

  • the Bookings panel says "Your booking pages have an older design. Rebuild them to get the current one; your items, bookings and settings stay.";
  • Booking Page Settings says "The booking page is gone. Rebuild the booking pages to get it back.";
  • the Payment Settings say your booking workflow was changed in the editor and offer Rebuild Booking Pages.

You can also ask the AI Assistant to rebuild the booking pages.

  1. Click Rebuild the booking pages (in the Payment Settings, Rebuild Booking Pages). The Rebuild Booking Pages window opens: "Every booking page that is missing is built again, wired to the others."
  2. Choose Rebuild the booking pages from scratch, switched on when your pages have an older design. On, every booking page is replaced with a fresh one, and changes you made to their design are lost. Off, only missing pages are built. Your items, bookings and settings are kept either way.
  3. Click Rebuild. The message "Booking pages have been rebuilt." appears.

A rebuilt book-online page keeps your Booking Page Settings and the item card you designed.

Check that it worked

Open book-online on the canvas: the filters, search, sort and cards follow your settings. To see the pages as customers do, publish your site. See How to publish a web app.

Troubleshooting

"The booking page has lost its list of items, so these settings cannot be applied. Rebuild the booking pages to get it back." The list of items on book-online was deleted. Rebuild the booking pages (step 5).

The Layout section says "This is your own page: its cards keep the layout you gave them." Your booking page is one of your own pages, taken over by Use my existing pages when you switched Bookings on. Its cards keep your design. The filters, search, sort and paging still apply.

List of rows is greyed out: "Your listing's card was built before cards became reusable components, so it shows as a grid only." Rebuild the booking pages to get the list of rows.

No Category tabs or Search switch The settings say "Your page's own category links filter the items, so no category tabs are added." or "Your page's own search box searches the items, so no second one is added." Your page already has its own.

You deleted the bookings folder Your items, bookings, opening hours and booking settings were kept: deleting the folder removes the pages only. Until you reopen the project, Bookings still reads as on; from the next open, the Bookings panel says "Bookings is off for this project." with a Switch on Bookings button, and the Plugins row reads Off. To build the pages again, switch on Show proposed plugins (Project settings → Editor → Preferences → Editing): the Pages list shows a dashed bookings folder whose tooltip reads "This folder was deleted, but your items, bookings, opening hours and booking settings were kept. "Activate" builds its pages again." Click its Activate button. The Activate Bookings window says "Your booking pages were deleted, but your items, bookings, opening hours and booking settings were kept. Activating bookings builds the pages again." Items and opening hours are added only to empty tables, and the timezone and currency change only if you pick them in that window. See How to add bookings to an existing project.

The Payment Settings say "Your booking workflow was changed in the editor, so it was not set up to take payments." Click Rebuild Booking Pages there, and rebuild from scratch (step 5) so customers can pay online.

Good to know

  • In a project TeleportHQ's AI built, the AI sets up the booking page's first layout for your business. You can change all of it here.
  • The AI Assistant can change the booking page's filters and layout, or rebuild the booking pages, when you ask.
  • Loading and empty states. The list shows "Nothing to show here" when no item matches. See How to design loading, empty and error states.
  • Changes go live when you publish.
Share

Related Articles

Which pages does Bookings add, and what do customers do on them?

TeleportHQ Bookings adds four pages in a bookings folder (the list of what can be booked at /book, one page per item with a live calendar at /book/<item>, each customer's own booking page, and My bookings at /my-bookings) plus a Bookings tab on the account page, where customers pick a date, book, pay, add the booking to their calendar or cancel it.

What can I change in Booking Settings?

In TeleportHQ, the gear titled Booking Settings at the top of the Bookings panel opens the Bookings Setup drawer, where you choose how new items are booked, whether you approve each booking, whether guests can book, whether a phone number is required and until when customers can cancel online, and open the settings for payment, invoices, booking times, opening hours, closed days, the booking page and the booking emails.

How to design the blog list and post pages

In TeleportHQ, your blog's list page (/blog) and post page are ready-made pages in the blog folder that you style like any page; Blog Settings → Listing → Listing Page Settings picks the Home or Sidebar page layout and the list's filters, search, sort and cards, the Post page block switches post-page elements on or off, and Restore Default Layout… puts both pages back.

How to design loading, empty and error states

In TeleportHQ, you design what visitors see while a list loads, when it has no items, or when a CMS list fails to load by selecting the Array Mapper, CMS list or CMS item, turning on Override State in its UI State row, picking the state and editing that version on the canvas.

How to turn off Bookings

To turn off Bookings in TeleportHQ, open the Bookings panel's Booking Settings, scroll to Disable Bookings, type "disable bookings" and click Disable Bookings (or switch off Bookings enabled in Plugins → Bookings); the booking pages and their workflows are removed, your items, bookings and settings stay in your database, and the change reaches your live site when you publish.