Website Builder

This document describes the Website Builder subsystem in the Hotelaro codebase. The Website Builder provides hotel administrators with a graphical interface to customize the public-facing website for their property, including theme selection, content sections, and branding elements. It is a core part of the frontend website configuration, distinct from the backend administration and booking management systems.

Scope:

Covers the structure, UI, and code integration of the Website Builder.
Explains how the builder interacts with theme, content, and media configuration.
Details the mapping between UI elements and code entities.

For information about the theme system itself, see Theme System.

For information about public website pages, see Public Pages.

Purpose and Context

The Website Builder enables non-technical hotel staff to configure the look and content of their property's website without editing code. It is accessible to users with admin privileges and is tightly integrated with the multi-tenant setup, ensuring each hotel can independently manage its own site.

Key Capabilities:

Select and configure website themes.
Edit content for key sections (header, hero, about, facilities, footer, etc.).
Manage page-specific content (home, about, services, gallery, contact).
Upload and manage media assets (logos, images, favicon).
Adjust theme colors and branding.

System Context Diagram:

This diagram shows how the Website Builder fits into the overall Hotelaro system.

Data Layer

Frontend Website

Admin Backend

Setup & Configuration

Website Builder

Moonlit Theme

Public Pages

hotel_booking_setup

Media Storage

UI Structure and Navigation

The Website Builder interface is organized into three main configuration areas, each accessible via sidebar tabs:

Builder Settings: Configure global website elements (header, hero, about, facilities, footer).
Pages: Edit content for individual pages (home, about, services, gallery, contact).
Theme: Adjust theme colors and upload favicon.

Each area contains collapsible panels for granular settings, such as logo upload, header content, hero section configuration, and more.

UI Structure Diagram:

Sidebar Navigation

Builder Settings

Pages

Theme

Header

Hero

About

Facilities

Footer

Home

About Page

Services

Gallery

Contact

Colors

Favicon

Mapping UI Elements to Code Entities

The Website Builder UI is implemented primarily in the file webbuildercontent.php. The following table maps major UI elements to their corresponding code constructs:

UI Element	Code Construct / Selector	Description
Sidebar Tabs	.wb-tab-pane-custom	Main navigation between Builder, Pages, Theme
Collapsible Panels	.wb-collapsibleitem	Expandable/collapsible section settings
Section Content	.wb-item-collapse-content	Content area for each collapsible panel
Logo Upload	.image-upload-component	Logo image upload widget
Text Inputs	input[type="text"], input[type="email"]	For hotel name, description, contact info, etc.
Image Previews	.wb-upload-preview-img	Preview uploaded images
Theme Color Picker	(not shown in code, but referenced)	Color selection for theme

Section and Setting Details

Builder Settings

Header: Select header layout, upload logo, set hotel name, contact info, and call-to-action button.

Hero: Choose hero section style, set subtitle, title, description, button text/link, and counters.

About, Facilities, Footer: Configure content and images for each section.

Pages

Home, About, Services, Gallery, Contact: Each page has its own settings for content blocks, images, and text.

Theme

Colors: Adjust primary and secondary colors for the theme.

Favicon: Upload a favicon image for browser tabs.

Example: Header Section Configuration

#wb-header-settings

Select Header

Logo Upload

Hotel Name Input

Email Input

Phone Input

Address Input

Button Text/Link

Data Flow and Persistence

The Website Builder reads and writes configuration data to the hotel_booking_setup table, scoped by the current tenant's admin_uid. Media uploads (logos, images, favicon) are stored in a dedicated media storage location.

Data Flow Diagram:

Admin User

webbuildercontent.php

hotel_booking_setup

Media Storage

Access Control

Only users with admin privileges (isAdmin == 1 or isAdmin == 2) can access the Website Builder. This is enforced at the view level.

Styling and Theme Integration

The Website Builder's appearance is governed by the main admin CSS (assets/css/style.css) and the public website's theme CSS (website_assets/css/style.css). These files define the look and feel of both the builder interface and the resulting public website.

Summary Table: Website Builder Features

Feature Area	Customizable Elements	Code Reference
Header	Layout, logo, hotel name, contact info, button	webbuildercontent.php 288-395
Hero Section	Style, subtitle, title, description, button, counters	webbuildercontent.php 397-479
About/Facilities	Text, images, lists	webbuildercontent.php 500-599
Footer	Content, links, copyright	webbuildercontent.php 600-699
Pages	Home, About, Services, Gallery, Contact	webbuildercontent.php 229-263
Theme	Colors, favicon	webbuildercontent.php 264-284
Media Upload	Logo, images, favicon	webbuildercontent.php 277-333

Bridging Diagram: UI Sections to Code Entities

This diagram maps the main UI sections to their code selectors and relevant PHP/HTML blocks.

Conclusion

The Website Builder is a modular, admin-only interface for customizing the public-facing website of each hotel property in the Hotelaro system. It provides granular control over theme, content, and branding, with all changes stored in a tenant-specific configuration table and media storage.

For further details on theme architecture, see Theme System. For public page structure, see Public Pages.