Bookeo's layout design options for your booking page give you the ability to customize how you display your service to your customers.
Select the Bookeo product you are using from the list below to find out more.
Bookeo Appointments
This section details the available booking page layouts in a Bookeo Appointments account.
You can showcase your services on your booking page using the below layouts:
| Page layouts for services | |
Page layout: buttons on the left (medium size images) Page layout: buttons on the left (large images) |
Page layout: buttons on the left (no images) Page layout: grid |
If you offer workshops, you can showcase your workshops on your booking page using the below layouts:
| Additional page layouts for workshops | |
Page layout: list |
Page layout: grid |
The above booking modes offer several customization options.
In this article:
Page layouts for services
You can display your services with categories on the left, and services on the right, or display your services in a grid format. Both formats come with additional display options, detailed below.
Page layout: buttons on the left
This layout displays services with their description and images. If you have set up categories, they will show on the left and services on the right. You can choose to show medium-size images or large images. If you do not upload images for your services, the system will only show the service name and description.
To select this layout for your services:
1. Go to Settings>Theme and Layout>Page layout
2. In the Type selection section, from the Page layout [1] dropdown menu, select buttons on the left, items on the right
|
Booking page (medium-size images)
|
3. From the Image style [2] dropdown menu, select if you want to show smaller image, left [4] or larger image, top [5]
4. In the Time selection section, from the Individual time selection page layout [3] dropdown menu, you can select how to display the content on the page where customers select a date and time for their booking. Click here to learn more
Preview your booking page before saving
Clicking Save on any change you make updates your booking page immediately.You can preview any changes you make to your booking page Item selection page layout without saving your settings by clicking on the Test booking button. When you are happy with the look and feel of your booking page, click on the Save button.
Services names and description
For best results:- on large screens, service names should fit in 1, maximum 2, rows. Service names are set in the General tab of the service, in the Name section.
- The description shown on the booking page is set in the General tab of the service, in the Description section. The description can optionally also display on the page where customers select a date and time. Click here for more information
Page layout: grid
With this layout, services are displayed in a grid format, organized in categories.
To select this layout for your services:
1. Go to Settings>Theme and Layout>Page layout
2. In the Type selection section, from the Page layout [1] dropdown menu, select grid with all items using images as background
|
|
8. From the Grid initial display [3] dropdown menu, select if you want to show categories [5] expanded or categories collapsed
Default service
If you have set up a default service, the category of that service will show expanded, even if you select to display collapsed categories.Preview your booking page before saving
Clicking Save on any change you make updates your booking page immediately.You can preview any changes you make to your booking page booking mode and layout without saving your settings by clicking on the Test booking button. When you are happy with the look and feel of your booking page, click on the Save button.
Services names
For best results, we recommend setting short service names that fit in 1, maximum 2, rows on large screens. Service names are set in the General tab of the service, in the Name section.Booking modes for workshops
On your booking page, you can let customers:
- choose the workshop first and use the same page layout selected for your services in Settings>Theme and Layout>Page layout, in the Type selection section, or
- show all the upcoming workshops.
Booking mode: the customer chooses the workshop first
To select this layout for classes, courses and events:
1. Go to Settings>Theme and Layout>Page layout
2. In the Booking mode section, from the Booking mode [1] dropdown menu, select the customer chooses the class first, and then an available date / time. The page layout for workshops will be the layout selected for services in the Type selection [2] section: buttons on the left or grid.
Booking mode: the customer is presented all the upcoming workshops
If you select to show all the upcoming workshops, you can show upcoming workshops organized in a list or in a grid mode with images and availability slots.
Detailed below are the additional display options that come with both formats.
Page layout: list
This layout shows a filterable list of upcoming workshops.
To select this layout for workshops:
1. Go to Settings>Theme and Layout>Page layout
|
|
2. In the Booking mode section, from the Booking mode [1] dropdown menu, select the customer is presented all the upcoming workshops and their availability, and picks one.
3. Tick the Empty dates [2] checkbox if you want to show dates when workshops do not run [7]. Click here to learn more
4. From the Filters [3] dropdown menu, select whether filters [8] are initially hidden or initially visible by default. Click here to learn more about filters
5. From the Initial view [4] dropdown menu, select which type of workshop you will show as preselected [9] on your booking page: Workshops or Events. Click here to learn more about tabs
6. In the Other section, tick the Show info button in times list [6] checkbox if you want to show an INFO [10] button that customers can click to see the workshop description, its resources (for example, instructors), and images.
Preview your booking page before saving
Clicking Save on any change you make updates your booking page immediately.You can preview any changes you make to your booking page booking mode and layout without saving your settings by clicking on the Test booking button. When you are happy with the look and feel of your booking page, click on the Save button.
Page layout: grid
This layout shows a grid format with same-day availability slots for workshops with a regular schedule and event dates.
To select this layout for workshops and events:
1. Go to Settings>Theme and Layout>Page layout
2. In the Booking mode section, from the Booking mode [1] dropdown menu, select the customer is presented all the upcoming workshops and their availability, and picks one.
|
|
3. Tick the Empty dates [2] checkbox if you want to show dates when workshops do not run. Click here to learn more
4. Filters let customers sort your workshops by categories and resources. From the Filters [3] dropdown menu, select whether filters [9] are initially hidden or initially visible by default. Click here to learn more about filters
5. From the Initial view [4] dropdown menu, select which type of workshop you will show as preselected [10] on your booking page: Workshops or Events. Click here to learn more about tabs
6. In the Upcoming workshop section, from the Page layout [5] dropdown menu, select grid with all items using images as background
7. From the Grid size [6] dropdown menu, select the maximum number of columns your grid displays on large screens.
8. From the Grid initial display [7] dropdown menu, select if you want to show categories expanded or categories collapsed
9. Tick the View all dates [8] checkbox if you want to show a View all dates [11] link, allowing customers to view all upcoming dates for the specific workshop on a monthly calendar page.
Preview your booking page before saving
Clicking Save on any change you make updates your booking page immediately.You can preview any changes you make to your booking page booking mode and layout without saving your settings by clicking on the Test booking button. When you are happy with the look and feel of your booking page, click on the Save button.
Bookeo Classes and Courses
This section details the available booking modes and page layouts in a Bookeo Classes and Courses account.
On your booking page, you can display:
| Booking mode: the customer is presented all the upcoming classes | Booking mode: the customer chooses the class first |
|
Page layout: list Page layout: grid |
Page layout: buttons on the left (medium size images) Page layout: buttons on the left (large images) Page layout: grid |
The above booking modes and layouts offer several customization options.
In this article:
- Booking mode: the customer is presented all the upcoming classes
- Booking mode: the customer chooses the class first
Booking mode: the customer is presented all the upcoming classes
With this booking mode, Bookeo will show upcoming tours organized in a list or a grid with images and availability slots. Detailed below are the additional display options that come with both formats.
Page layout: list
This layout shows a filterable list of upcoming classes.
To select this layout for classes:
1. Go to Settings>Theme and Layout>Page layout
|
|
2. In the Booking mode section, from the Booking mode [1] dropdown menu, select the customer is presented all the upcoming classes and their availability, and picks one.
3. Tick the Empty dates [2] checkbox if you want to show dates when classes do not run [7]. Click here to learn more
4. From the Filters [3] dropdown menu, select whether filters [8] are initially hidden or initially visible by default. Click here to learn more about filters
5. From the Initial view [4] dropdown menu, select which type of class you will show as preselected [9] on your booking page: Classes, Courses, Events or Personal lessons. Click here to learn more about tabs
6. In the Other section, tick the Show info button in times list [6] checkbox if you want to show an INFO [10] button that customers can click to see the class description, its resources (for example, instructors), and images.
Preview your booking page before saving
Clicking Save on any change you make updates your booking page immediately.You can preview any changes you make to your booking page booking mode and layout without saving your settings by clicking on the Test booking button. When you are happy with the look and feel of your booking page, click on the Save button.
Display of personal lessons/appointments and specific gift vouchers
You can select the display of personal lessons/appointments and specific gift vouchers in the Type selection section. You can display categories on the left and personal lessons appointments on the right, or a grid format.Page layout: grid
This layout shows a grid format with same-day availability slots for classes, upcoming courses and workshop dates, and private lesson/appointment selection.
To select this layout for classes, courses and events:
1. Go to Settings>Theme and Layout>Page layout
2. In the Booking mode section, from the Booking mode [1] dropdown menu, select the customer is presented all the upcoming classes and their availability, and picks one.
|
|
3. Tick the Empty dates [2] checkbox if you want to show dates when classes do not run. Click here to learn more
4. Filters let customers sort your classes by categories and resources. From the Filters [3] dropdown menu, select whether filters [9] are initially hidden or initially visible by default. Click here to learn more about filters
5. From the Initial view [4] dropdown menu, select which type of class you will show as preselected [10] on your booking page: Classes, Courses, Events or Personal lessons. Click here to learn more about tabs
6. In the Upcoming class section, from the Page layout [5] dropdown menu, select grid with all items using images as background
7. From the Grid size [6] dropdown menu, select the maximum number of columns your grid displays on large screens.
8. From the Grid initial display [7] dropdown menu, select if you want to show categories [11] expanded or categories collapsed
9. Tick the View all dates [8] checkbox if you want to show a View all dates [12] link, allowing customers to view all upcoming dates for the specific class on a monthly calendar page.
Preview your booking page before saving
Clicking Save on any change you make updates your booking page immediately.You can preview any changes you make to your booking page booking mode and layout without saving your settings by clicking on the Test booking button. When you are happy with the look and feel of your booking page, click on the Save button.
Display of personal lessons/appointments and specific gift vouchers
You can select the display of personal lessons/appointments and specific gift vouchers in the Type selection section. You can display categories on the left and personal lessons appointments on the right, or a grid format.Booking mode: the customer chooses the class first
With this booking mode, Bookeo will show all your classes, courses, events, personal lessons/appointments on your booking page. If you have set up categories, classes will show listed under the specific category. You can select if you want to show classes with description and images, or display your classes in a grid format. Both formats come with additional display options, detailed below.
Page layout: buttons on the left
This layout displays classes, courses, events, personal lessons/appointments with their description and images. If you have set up categories, they will show on the left and classes on the right. You can choose to show medium-size images or large images.
To select this layout for your classes:
1. Go to Settings>Theme and Layout>Page layout
2. In the Booking mode section, from the Booking mode [1] dropdown menu, select the customer chooses the class first, and then an available date / time
|
Booking page (medium-size images)
|
3. In the Type selection section, from the Page layout [2] dropdown menu, select buttons on the left, items on the right
4. From the Image style [3] dropdown menu, select if you want to show smaller image, left [5] or larger image, top [6]
5. In the Time selection section, from the Individual time selection page layout [4] dropdown menu, you can select how to display the content on the page where customers select a date and time for their booking. Click here to learn more
Preview your booking page before saving
Clicking Save on any change you make updates your booking page immediately.You can preview any changes you make to your booking page Item selection page layout without saving your settings by clicking on the Test booking button. When you are happy with the look and feel of your booking page, click on the Save button.
Classes names and description
For best results:- on large screens, class names should fit in 1, maximum 2, rows. Class names are set in the General tab of the class, in the Name section.
- The description shown on the booking page is set in the General tab of the class, in the Description section, in the first tab. If you have set up additional description tabs, an INFO button will display, and customers can click on it to read the full class description. The description can optionally also display on the page where customers select a date and time. Click here for more information
Page layout: grid
With this layout, classes are displayed in a grid format, organized in categories.
To select this layout for classes, courses and events:
1. Go to Settings>Theme and Layout>Page layout
2. In the Booking mode section, from the Booking mode [1] dropdown menu, select the customer chooses the class first, and then an available date / time
|
Booking page |
3. In the Type selection section, from the Page layout [2] dropdown menu, select grid with all items using images as background
4. From the Grid size [3] dropdown menu, select the maximum number of columns your grid displays on large screens.
5. From the Grid initial display [4] dropdown menu, select if you want to show categories [7] expanded or categories collapsed
6. In the Time selection section, from the Individual time selection page layout [5] dropdown menu, you can select how to display the content on the page where customers select a date and time for their booking. Click here to learn more
7. In the Other section, tick the Show info button in times list [6] checkbox if you want to show an INFO button that customers can click to see the course/event description, their resources (for example, instructors), and images, on the page shown after selecting the course/event.
Preview your booking page before saving
Clicking Save on any change you make updates your booking page immediately.You can preview any changes you make to your booking page booking mode and layout without saving your settings by clicking on the Test booking button. When you are happy with the look and feel of your booking page, click on the Save button.
Class names
For best results, we recommend setting short class names that fit in 1, maximum 2, rows on large screens. Class names are set in the General tab of the class, in the Name section.Bookeo Tours and activities
This section details the available booking modes and page layouts in a Bookeo Tours and activities account.
On your booking page, you can display:
| Booking mode: the customer is presented all the upcoming tours | Booking mode: the customer chooses the tour first |
|
Page layout: list Page layout: grid |
Page layout: buttons on the left (medium size images) Page layout: buttons on the left (large images) Page layout: grid |
The above booking modes and layouts offer several customization options.
In this article:
- Booking mode: the customer is presented all the upcoming tours
- Booking mode: the customer chooses the tour first
Booking mode: the customer is presented all the upcoming tours
With this booking mode, Bookeo will show upcoming tours organized in a list or a grid with images and availability slots. Detailed below are the additional display options that come with both formats.
Page layout: list
This layout shows a filterable list of upcoming tours, and events, with a link to open schedule tours/charters.
To select this layout for tours and events:
1. Go to Settings>Theme and Layout>Page layout
|
|
2. In the Booking mode section, from the Booking mode [1] dropdown menu, select the customer is presented all the upcoming tours and their availability, and picks one.
3. Tick the Empty dates [2] checkbox if you want to show dates when tours do not run [7]. Click here to learn more
4. From the Filters [3] dropdown menu, select whether filters [8] are initially hidden or initially visible by default. Click here to learn more about filters
5. From the Initial view [4] dropdown menu, select which type of tour you will show as preselected [9] on your booking page: Tours, Events or Private tours. Click here to learn more about tabs
6. In the Other section, tick the Show info button in times list [6] checkbox if you want to show an INFO [10] button that customers can click to see the tour description, its resources (for example, guide or vehicle), and images.
Preview your booking page before saving
Clicking Save on any change you make updates your booking page immediately.You can preview any changes you make to your booking page booking mode and layout without saving your settings by clicking on the Test booking button. When you are happy with the look and feel of your booking page, click on the Save button.
Display of open schedule tours/charters and specific gift vouchers
You can select the display of open schedule tours/charters and specific gift vouchers in the Type selection [11] section. You can display categories on the left and open schedule tours/charters on the right, or a grid format.Page layout: grid
This layout shows a grid format with same-day availability slots for tours, upcoming event dates, and private lesson/appointment selection.
To select this layout for tours, and events:
1. Go to Settings>Theme and Layout>Page layout
2. In the Booking mode section, from the Booking mode [1] dropdown menu, select the customer is presented all the upcoming tours and their availability, and picks one.
|
|
3. Tick the Empty dates [2] checkbox if you want to show dates when tours do not run. Click here to learn more
4. Filters let customers sort your tours by categories and resources. From the Filters [3] dropdown menu, select whether filters [10] are initially hidden or initially visible by default. Click here to learn more about filters
5. From the Initial view [4] dropdown menu, select which type of tour you will show as preselected [11] on your booking page: Tours, Events or Open schedule tours/charters. Click here to learn more about tabs
6. In the Upcoming tours section, from the Page layout [5] dropdown menu, select grid with all items using images as background
7. From the Grid size [6] dropdown menu, select the maximum number of columns your grid displays on large screens.
8. From the Grid initial display [7] dropdown menu, select if you want to show categories [12] expanded or categories collapsed
9. Tick the View all dates [8] checkbox if you want to show a View all dates [13] link, allowing customers to view all upcoming dates for the specific tour on a monthly calendar page.
10. Tick the After midnight [9] checkbox if you want to display games and tours after midnight on the displayed day[14] . For example, if you wish to display games at 1am on Saturday while customers are viewing games for Friday.
Preview your booking page before saving
Clicking Save on any change you make updates your booking page immediately.You can preview any changes you make to your booking page booking mode and layout without saving your settings by clicking on the Test booking button. When you are happy with the look and feel of your booking page, click on the Save button.
Display of open schedule tours/charters and specific gift vouchers
You can select the display of open schedule tours/charters and specific gift vouchers in the Type selection [13] section. You can display categories on the left and open schedule tours/charters on the right, or a grid format.Booking mode: the customer chooses the tour first
With this booking mode, Bookeo will show all your tours, events and open schedule tours/charters on your booking page. If you have set up categories, tours will show listed under the specific category. You can select if you want to show tours with description and images, or display your tours in a grid format. Both formats come with additional display options, detailed below.
Page layout: buttons on the left
This layout displays tours, events, open schedule tours/charters with their description and images. If you have set up categories, they will show on the left and tours on the right. You can choose to show medium-size images or large images.
To select this layout for your tours:
1. Go to Settings>Theme and Layout>Page layout
2. In the Booking mode section, from the Booking mode [1] dropdown menu, select the customer chooses the tour first, and then an available date / time
|
Booking page (medium-size images)
|
3. In the Type selection section, from the Page layout [2] dropdown menu, select buttons on the left, items on the right
4. From the Image style [3] dropdown menu, select if you want to show smaller image, left [5] or larger image, top [6]
5. In the Time selection section, from the Individual time selection page layout [4] dropdown menu, you can select how to display the content on the page where customers select a date and time for their booking. Click here to learn more
Preview your booking page before saving
Clicking Save on any change you make updates your booking page immediately.You can preview any changes you make to your booking page Item selection page layout without saving your settings by clicking on the Test booking button. When you are happy with the look and feel of your booking page, click on the Save button.
Tours names and description
For best results:- on large screens, tour names should fit in 1, maximum 2, rows. Class names are set in the General tab of the tour, in the Name section.
- The description shown on the booking page is set in the General tab of the tour, in the Description section, in the first tab. If you have set up additional description tabs, an INFO button will display, and customers can click on it to read the full tour description. The description can optionally also display on the page where customers select a date and time. Click here for more information
Page layout: grid
With this layout, tours are displayed in a grid format, organized in categories.
To select this layout for tours, and events:
1. Go to Settings>Theme and Layout>Page layout
2. In the Booking mode section, from the Booking mode [1] dropdown menu, select the customer chooses the tour first, and then an available date / time
|
Booking page |
3. In the Type selection section, from the Page layout [2] dropdown menu, select grid with all items using images as background
4. From the Grid size [3] dropdown menu, select the maximum number of columns your grid displays on large screens.
5. From the Grid initial display [4] dropdown menu, select if you want to show categories [7] expanded or categories collapsed
6. In the Time selection section, from the Individual time selection page layout [5] dropdown menu, you can select how to display the content on the page where customers select a date and time for their booking. Click here to learn more
7. In the Other section, tick the Show info button in times list [6] checkbox if you want to show an INFO button that customers can click to see the course/event description, their resources (for example, instructors), and images, on the page shown after selecting the course/event.
Preview your booking page before saving
Clicking Save on any change you make updates your booking page immediately.You can preview any changes you make to your booking page booking mode and layout without saving your settings by clicking on the Test booking button. When you are happy with the look and feel of your booking page, click on the Save button.