Site Settings - CAFH Platform

The Site Settings module provides centralized configuration for all platform-wide settings.

Settings Overview

Settings are organized into six main categories:

General

Site name, branding, colors, timezone

Social & SEO

Social links, meta tags, analytics

SMTP

Email server configuration

Admins

System administrator management

Notifications

Email notification preferences

Data & Export

Data management and exports

SiteSettings Schema

All settings stored in a single configuration object:

interface SiteSettings {
  // Basic Information
  siteName: string;
  siteDescription: string;
  siteUrl: string;
  logoUrl: string;
  faviconUrl: string;
  
  // Branding
  primaryColor: string;      // Hex color (e.g., '#1e2f6b')
  accentColor: string;       // Hex color (e.g., '#00d4d4')
  
  // Localization
  timezone: string;          // IANA timezone (e.g., 'America/Santiago')
  language: string;          // ISO code (e.g., 'es')
  
  // Maintenance
  maintenanceMode: boolean;  // Site-wide maintenance flag
  
  // Social Media
  socialLinks: {
    instagram?: string;
    facebook?: string;
    youtube?: string;
    whatsapp?: string;
    twitter?: string;
  };
  
  // SEO
  seoTitle: string;
  seoDescription: string;
  ogImageUrl?: string;       // Open Graph image
  gaId?: string;             // Google Analytics ID
  gtmId?: string;            // Google Tag Manager ID
  metaPixelId?: string;      // Meta (Facebook) Pixel ID
  
  // Notifications
  notificationEmail: string;
  notifyOnSubscribe: boolean;
  notifyOnBounce: boolean;
  notifyOnAutomationFail: boolean;
  weeklyDigest: boolean;
}

General Settings

Site Information

siteName

string

required

Display name of the site (e.g., “Cafh Chile”)

siteDescription

string

required

Short description for meta tags and browser tabs

siteUrl

string

required

