Skip to main content
Configuration File: config/pages/contact.ts

Overview

The contact page allows you to:
  • Display contact information (email, phone, address)
  • Showcase multiple support channels
  • Highlight response times
  • Link to other resources (docs, chat, etc.)
Configuration file: config/pages/contact.ts

Quick Start

1

Edit the config file

Open config/pages/contact.ts:
2

Add your contact information

Update email, phone, and address
3

Test it


Configuration Structure

Hero Section

Contact Information

Note: Social links are managed centrally in config/branding.ts (socialLinks) and appear automatically on the contact page.

Support Options

Available icons: message, mail, book, briefcase, phone, headphones href options:
  • External URL: "https://example.com"
  • Internal route: "/knowledgebase"
  • Email: "mailto:support@example.com"
  • Chat widget: "#" (opens chat)

Complete Example


Best Practices

Contact Information

  1. Real details - Use actual contact info, not placeholders
  2. Multiple channels - Offer email, phone, and chat
  3. Response times - Set clear expectations (“under 5min”, “1 hour”)
  4. Business hours - Specify availability for non-24/7 channels

Support Options

  1. 4-6 options - Cover main support channels
  2. Clear CTAs - “Start Chat” not “Click Here”
  3. Availability - Show when each option is available
  4. Hierarchy - Put fastest/best options first

Hero Stats

  1. Service metrics - Response time, availability, satisfaction
  2. Realistic - Don’t promise what you can’t deliver
  3. Updated - Keep satisfaction rates current

Troubleshooting

Social links are defined in config/branding.ts:
Ensure proper format:

Support option icons not displaying

Use lowercase Lucide icon names: message, mail, book, briefcase, phone, headphones

Address formatting issues

All address fields must be strings: