What is the Booking Page Builder?
The Booking Page Builder is a visual drag-and-drop editor for customizing the public pages your visitors see in Timetics AI.
You can customize two types of pages:
- Public Home Page — the page where all your events are listed
- Single Booking Page — the public booking page for a specific event or calendar
No coding is required. You can add and arrange blocks, edit text and images, customize your brand colour and background, preview the result, save it as a draft, and publish it when you’re ready.
Why Use the Booking Page Builder?
- Create branded booking pages: Match your public pages to your business instead of using a generic booking layout.
- Add more context: Use Hero, Testimonial, FAQ, Video, CTA and other blocks to explain your services before visitors book.
- Build without code: Add and rearrange content visually using drag and drop.
- Start faster with templates: Apply a ready-made design and customize it for your business.
- Preview before publishing: Keep changes in draft until you’re ready to make them public.
Step-by-Step Instructions
Step 1: Open the Booking Page Builder
There are two ways to enter the builder depending on the page you want to customize.
| Option | What It Customizes |
|---|---|
| Customize Booking Page | A specific event or calendar booking page |
| Customize Home Page | Your public home page where your events are listed |
Customize Booking Page is available from the admin top bar. Click it to open a searchable list of your events, then select the one you want to customize.
Customize Home Page is available from the top bar while you’re in Settings and opens your public home page directly in the builder.
If your current plan does not include the Page Builder, Timetics AI shows an upgrade prompt instead. Trying to access the builder URL directly without access redirects you to Manage Calendars.
Step 2: Understand the Builder Layout
The builder opens in a full-screen editing interface with three main areas.
| Area | What It Does |
|---|---|
| Left Sidebar | Contains Blocks, Outline and Settings |
| Center Canvas | Shows a live visual preview and lets you arrange page blocks |
| Top Bar | Provides templates, appearance controls, preview, draft and publishing actions |
The left sidebar contains three tabs:
- Blocks — browse the blocks you can add
- Outline — view the structure of everything currently on the page
- Settings — edit the properties of the selected block
The Settings tab remains disabled until you select a block.
On tablet and mobile screens, the sidebar collapses into a drawer that you can open using the hamburger icon.
Step 3: Understand the Locked Section
Every page contains one protected block that cannot be removed or moved.
- On the Home Page, the protected block is the Events list.
- On a Booking Page, the protected block is the Booking Form.
You build your custom content in the areas above and below this protected section.
The protected block also appears in the Blocks panel as Protected, already on canvas, so it cannot accidentally be added a second time.
Step 4: Add Blocks to the Page
You can add a block in two ways.
- Drag and drop: Drag a block from the Blocks sidebar and drop it into the area above or below the protected section.
- Click to add: Use the dashed Add block above or Add block below controls directly on the canvas.
The available blocks are organized into three groups.
| Group | Available Blocks |
|---|---|
| Content Blocks | Text, Rich Text, Image, Video, Testimonial, FAQ, Spacer |
| Highlights | Hero, Call to Action, Button |
| Layout | Columns, Card, Divider |
Use the search field at the top of the Blocks panel to quickly find a block.
Step 5: Edit a Block
Click any editable block on the canvas. The sidebar switches to Settings and displays the options available for that block.
Text styling works per field. Individual text elements can have their own size and colour, so a heading and subtitle do not need to share the same styling.
Blocks that support margin or padding include four-side spacing controls. You can link the sides to adjust them together or unlink them to set each side individually.
Background settings support either a solid colour or an image.
Image fields support JPG, PNG, GIF and WebP files up to 500 KB. The Video block uses a YouTube, Vimeo or Loom URL rather than a video upload.
Step 6: Start From a Template
For a faster starting point, click Templates in the top bar or Browse templates at the bottom of the Blocks panel.
The template gallery includes:
- Template categories
- All templates view
- Live template search
- Favorites
- A heart button for saving favorite templates
Your Favorites category appears after you favorite at least one template. Favorites are stored in your browser.
Selecting a template immediately applies its blocks and theme to the editor and closes the gallery.
Important: Applying a template replaces your current blocks and theme. The change remains an unsaved edit until you save the draft or publish it.
The Templates button pulses until you open the template gallery for the first time.
Step 7: Change the Brand Colour
Click the droplet icon in the top bar.
Select a colour from the picker or enter a 6-digit hexadecimal colour value.
This changes the brand colour while leaving the rest of the theme unchanged. Text displayed on brand-coloured surfaces automatically switches between dark and white to maintain readability.
Step 8: Customize the Page Background
Click the image icon beside the brand colour control.
You can choose between:
- Color — use a solid page background
- Gradient — use a gradient background
The Gradient tab includes six presets:
- Cloud
- Mist
- Sky
- Lavender
- Sand
- Slate
You can also create a custom gradient by choosing a start colour, end colour and angle.
The panel indicates whether the page is Using theme or Overriding theme. When an override is active, use Reset to theme background to return to the theme’s original background.
Step 9: Preview Your Public Page
Click the eye icon in the top bar to open Preview.
Preview loads your real public page inside an iframe rather than showing only the editor canvas.
The preview includes:
- Desktop view
- Tablet view
- Mobile view
- Refresh
- Open in new tab
If you have unsaved changes, Timetics AI saves the current draft before loading the preview so it reflects your latest edits.
Step 10: Save Your Work as a Draft
Open the dropdown next to Publish and select Save Draft.
The status indicator in the top bar helps you understand the current state of the page.
| Status | Meaning |
|---|---|
| Grey | Not published |
| Amber and pulsing | Unsaved changes |
| Green | Published |
Step 11: Publish the Page
Click Publish when you’re ready to make your changes public.
Your draft is copied to the live page and the public page cache is refreshed so visitors can see the updated design.
Step 12: Reset the Builder (Optional)
Click the rotate icon in the appearance controls if you want to start over.
Resetting removes the builder blocks and returns the theme and brand colour to their defaults. Timetics AI displays a confirmation dialog before performing the reset.
The reset remains an unsaved change until you save the draft or publish it.
How Drafts and Publishing Work
The builder keeps draft and published versions separately for both page blocks and the theme.
This means you can experiment with layouts, content and appearance without immediately changing what visitors see. Your changes become public only after you click Publish.
Home Page vs Booking Page Customization
Page content is stored separately depending on what you’re editing.
| Setting | Scope |
|---|---|
| Home Page blocks | Public workspace home page |
| Booking Page blocks | Individual event or calendar |
| Theme | Workspace-wide |
| Brand colour | Workspace-wide |
| Background | Workspace-wide through the builder theme |
Important: The theme is not specific to the booking page you’re currently editing. Changing the builder’s brand colour or background while customizing one booking page affects the public home page and your other booking pages as well.
Responsive Design
You only need to create one layout. Timetics AI automatically makes the builder content responsive across desktop, tablet and mobile.
Font sizes, spacing and heights are converted into responsive CSS that scales down automatically on smaller screens. There are no separate tablet or mobile values to configure or store.
Your desktop values act as the upper limit for responsive scaling.
Canvas and Public Page Width
The desktop editor canvas is capped to closely match the width visitors see on the real public page.
Booking pages using the Week or Day calendar layout can render full width instead of using the standard fixed booking card width.
Prerequisites
- An active Timetics AI account
- A plan that includes the Page Builder
- At least one event or calendar if you want to customize a single booking page
Important Notes
- The Events list and Booking Form are protected. They cannot be moved, deleted or duplicated. Custom content is placed above or below them.
- Templates replace your existing design. Applying a template replaces both your current blocks and theme without a confirmation dialog.
- Publish important work before trying templates. There is no undo for a template application beyond leaving without saving.
- Reset Builder is destructive. It removes your builder blocks and restores theme defaults, but Timetics AI asks for confirmation first.
- The builder theme is workspace-wide. Changing the brand colour or background from one booking page affects your other public pages.
- Older per-event themes are not retained. They are cleared the next time that booking page is saved.
- Text styling is per field. Each text element can carry its own size and colour.
- Unsaved changes are indicated in amber. The builder also warns before closing or refreshing the browser tab when unsaved changes exist.
- In-app navigation is not intercepted. Watch the amber status indicator before following another link inside Timetics AI.
- Templates require access to the Timetics template library. A loading error or empty gallery can mean the template library is temporarily unreachable.
- Template Favorites are browser-specific. They do not automatically follow you to another browser, device or team member.
- Images are limited to 500 KB. Compress large hero and background images before uploading.
- Video blocks use external URLs. Use a supported YouTube, Vimeo or Loom URL instead of uploading the video file directly.