Skip to main content

Branding

White-label booking page configuration for merchants. BrandingContext allows merchants to customize the appearance of their online booking pages to match their brand identity.

Scope​

In Scope:

  • Booking page branding (colors, logo, fonts)
  • Domain configuration for custom booking URLs
  • Basic SEO settings (title, description, favicon)
  • Merchant branding assets (logo, business name, colors)

Out of Scope (Not Part of SCP):

  • Static pages (content marketing pages)
  • Contact forms
  • Blog functionality
  • Full website management

Features​

Booking Page Customization​

Merchants can configure their booking page appearance:

Visual Branding:

  • Logo upload
  • Primary and secondary brand colors
  • Font selection
  • Custom CSS (advanced users)
  • Favicon

Business Information:

  • Business name and tagline
  • Business description (for SEO)
  • Contact information display
  • Social media links

Domain Configuration:

  • Custom domain support (e.g., book.yoursalon.com)
  • Default subdomain (e.g., yoursalon.zoca.app)
  • SSL certificate management

SEO Settings​

Basic search engine optimization:

Meta Tags:

  • Page title (e.g., "Book Appointment | Your Salon")
  • Meta description
  • Open Graph image for social sharing
  • Keywords

Analytics Integration:

  • Google Analytics tag ID
  • Facebook Pixel
  • Custom tracking scripts

Booking Page Layout​

Components Displayed:

  • Service catalog with pricing
  • Provider profiles (optional)
  • Location information
  • Available time slots calendar
  • Customer testimonials/reviews
  • Business hours

Configurable Elements:

  • Show/hide provider selection
  • Display service categories
  • Show pricing on booking page
  • Require customer account for booking
  • Enable guest checkout

Implementation​

BrandingContext Schema​

%Branding{
  id: uuid,
  merchant_id: uuid,
  tenant_id: uuid,

  # Visual Branding
  logo_url: string,
  favicon_url: string,
  primary_color: string,      # Hex color code
  secondary_color: string,
  font_family: string,
  custom_css_url: string,      # Stored in R2/S3

  # Domain Configuration
  domain_name: string,         # Custom domain
  subdomain: string,           # Default subdomain

  # Business Information
  business_name: string,
  tagline: string,
  description: text,

  # SEO
  meta_title: string,
  meta_description: string,
  og_image_url: string,
  google_analytics_id: string,

  # Display Options
  show_providers: boolean,
  show_pricing: boolean,
  require_account: boolean,
  enable_guest_checkout: boolean,

  # Social Links
  social_links: map,           # %{facebook: url, instagram: url, etc.}

  metadata: map
}

Default Booking Page Flow​

When end customers visit the booking page, they see:

  1. Landing Section

    • Business logo and name
    • Hero image or tagline
    • "Book Now" call-to-action

  2. Service Selection

    • List of services with descriptions
    • Service pricing (if enabled)
    • Service duration

  3. Provider Selection (optional)

    • Provider photos and bios
    • Provider specialties
    • "Any available" option

  4. Time Slot Selection

    • Calendar view
    • Available time slots
    • Timezone display

  5. Customer Information

    • Name, email, phone
    • Guest checkout or account creation
    • Payment method addition

  6. Confirmation

    • Booking summary
    • Deposit payment (if required)
    • Confirmation message

URL Structure​

Default Subdomain:

https://yoursalon.zoca.app
https://yoursalon.zoca.app/services
https://yoursalon.zoca.app/providers
https://yoursalon.zoca.app/book

Custom Domain:

https://book.yoursalon.com
https://book.yoursalon.com/services
https://book.yoursalon.com/providers
https://book.yoursalon.com/book

Branding Examples​

Example 1: Luxury Spa​

%Branding{
  business_name: "Serenity Spa & Wellness",
  tagline: "Relax. Rejuvenate. Restore.",
  primary_color: "#2C3E50",    # Deep navy
  secondary_color: "#E8D5C4",  # Warm beige
  font_family: "Playfair Display",
  show_providers: true,
  show_pricing: false,         # Don't show pricing publicly
  require_account: true
}

Example 2: Modern Barbershop​

%Branding{
  business_name: "The Modern Barber",
  tagline: "Classic Cuts, Modern Style",
  primary_color: "#000000",    # Black
  secondary_color: "#FFD700",  # Gold
  font_family: "Montserrat",
  show_providers: true,
  show_pricing: true,
  enable_guest_checkout: true
}

Example 3: Fitness Studio​

%Branding{
  business_name: "CoreFit Studio",
  tagline: "Transform Your Body, Transform Your Life",
  primary_color: "#FF6B6B",    # Energetic red
  secondary_color: "#4ECDC4",  # Teal
  font_family: "Roboto",
  show_providers: false,       # Class-based, not provider-specific
  show_pricing: true,
  require_account: false
}

Domain Setup​

Custom Domain Configuration​

Steps for Merchants:

  1. Purchase domain (e.g., yoursalon.com)
  2. Create CNAME record: book.yoursalon.com → proxy.zoca.app
  3. Configure in SCP branding settings
  4. SSL certificate auto-provisioned via Let's Encrypt

DNS Configuration:

Type: CNAME
Host: book
Value: proxy.zoca.app
TTL: 3600

Subdomain Assignment​

Auto-Generated Subdomain:

  • Based on merchant name
  • Format: merchant-slug.zoca.app
  • Example: "Serenity Spa" → serenity-spa.zoca.app

Mobile Responsiveness​

All booking pages are mobile-optimized by default:

  • Responsive grid layouts
  • Touch-friendly buttons and calendars
  • Mobile-first design approach
  • Fast page load times

See the API Reference for branding-related endpoints:

  • GET /api/websites - List website configurations
  • POST /api/websites - Create website branding
  • PUT /api/websites/:id - Update branding settings