Canonical URL including protocol (e.g., “https://cafh.cl”)

logoUrl

string

URL or path to site logo image

faviconUrl

string

URL or path to favicon (recommended: 32x32px PNG or ICO)

Branding Colors

primaryColor

string

default:"#1e2f6b"

Main brand color in hex format. Used for:

Header and navigation
Primary buttons
Links and accents

accentColor

string

default:"#00d4d4"

Secondary accent color. Used for:

Hover states
Highlights
CTAs

Color picker UI:

<input 
  type="color" 
  value={settings.primaryColor} 
  onChange={e => set('primaryColor', e.target.value)}
  className="w-12 h-10 rounded-xl border cursor-pointer"
/>

Localization

timezone

string

default:"America/Santiago"

IANA timezone identifier for event scheduling and timestampsAvailable options:

America/Santiago (UTC-3/4)
America/Buenos_Aires (UTC-3)
America/Mexico_City (UTC-6)
Europe/Madrid (UTC+1/2)

language

string

default:"es"

ISO 639-1 language code for interface and content

Maintenance Mode

maintenanceMode

boolean

default:false

When enabled, shows maintenance page to all non-admin users

Toggle UI:

<button 
  onClick={() => set('maintenanceMode', !settings.maintenanceMode)}
  className={`px-4 py-3 rounded-xl font-bold border-2 ${
    settings.maintenanceMode 
      ? 'border-red-300 bg-red-50 text-red-600' 
      : 'border-slate-200 bg-slate-50 text-slate-500'
  }`}
>
  {settings.maintenanceMode ? '🔴 Activado' : '🟢 Desactivado'}
</button>

Maintenance mode prevents all non-admin users from accessing the site. Admins can still log in and make changes.

Configure social media profile URLs:

socialLinks: {
  instagram?: string;   // Full URL: https://instagram.com/cafhchile
  facebook?: string;    // Full URL: https://facebook.com/cafhchile
  youtube?: string;     // Full URL: https://youtube.com/@cafh
  whatsapp?: string;    // Phone with country code: +56912345678
  twitter?: string;     // Full URL: https://twitter.com/cafh
}

These populate:

Footer social icons
Contact page links
Open Graph metadata

SEO Configuration

seoTitle

string

required

Global SEO title template (appears in Google results)

seoDescription

string

required

Meta description (150 chars max, appears in Google results)

ogImageUrl

string

Default Open Graph image (1200x630px recommended)Used when sharing on social media if page doesn’t have specific OG image

Analytics Integration

gaId

string

Google Analytics 4 Measurement ID (format: G-XXXXXXXXXX)

gtmId

string

Google Tag Manager Container ID (format: GTM-XXXXXXX)

metaPixelId

string

Meta (Facebook) Pixel ID for conversion tracking

Implementation example:

<!-- Google Analytics -->
{settings.gaId && (
  <script async src={`https://www.googletagmanager.com/gtag/js?id=${settings.gaId}`}></script>
)}

SMTP Configuration

Email sending configuration for cPanel SMTP:

interface SMTPConfig {
  host: string;        // SMTP server (e.g., 'mail.cafh.cl')
  port: string;        // Port (587 for TLS, 465 for SSL)
  secure: boolean;     // Use TLS/SSL
  user: string;        // SMTP username (usually full email)
  pass: string;        // SMTP password
  fromEmail: string;   // Default sender email
  fromName: string;    // Default sender name
}

SMTP Settings

Host Configuration

Enter your cPanel SMTP server hostname:

Usually mail.yourdomain.com
Check cPanel Email Accounts section

Port Selection

Choose appropriate port:

587: STARTTLS (recommended)
465: SSL/TLS
25: Plain (not recommended)

Authentication

Enter email account credentials:

User: Full email address (e.g., [email protected])
Pass: Email account password

Sender Information

Configure default sender:

From Email: [email protected]
From Name: Cafh Chile

Storage location:

localStorage.setItem('cafh_smtp_config_v1', JSON.stringify(smtpConfig));

SMTP credentials are stored locally in the browser. In production, store on server-side only and never expose to frontend.

Administrator Management

Manage system administrators:

interface AdminUser {
  id: string;
  name: string;
  email: string;
  role: UserRole;        // SUPER_ADMIN | ADMIN | EDITOR
  isActive: boolean;
  lastLogin?: string;
  createdAt: string;
}

User Roles

Super Admin

Full system access including settings and user management

Admin

Content management, CRM, and campaigns (no system settings)

Editor

Content creation and editing only

Current admin list (prototype):

[
  { 
    name: 'Administrador Principal', 
    email: '[email protected]', 
    role: 'Super Admin', 
    active: true, 
    last: 'Hoy' 
  },
  { 
    name: 'Editor Contenidos', 
    email: '[email protected]', 
    role: 'Editor', 
    active: true, 
    last: 'Aye' 
  },
]

Notification Settings

Configure system notification preferences:

notificationEmail

string

required

Email address to receive system notifications

Notification Types

📨 Send notification when someone subscribes via footer or form

notifyOnBounce

boolean

default:true

⚠️ Alert when email bounces (invalid address or delivery failure)

notifyOnAutomationFail

boolean

default:true

🔴 Notify when automation workflow encounters error

weeklyDigest

boolean

default:false

📊 Send weekly summary email with key metrics and activity

Toggle implementation:

<button 
  onClick={() => set('notifyOnSubscribe', !settings.notifyOnSubscribe)}
  className={`flex items-center gap-2 px-4 py-3 rounded-xl font-bold ${
    settings.notifyOnSubscribe 
      ? 'bg-cafh-indigo text-white' 
      : 'bg-slate-100 text-slate-500'
  }`}
>
  <Bell size={16} />
  {settings.notifyOnSubscribe ? 'Activado' : 'Desactivado'}
</button>

Data Management

Storage Keys

All settings persist to localStorage:

const LS_SETTINGS = 'cafh_site_settings_v1';
const LS_SMTP = 'cafh_smtp_config_v1';

Saving Settings

const save = () => {
  localStorage.setItem(LS_SETTINGS, JSON.stringify(settings));
  localStorage.setItem(LS_SMTP, JSON.stringify(smtp));
  flash(); // Show success message
};

Default Values

If no settings found, these defaults are used:

const DEFAULT_SETTINGS: SiteSettings = {
  siteName: 'Cafh Chile',
  siteDescription: 'Escuela de espiritualidad y desarrollo interior.',
  siteUrl: 'https://cafh.cl',
  logoUrl: '',
  faviconUrl: '',
  primaryColor: '#1e2f6b',
  accentColor: '#00d4d4',
  timezone: 'America/Santiago',
  language: 'es',
  maintenanceMode: false,
  socialLinks: {},
  seoTitle: 'Cafh Chile',
  seoDescription: 'Escuela de espiritualidad y desenvolvimiento interior.',
  notificationEmail: '[email protected]',
  notifyOnSubscribe: true,
  notifyOnBounce: true,
  notifyOnAutomationFail: true,
  weeklyDigest: false,
};

Settings UI Components

type STab = 'general' | 'social' | 'smtp' | 'admins' | 'notifications' | 'data';

const tabs: [STab, string, React.ElementType][] = [
  ['general', 'General', Settings],
  ['social', 'Social & SEO', Globe2],
  ['smtp', 'Email SMTP', Sliders],
  ['admins', 'Administradores', Users],
  ['notifications', 'Notificaciones', Bell],
  ['data', 'Datos & Export', Database],
];

Save Confirmation

Visual feedback when settings saved:

{saved && (
  <span className="flex items-center gap-2 text-emerald-600 font-bold text-sm bg-emerald-50 px-4 py-2 rounded-xl">
    <CheckCircle2 size={16} /> Guardado
  </span>
)}

Best Practices

Keep Social Links Updated

Monitor SMTP Limits

Most cPanel hosts limit 80-100 emails/hour. Configure rate limiting to avoid blacklisting.

Test Maintenance Mode

Before enabling site-wide maintenance, test with non-admin account to verify messaging.

SEO Description Length

Keep meta descriptions under 150 characters for optimal Google display.

Color Accessibility

Ensure primary and accent colors meet WCAG contrast requirements (4.5:1 minimum).

Journey Profiles

Configure user profiles and wizard settings

Change Log

View audit trail of all setting changes

Content Management

Member Management

Communications

Events & Activities

Analytics

Settings

​Settings Overview

General

Social & SEO

SMTP

Admins

Notifications

Data & Export

​SiteSettings Schema

​General Settings

​Site Information

​Branding Colors

​Localization

​Maintenance Mode

​Social Media & SEO

​Social Links

​SEO Configuration

​Analytics Integration

​SMTP Configuration

​SMTP Settings

​Administrator Management

​User Roles

Super Admin

Admin

Editor

​Notification Settings

​Notification Types

​Data Management

​Storage Keys

​Saving Settings

​Default Values

​Settings UI Components

​Tab Navigation

​Save Confirmation

​Best Practices

​Related Documentation

Journey Profiles

Change Log

Build docs developers (and LLMs) love

Settings Overview

SiteSettings Schema

General Settings

Site Information

Branding Colors

Localization

Maintenance Mode

Social Media & SEO

Social Links

SEO Configuration

Analytics Integration

SMTP Configuration

SMTP Settings

Administrator Management

User Roles

Notification Settings

Notification Types

Data Management

Storage Keys

Saving Settings

Default Values

Settings UI Components

Tab Navigation

Save Confirmation

Best Practices

Related Documentation